240 lines
7.0 KiB
Vue
240 lines
7.0 KiB
Vue
<template>
|
||
<div className="" style="position: relative">
|
||
<div id="lonlatMap" style=" width:100%; height: 100%;position: absolute;z-index: 1"></div>
|
||
<div
|
||
style="position: absolute;right:10px;top: 10px;z-index: 2;background:rgba(255,255,255,0.6);border-radius: 5px;overflow: hidden">
|
||
<!-- <div class="map-gj">图层</div>-->
|
||
<div class="map-gj" @click="onLineTool">测距</div>
|
||
<div class="map-gj" @click="onPolygonTool">测面</div>
|
||
<div class="map-gj" @click="clerOver">清除</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
var zoom = 18
|
||
export default {
|
||
components: {},
|
||
name: 'info',
|
||
data() {
|
||
return {
|
||
map: null,
|
||
infoData: {},
|
||
recordData: {},
|
||
lineTool: null,//测距
|
||
polygonTool: null,//侧面
|
||
}
|
||
},
|
||
props: ['value', 'files'],
|
||
watch: {
|
||
value: {
|
||
handler: function (newValue, oldValue) {
|
||
if (newValue) {
|
||
console.log(newValue, '-加载数据到 低于-')
|
||
this.infoData = newValue
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true // 为true，表示深度监听，这时候就能监测到a值变化
|
||
},
|
||
files: {
|
||
handler: function (newValue, oldValue) {
|
||
if (newValue) {
|
||
console.log(newValue, '-加载巡查情况到地图-')
|
||
// this.recordData = newValue
|
||
var thef = this
|
||
setTimeout(() => {
|
||
thef.map_set_images(newValue)
|
||
}, 1500)
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true // 为true，表示深度监听，这时候就能监测到a值变化
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.initMap()
|
||
|
||
}, 500)
|
||
setTimeout(() => {
|
||
this.setMap()
|
||
}, 1500)
|
||
})
|
||
},
|
||
methods: {
|
||
onLineTool() {
|
||
var config = {
|
||
showLabel: true
|
||
};
|
||
//创建标注工具对象
|
||
this.lineTool = new T.PolylineTool(this.map, config);
|
||
this.lineTool.open()
|
||
},
|
||
onPolygonTool() {
|
||
var config = {
|
||
showLabel: true,
|
||
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
|
||
};
|
||
//创建标注工具对象
|
||
this.polygonTool = new T.PolygonTool(this.map, config);
|
||
this.polygonTool.open()
|
||
},
|
||
clerOver() {
|
||
var OverLay = this.map.getOverlays()
|
||
// console.log(OverLay)
|
||
if (OverLay && OverLay.length > 0) {
|
||
OverLay.map((item, index) => {
|
||
if (!item.id) {
|
||
this.map.removeOverLay(item)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
initMap() {
|
||
return new Promise((resolve, reject) => {
|
||
// 如果已加载直接返回
|
||
if (window.T) {
|
||
console.log('地图脚本初始化成功...')
|
||
resolve(window.T)
|
||
reject('error')
|
||
}
|
||
})
|
||
},
|
||
setMap() {
|
||
this.map = new window.T.Map('lonlatMap');
|
||
this.map.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
|
||
|
||
// console.log(this.infoData)
|
||
var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
|
||
this.map.centerAndZoom(
|
||
LngLat,
|
||
zoom,
|
||
);
|
||
//创建比例尺控件对象
|
||
var scale = new window.T.Control.Scale();
|
||
//添加比例尺控件
|
||
this.map.addControl(scale);
|
||
this.addmark()
|
||
this.setMapPolers()
|
||
},
|
||
setMarkMap() {
|
||
console.log('多个标注')
|
||
},
|
||
addmark() {
|
||
var marker = new window.T.Marker(new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y)));// 创建标注
|
||
this.map.addOverLay(marker); // 将标注添加到地图中
|
||
marker.id = "marker_map"
|
||
var label = new window.T.Label({
|
||
text: "<b style='background:#fff;padding: 10px;'>" + (this.infoData.dkh || this.infoData.tbbh) + "<b>",
|
||
position: marker.getLngLat(),
|
||
offset: new T.Point(3, -30)
|
||
});
|
||
this.map.addOverLay(label);
|
||
label.id = "label_map"
|
||
marker.addEventListener("drag", function (e) {
|
||
label.setLngLat(marker.getLngLat());
|
||
})
|
||
},
|
||
map_set_images(images) {
|
||
if (!images) {
|
||
return
|
||
}
|
||
var info = this.infoData
|
||
// var imageURL = "https://img0.baidu.com/it/u=2833047327,3565178077&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260"
|
||
var imageURL = require("@/assets/images/fx.png")
|
||
var mapPointsList = []
|
||
mapPointsList.push(new window.T.LngLat(Number(info.x), Number(info.y)))
|
||
|
||
images.map((item, index) => {
|
||
item.x = item.jd;
|
||
item.y = item.wd;
|
||
if (item.x && item.y) {
|
||
var newindex = Number(index) + 1
|
||
mapPointsList.push(new window.T.LngLat(Number(item.x), Number(item.y)))
|
||
item.x = Number(item.x)
|
||
item.y = Number(item.y)
|
||
var deg = Number(item.deg)
|
||
var optdiv = '<div style="position: relative;display: contents; width: 50px;height: 50px;overflow: hidden;">' +
|
||
'<b style="display: block; font-size: 15px;background: #007aff;border-radius: 100px;' +
|
||
'width: 20px;' +
|
||
'margin: 15px;' +
|
||
'height: 20px;opacity: 0.4;' +
|
||
'position: relative;' +
|
||
'text-align: center;' +
|
||
'left: -10px;line-height: 1.5;' +
|
||
'color: white;">' + newindex + '</b>' +
|
||
'<img src="' + imageURL + '" style="position: absolute; opacity: 0.5;z-index: -1;top: 0px; left: 0px;width: 50px;height: 50px; transform: rotate(' + deg + 'deg);"alt=""></div>'
|
||
var map_images = new window.T.Label({
|
||
text: optdiv,
|
||
position: new window.T.LngLat(item.x, item.y),
|
||
offset: new T.Point(-25, -25),
|
||
images: imageURL
|
||
});
|
||
|
||
this.map.addOverLay(map_images);
|
||
map_images.id = "map_images"
|
||
|
||
|
||
}
|
||
})
|
||
|
||
var centerPoint = this.map.getViewport(mapPointsList)
|
||
|
||
if (centerPoint !== undefined) {
|
||
// //中心点给到地图
|
||
this.map.centerAndZoom(
|
||
centerPoint.center,
|
||
centerPoint.zoom,
|
||
);
|
||
}
|
||
},
|
||
setMapPolers() {
|
||
var opts = JSON.parse(this.infoData.gis)
|
||
if (opts.type == 'Polygon') {
|
||
var coordinates = opts.coordinates
|
||
for (var k in coordinates) {
|
||
var points = []
|
||
for (var i in coordinates[k]) {
|
||
if (coordinates[k][i][0] && coordinates[k][i][1]) {
|
||
points.push(new window.T.LngLat(Number(coordinates[k][i][0]), Number(coordinates[k][i][1])))
|
||
}
|
||
}
|
||
var polygon = new T.Polygon(points, {
|
||
color: 'blue',
|
||
weight: 3,
|
||
opacity: 0.5,
|
||
fillColor: '#FFFFFF',
|
||
fillOpacity: 0.5
|
||
})
|
||
console.log(polygon, '--')
|
||
//向地图上添加面
|
||
this.map.addOverLay(polygon)
|
||
polygon.id = "polygon" + k
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.tdt-label {
|
||
background: none !important;
|
||
border: none !important;
|
||
padding: 0;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.map-gj {
|
||
padding: 5px 10px;
|
||
border: 1px solid #999999;
|
||
|
||
}
|
||
|
||
.map-gj:last-child {
|
||
border: none;
|
||
}
|
||
</style>
|