完善数据权限功能
This commit is contained in:
166
ruoyi-ui/src/components/TianDiTuMap/index.vue
Normal file
166
ruoyi-ui/src/components/TianDiTuMap/index.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div id="mapDiv" style="position:absolute;width:100%; height:100%">
|
||||
<!-- <img src="https://img2.baidu.com/it/u=1902529991,495288049&fm=253&fmt=auto&app=120&f=JPEG?w=434&h=500">-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'TianDiTuMap',
|
||||
props: ['tbxx', "record"],
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
zoom: 19,
|
||||
centerLngLat: {
|
||||
x: 101.55247228396,
|
||||
y: 25.038860388323
|
||||
},
|
||||
// 替换成你的天地图API密钥
|
||||
tianDiTuApiKey: 'f437a9ce7c0267b53561884a3caf6726'
|
||||
};
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 引入天地图API脚本
|
||||
|
||||
|
||||
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)
|
||||
var thif = this
|
||||
this.$nextTick(() => {
|
||||
let timer = setInterval(() => {
|
||||
const a = new Promise((resolve, reject) => {
|
||||
if (window.T) {
|
||||
console.log('地图脚本初始化成功...');
|
||||
resolve(window.T);
|
||||
} else {
|
||||
console.log('失败...');
|
||||
}
|
||||
});
|
||||
if (window.T) {
|
||||
thif.initMap();
|
||||
clearTimeout(timer);
|
||||
}
|
||||
}, 1000)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
// 创建地图实例
|
||||
this.map = new T.Map('mapDiv');
|
||||
var maplist = this.tbxx
|
||||
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), {
|
||||
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), // 图标大小
|
||||
}),
|
||||
});
|
||||
marker1.addEventListener("click", (e) => {
|
||||
this.map.centerAndZoom(
|
||||
new window.T.LngLat(e.lnglat.lng, e.lnglat.lat),
|
||||
[this.zoom],
|
||||
);
|
||||
}
|
||||
);
|
||||
this.map.addOverLay(marker1);
|
||||
var points = [];
|
||||
var gis = maplist[i].gis
|
||||
if (gis) {
|
||||
var poin = JSON.parse(gis)
|
||||
var poin = poin.coordinates[0]
|
||||
for (var k in poin) {
|
||||
points.push(new T.LngLat(poin[k][0], poin[k][1]));
|
||||
}
|
||||
//创建面对象
|
||||
var polygon = new T.Polygon(points, {
|
||||
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
|
||||
});
|
||||
//向地图上添加面
|
||||
this.map.addOverLay(polygon);
|
||||
// 设置地图中心点和缩放级别
|
||||
this.map.centerAndZoom(new T.LngLat(maplist[i].x, maplist[i].y), 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);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tdt-label {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
text-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user