409 lines
13 KiB
Vue
409 lines
13 KiB
Vue
<template>
|
||
<div class="container" style="position: relative;height: 100%">
|
||
<div id="lonlatMap" style="width:100%; height: 100%;position: absolute;z-index: 1"></div>
|
||
<!-- <div id="lonlatMap1" style="width:100%; height: 50%;position: absolute;top: 0;z-index: 1"></div>-->
|
||
<!-- <div id="lonlatMap2" style=" width:100%; height: 50%;position: absolute;bottom: 0;z-index: 1"></div>-->
|
||
<!-- <div-->
|
||
<!-- style="position: absolute;left:10px;top: 10px;z-index: 2;background:rgba(255,255,255,0.6);border-radius: 5px;overflow: hidden">-->
|
||
<!-- <div class="map-lj">-->
|
||
<!-- <el-select style="width:120px" v-model="year" placeholder="历史影像" clearable @change="ynHis">-->
|
||
<!-- <el-option-->
|
||
<!-- v-for="(item,index) in getYearList(2018)"-->
|
||
<!-- :key="item"-->
|
||
<!-- :label="item"-->
|
||
<!-- :value="item"-->
|
||
<!-- />-->
|
||
<!-- </el-select>-->
|
||
<!-- </div>-->
|
||
<!-- </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" @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 {
|
||
year: null,
|
||
map: null,
|
||
map1: null,
|
||
map2: null,
|
||
map1Style: "width:100%; height: 100%;position: absolute;top: 0;z-index: 1",
|
||
infoData: {
|
||
x: "101.51821267418167",
|
||
y: "25.053135818719412",
|
||
dkh: "",
|
||
tbbh: ""
|
||
},
|
||
recordData: {},
|
||
lineTool: null,//测距
|
||
polygonTool: null,//侧面
|
||
}
|
||
},
|
||
props: ['value', 'files'],
|
||
watch: {
|
||
value: {
|
||
handler: function (newValue, oldValue) {
|
||
if (newValue) {
|
||
console.log(newValue, '-加载数据到 低于-')
|
||
this.infoData = newValue;
|
||
this.updateMap(); // 更新地图
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true // 为true，表示深度监听，这时候就能监测到a值变化
|
||
},
|
||
files: {
|
||
handler: function (newValue, oldValue) {
|
||
if (newValue) {
|
||
console.log(newValue, '-加载巡查情况到地图-')
|
||
var thef = this
|
||
setTimeout(() => {
|
||
thef.map_set_images(newValue);
|
||
}, 500)
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true // 为true，表示深度监听，这时候就能监测到a值变化
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.initMap()
|
||
|
||
}, 300)
|
||
setTimeout(() => {
|
||
this.setMap()
|
||
}, 500)
|
||
})
|
||
},
|
||
methods: {
|
||
getYearList(startYear) {
|
||
startYear = startYear || 2018;
|
||
const currentYear = new Date().getFullYear();
|
||
const yearList = [];
|
||
for (let year = startYear; year < currentYear; year++) {
|
||
yearList.push(year);
|
||
}
|
||
return yearList;
|
||
},
|
||
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.forEach((item, index) => {
|
||
if (!item.id) {
|
||
this.map.removeOverLay(item)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
clerImages() {
|
||
var OverLay = this.map.getOverlays()
|
||
// console.log(OverLay)
|
||
if (OverLay && OverLay.length > 0) {
|
||
OverLay.forEach((item) => {
|
||
if (item.id === "map_images") {
|
||
this.map.removeOverLay(item)
|
||
}
|
||
})
|
||
}
|
||
},
|
||
initMap() {
|
||
return new Promise((resolve, reject) => {
|
||
// 如果已加载直接返回
|
||
if (window.T) {
|
||
console.log('地图脚本初始化成功...')
|
||
resolve(window.T)
|
||
reject('error')
|
||
}
|
||
})
|
||
},
|
||
ynHis() {
|
||
if (!this.year) {
|
||
this.$tab.refreshPage();
|
||
return
|
||
}
|
||
if (!this.map1 || !this.map2) {
|
||
this.setMap1();
|
||
this.setMap2();
|
||
}
|
||
this.map2.clearLayers();
|
||
// 加载wms图层
|
||
var wmsLayer = new window.T.TileLayer.WMS(`https://maps1.ynmap.cn/tileServer/service/maps/ynHisC${this.year}/4490/wmts/tile/default/{z}/{y}/{x}?key=a85072d90b804b34afcb7c7d6422fcb3`);
|
||
this.map2.addLayer(wmsLayer)
|
||
},
|
||
setMap() {
|
||
this.map = new window.T.Map('lonlatMap', {projection: 'EPSG:4326'});
|
||
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()
|
||
},
|
||
setMap1() {
|
||
this.map1 = new window.T.Map('lonlatMap1', {projection: 'EPSG:4326'});
|
||
this.map1.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
|
||
// console.log(this.infoData)
|
||
var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
|
||
this.map1.centerAndZoom(
|
||
LngLat,
|
||
zoom,
|
||
);
|
||
//创建比例尺控件对象
|
||
var scale = new window.T.Control.Scale();
|
||
//添加比例尺控件
|
||
this.map1.addControl(scale);
|
||
this.addmarkToHisMap(this.map1);
|
||
this.setMapPolersToHisMap(this.map1);
|
||
// 添加事件监听
|
||
this.map1.on('moveend', (event) => {
|
||
console.log("moveend")
|
||
var zoom = this.map1.getZoom();
|
||
var lng = this.map1.getCenter().getLng()
|
||
var lat = this.map1.getCenter().getLat()
|
||
console.log('地图中心点', lng, lat, zoom)
|
||
// 事件触发时，会将点击的地理位置的经纬度信息打印出来
|
||
this.changeToTarget(this.map1, this.map2);
|
||
});
|
||
},
|
||
changeToTarget(map, target) {
|
||
var zoom = map.getZoom();
|
||
var lng = map.getCenter().getLng()
|
||
var lat = map.getCenter().getLat()
|
||
console.log('地图中心点', lng, lat, zoom)
|
||
target.centerAndZoom(new T.LngLat(lng, lat), zoom);
|
||
},
|
||
setMap2() {
|
||
this.map2 = new window.T.Map('lonlatMap2', {projection: 'EPSG:4326'});
|
||
this.map2.setMapType(window.TMAP_HYBRID_MAP); //此地图类型展示卫星和路网的混合视图。
|
||
// console.log(this.infoData)
|
||
var LngLat = new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y))
|
||
this.map2.centerAndZoom(
|
||
LngLat,
|
||
zoom,
|
||
);
|
||
//创建比例尺控件对象
|
||
var scale = new window.T.Control.Scale();
|
||
//添加比例尺控件
|
||
this.map2.addControl(scale);
|
||
this.addmarkToHisMap(this.map2);
|
||
this.setMapPolersToHisMap(this.map2);
|
||
// 禁止
|
||
this.map2.disableDrag();
|
||
this.map2.disableScrollWheelZoom();
|
||
},
|
||
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());
|
||
})
|
||
},
|
||
addmarkToHisMap(map) {
|
||
var marker = new window.T.Marker(new window.T.LngLat(Number(this.infoData.x), Number(this.infoData.y)));// 创建标注
|
||
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)
|
||
});
|
||
map.addOverLay(label);
|
||
label.id = "label_map"
|
||
marker.addEventListener("drag", function (e) {
|
||
label.setLngLat(marker.getLngLat());
|
||
})
|
||
},
|
||
map_set_images(images) {
|
||
this.clerImages();
|
||
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.psfx)
|
||
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"
|
||
|
||
// item.show = false时删除覆盖物
|
||
if (item.show === false) {
|
||
this.map.removeOverLay(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
|
||
}
|
||
}
|
||
},
|
||
setMapPolersToHisMap(map) {
|
||
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, '--')
|
||
//向地图上添加面
|
||
map.addOverLay(polygon)
|
||
polygon.id = "polygon" + k
|
||
}
|
||
}
|
||
},
|
||
updateMap() {
|
||
this.clerOver();
|
||
this.map.clearOverLays();
|
||
this.setMap();
|
||
this.addmark();
|
||
this.setMapPolers();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.tdt-label {
|
||
background: none !important;
|
||
border: none !important;
|
||
padding: 0;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.map-lj {
|
||
padding: 5px 10px;
|
||
border: 1px solid #999999;
|
||
|
||
}
|
||
|
||
.map-gj {
|
||
padding: 5px 10px;
|
||
border: 1px solid #999999;
|
||
|
||
}
|
||
|
||
.map-gj:last-child {
|
||
border: none;
|
||
}
|
||
</style>
|