final
This commit is contained in:
239
ruoyi-ui/src/components/Map2/index.vue
Normal file
239
ruoyi-ui/src/components/Map2/index.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user