last version
This commit is contained in:
@@ -16,64 +16,31 @@ export default {
|
||||
x: 101.55247228396,
|
||||
y: 25.038860388323
|
||||
},
|
||||
// 替换成你的天地图API密钥
|
||||
tianDiTuApiKey: 'f437a9ce7c0267b53561884a3caf6726'
|
||||
// 替换成你的天地图API密钥 6a5855c0a90157af780fd49db731808a f437a9ce7c0267b53561884a3caf6726
|
||||
tianDiTuApiKey: '6a5855c0a90157af780fd49db731808a'
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
record(newvalue, oldvalue) {
|
||||
var thef = this
|
||||
setTimeout(function (e) {
|
||||
var list = newvalue.taskCheckImages
|
||||
if (list.length > 0) {
|
||||
var mapPointsList = []
|
||||
var imgurllist = []
|
||||
for (var i in list) {
|
||||
list[i].jd = Number(list[i].jd)
|
||||
list[i].wd = Number(list[i].wd)
|
||||
list[i].psfx = Number(list[i].psfx)
|
||||
var imageURL = process.env.VUE_APP_BASE_API + "/profile/common/arow.png"
|
||||
mapPointsList.push(new window.T.LngLat(Number(list[i].jd), Number(list[i].wd)))
|
||||
|
||||
var deg = list[i].psfx
|
||||
var iMgurl = process.env.VUE_APP_BASE_API + list[i].cclj
|
||||
var optdiv = '<div style="position: relative;display: contents; width: 50px;height: 50px;overflow: hidden;">' +
|
||||
'<a target="_blank" href="' + iMgurl + '"><b style="display: block; font-size: 15px;background: #007aff;border-radius: 100px;' +
|
||||
'width: 20px;' +
|
||||
'margin: 15px;' +
|
||||
'height: 20px;' +
|
||||
'position: relative;' +
|
||||
'text-align: center;' +
|
||||
'left: -10px;line-height: 1.5;' +
|
||||
'color: white;">' + (Number(i) + 1) + '</b>' +
|
||||
'<img src="' + imageURL + '" style="position: absolute; z-index: -1;top: 0px; left: 0px;width: 50px;height: 50px; transform: rotate(' + deg + 'deg);"alt=""></a></div>'
|
||||
var label = new window.T.Label({
|
||||
text: optdiv,
|
||||
position: new window.T.LngLat(list[i].jd, list[i].wd),
|
||||
offset: new T.Point(-25, -15),
|
||||
images: iMgurl
|
||||
});
|
||||
imgurllist.push(iMgurl)
|
||||
|
||||
// 将标注添加到地图中
|
||||
thef.map.addOverLay(label);
|
||||
}
|
||||
// // 获取合理的中心点
|
||||
// const centerPoint = thef.map.getViewport(mapPointsList)
|
||||
// //------------多个坐标集合获取中心点------------
|
||||
// //中心点给到地图
|
||||
// thef.map.centerAndZoom(
|
||||
// centerPoint.center,
|
||||
// centerPoint.zoom,
|
||||
// );
|
||||
}
|
||||
}, 1000)
|
||||
record: {
|
||||
handler: function (newvalue, oldvalue) {
|
||||
var thef = this
|
||||
setTimeout(function (e) {
|
||||
// 清除原有标注
|
||||
thef.map.clearOverLays()
|
||||
// 添加中心点
|
||||
var maplist = thef.tbxx
|
||||
thef.addCenterPoint(maplist);
|
||||
// 添加图片拍摄点
|
||||
var imageslist = newvalue.taskCheckImages
|
||||
thef.addImagesPoint(imageslist)
|
||||
}, 1000)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 引入天地图API脚本
|
||||
|
||||
|
||||
const charset = 'utf-8'
|
||||
const script = document.createElement('script')
|
||||
script.setAttribute('type', 'text/javascript')
|
||||
@@ -102,10 +69,29 @@ export default {
|
||||
initMap() {
|
||||
// 创建地图实例
|
||||
this.map = new T.Map('mapDiv');
|
||||
// this.map.centerAndZoom(
|
||||
// new window.T.LngLat( 102.682491, 25.051102),
|
||||
// [15],
|
||||
// );
|
||||
var maplist = this.tbxx
|
||||
this.addCenterPoint(maplist);
|
||||
//map.setMapType(window.TMAP_NORMAL_MAP); // 此地图类型展示普通街道视图
|
||||
//map.setMapType(window.TMAP_TERRAIN_MAP); // 此地图类型展示地形视图。
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
|
||||
//map.setMapType(window.TMAP_SATELLITE_MAP ); //此地图类型展示卫星视图。
|
||||
//map.setMapType(window.TMAP_TERRAIN_HYBRID_MAP); // 此地图类型展示地形和路网的混合视图。
|
||||
//创建比例尺控件对象
|
||||
var scale = new window.T.Control.Scale();
|
||||
//添加比例尺控件
|
||||
this.map.addControl(scale);
|
||||
},
|
||||
// 添加中心点
|
||||
addCenterPoint(maplist) {
|
||||
// console.log(maplist, "maplist")
|
||||
if (maplist.length > 0) {
|
||||
for (var i in maplist) {
|
||||
var marker1 = new window.T.Marker(new window.T.LngLat(maplist[i].x, maplist[i].y), {
|
||||
// console.log(maplist[i].KMX, maplist[i].KMY)
|
||||
var marker1 = new window.T.Marker(new window.T.LngLat(maplist[i].KMX, maplist[i].KMY), {
|
||||
icon: new window.T.Icon({
|
||||
iconUrl: 'https://img1.baidu.com/it/u=1528868125,4274794029&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // 引入自定义图标
|
||||
iconSize: new window.T.Point(30, 30), // 图标大小
|
||||
@@ -121,6 +107,7 @@ export default {
|
||||
this.map.addOverLay(marker1);
|
||||
var points = [];
|
||||
var gis = maplist[i].gis
|
||||
// console.log(gis)
|
||||
if (gis) {
|
||||
var poin = JSON.parse(gis)
|
||||
var poin = poin.coordinates[0]
|
||||
@@ -134,24 +121,60 @@ export default {
|
||||
//向地图上添加面
|
||||
this.map.addOverLay(polygon);
|
||||
// 设置地图中心点和缩放级别
|
||||
this.map.centerAndZoom(new T.LngLat(maplist[i].x, maplist[i].y), 15);
|
||||
this.map.centerAndZoom(new T.LngLat(maplist[i].KMX, maplist[i].KMY), 15);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 设置地图中心点和缩放级别
|
||||
this.map.centerAndZoom(new T.LngLat(this.centerLngLat.x, this.centerLngLat.y), 15);
|
||||
}
|
||||
//map.setMapType(window.TMAP_NORMAL_MAP); // 此地图类型展示普通街道视图
|
||||
//map.setMapType(window.TMAP_TERRAIN_MAP); // 此地图类型展示地形视图。
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
|
||||
//map.setMapType(window.TMAP_SATELLITE_MAP ); //此地图类型展示卫星视图。
|
||||
//map.setMapType(window.TMAP_TERRAIN_HYBRID_MAP); // 此地图类型展示地形和路网的混合视图。
|
||||
//创建比例尺控件对象
|
||||
var scale = new window.T.Control.Scale();
|
||||
//添加比例尺控件
|
||||
this.map.addControl(scale);
|
||||
},
|
||||
// 添加图片拍摄点
|
||||
addImagesPoint(list) {
|
||||
if (list.length > 0) {
|
||||
var mapPointsList = []
|
||||
var imgurllist = []
|
||||
for (var i in list) {
|
||||
list[i].jd = Number(list[i].jd)
|
||||
list[i].wd = Number(list[i].wd)
|
||||
list[i].psfx = Number(list[i].psfx)
|
||||
var imageURL = process.env.VUE_APP_BASE_API + "/profile/common/arow.png"
|
||||
mapPointsList.push(new window.T.LngLat(Number(list[i].jd), Number(list[i].wd)))
|
||||
var deg = list[i].psfx
|
||||
var iMgurl = process.env.VUE_APP_BASE_API + list[i].cclj
|
||||
var optdiv = '<div style="position: relative;display: contents; width: 50px;height: 50px;overflow: hidden;">' +
|
||||
'<a target="_blank" href="' + iMgurl + '"><b style="display: block; font-size: 15px;background: #007aff;border-radius: 100px;' +
|
||||
'width: 20px;' +
|
||||
'margin: 15px;' +
|
||||
'height: 20px;' +
|
||||
'position: relative;' +
|
||||
'text-align: center;' +
|
||||
'left: -10px;line-height: 1.5;' +
|
||||
'color: white;">' + (Number(i) + 1) + '</b>' +
|
||||
'<img src="' + imageURL + '" style="position: absolute; z-index: -1;top: 0px; left: 0px;width: 50px;height: 50px; transform: rotate(' + deg + 'deg);"alt=""></a></div>'
|
||||
var images_mark = new window.T.Label({
|
||||
text: optdiv,
|
||||
position: new window.T.LngLat(list[i].jd, list[i].wd),
|
||||
offset: new T.Point(-25, -15),
|
||||
images: iMgurl
|
||||
});
|
||||
imgurllist.push(iMgurl)
|
||||
|
||||
// 将标注添加到地图中
|
||||
this.map.addOverLay(images_mark);
|
||||
}
|
||||
// // 获取合理的中心点
|
||||
// const centerPoint = thef.map.getViewport(mapPointsList)
|
||||
// //------------多个坐标集合获取中心点------------
|
||||
// //中心点给到地图
|
||||
// thef.map.centerAndZoom(
|
||||
// centerPoint.center,
|
||||
// centerPoint.zoom,
|
||||
// );
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
154
ruoyi-ui/src/components/TianDiTuMap/index2.vue
Normal file
154
ruoyi-ui/src/components/TianDiTuMap/index2.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
template
|
||||
<template>
|
||||
<div id="mapDiv" style="position:absolute;width:100%; height:100%;">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
/**
|
||||
* 天地图组件
|
||||
* @props mapInfo 地图信息对象，包括gis、centerPoint、images等
|
||||
*/
|
||||
export default {
|
||||
name: 'TianDiTuMap2',
|
||||
props: ['mapInfo'],
|
||||
data() {
|
||||
return {
|
||||
map: null, // 地图实例
|
||||
zoom: 19, // 地图缩放级别
|
||||
centerLngLat: { // 地图中心点经纬度
|
||||
x: 101.55247228396,
|
||||
y: 25.038860388323
|
||||
},
|
||||
mapInfo: { // 传入的地图信息
|
||||
gis: null,
|
||||
centerPoint: null,
|
||||
images: null
|
||||
},
|
||||
tianDiTuApiKey: '6a5855c0a90157af780fd49db731808a' // 天地图API密钥
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
await this.loadTianDiTuScript(); // 加载天地图脚本
|
||||
this.initMap(); // 初始化地图
|
||||
} catch (error) {
|
||||
console.error('Error loading TianDiTu script:', error);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mapInfo: {
|
||||
handler: function (newvalue, oldvalue) {
|
||||
var thef = this
|
||||
setTimeout(function (e) {
|
||||
// 清除原有标注
|
||||
thef.map.clearOverLays()
|
||||
thef.addCenterPoint(thef.mapInfo.centerPoint);
|
||||
thef.addGisPolygon(thef.mapInfo.gis);
|
||||
thef.addImagesPoint(thef.mapInfo.images);
|
||||
}, 100)
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 加载天地图脚本
|
||||
*/
|
||||
async loadTianDiTuScript() {
|
||||
const charset = 'utf-8';
|
||||
const script = document.createElement('script');
|
||||
script.setAttribute('type', 'text/javascript');
|
||||
script.setAttribute('charset', charset);
|
||||
script.setAttribute('src', `http://api.tianditu.gov.cn/api?v=4.0&tk=${this.tianDiTuApiKey}`);
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
// 等待天地图T对象加载完成
|
||||
await new Promise(resolve => {
|
||||
const checkT = setInterval(() => {
|
||||
if (window.T) {
|
||||
clearInterval(checkT);
|
||||
resolve();
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
console.log('地图脚本初始化成功...');
|
||||
},
|
||||
/**
|
||||
* 初始化地图，添加中心点、GIS多边形、图片点等
|
||||
*/
|
||||
initMap() {
|
||||
|
||||
console.log(this.mapInfo,'mapInfo')
|
||||
|
||||
this.map = new T.Map('mapDiv');
|
||||
this.addCenterPoint(this.mapInfo.centerPoint);
|
||||
this.addGisPolygon(this.mapInfo.gis);
|
||||
this.addImagesPoint(this.mapInfo.images);
|
||||
this.map.setMapType(window.TMAP_HYBRID_MAP);
|
||||
const scale = new window.T.Control.Scale();
|
||||
this.map.addControl(scale);
|
||||
},
|
||||
/**
|
||||
* 添加中心点标记
|
||||
* @param {Object} centerPoint 中心点坐标对象
|
||||
*/
|
||||
addCenterPoint(centerPoint) {
|
||||
if (!centerPoint) return; // 验证数据
|
||||
const marker = new window.T.Marker(new window.T.LngLat(centerPoint.x, centerPoint.y), {
|
||||
icon: new window.T.Icon({
|
||||
iconUrl: 'https://img1.baidu.com/it/u=1528868125,4274794029&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
iconSize: new window.T.Point(30, 30),
|
||||
}),
|
||||
});
|
||||
marker.addEventListener("click", (e) => {
|
||||
this.map.centerAndZoom(new window.T.LngLat(e.lnglat.lng, e.lnglat.lat), [this.zoom]);
|
||||
});
|
||||
this.map.addOverLay(marker);
|
||||
this.map.centerAndZoom(new T.LngLat(centerPoint.x, centerPoint.y), 15);
|
||||
},
|
||||
/**
|
||||
* 添加GIS多边形
|
||||
* @param {String} gis GIS多边形数据字符串
|
||||
*/
|
||||
addGisPolygon(gis) {
|
||||
if (!gis) return; // 验证数据
|
||||
if (gis.type === "Point") return;
|
||||
var points = [];
|
||||
const poin = JSON.parse(gis).coordinates[0];
|
||||
for (var k in poin) {
|
||||
points.push(new T.LngLat(poin[k][0], poin[k][1]));
|
||||
}
|
||||
const polygon = new T.Polygon(points, {
|
||||
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
|
||||
});
|
||||
this.map.addOverLay(polygon);
|
||||
},
|
||||
/**
|
||||
* 添加图片标记点
|
||||
* @param {Array} images 图片标记点数组
|
||||
*/
|
||||
addImagesPoint(images) {
|
||||
if (!images || images.length === 0) return; // 验证数据
|
||||
images.forEach((image, index) => {
|
||||
image.jd = Number(image.jd);
|
||||
image.wd = Number(image.wd);
|
||||
image.psfx = Number(image.psfx);
|
||||
const imageURL = `${process.env.VUE_APP_BASE_API}/profile/common/arow.png`;
|
||||
const deg = image.psfx;
|
||||
const iMgurl = `${process.env.VUE_APP_BASE_API}${image.cclj}`;
|
||||
const optdiv = `<div style="position: relative;display: contents; width: 50px;height: 50px;overflow: hidden;"><a target="_blank" href="${iMgurl}"><b style="display: block; font-size: 15px;background: #007aff;border-radius: 100px;width: 20px;margin: 15px;height: 20px;position: relative;left: -10px;line-height: 1.5;color: white;">${index + 1}</b><img src="${imageURL}" style="position: absolute; z-index: -1;top: 0px; left: 0px;width: 50px;height: 50px; transform: rotate(${deg}deg);" alt=""></a></div>`;
|
||||
const images_mark = new window.T.Label({
|
||||
text: optdiv,
|
||||
position: new window.T.LngLat(image.jd, image.wd),
|
||||
offset: new T.Point(-25, -15),
|
||||
images: iMgurl
|
||||
});
|
||||
this.map.addOverLay(images_mark);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user