|
@@ -1,7 +1,6 @@
|
|
|
<template>
|
|
|
<view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap">
|
|
|
- <!-- :change:prop="Trenderjs.initTMap" -->
|
|
|
- <!-- <view class="position" @click.stop="Trenderjs.onPosition">
|
|
|
+ <view class="position" @click.stop="Trenderjs.onPosition">
|
|
|
<svg t="1734080022350" class="position-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
|
p-id="4287" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
<path d="M512 512m-80 0a80 80 0 1 0 160 0 80 80 0 1 0-160 0Z" p-id="4288"></path>
|
|
@@ -10,7 +9,7 @@
|
|
|
p-id="4289"></path>
|
|
|
</svg>
|
|
|
|
|
|
- </view> -->
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -44,18 +43,15 @@
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
- EventBus.$on('TianDiTuSite', (res) => {
|
|
|
- const { longitude, latitude } = res;
|
|
|
- this.Trenderjs.SelectedDot(longitude, latitude)
|
|
|
- console.log('Event received with payload:', res);
|
|
|
- });
|
|
|
+
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- EventBus.$off('someEvent'); // 确保在组件销毁前移除事件监听
|
|
|
+ // EventBus.$off('someEvent'); // 确保在组件销毁前移除事件监听
|
|
|
},
|
|
|
methods: {
|
|
|
compliteonLoadTianDiTu() {
|
|
|
this.$emit('onLoadTianDiTu')
|
|
|
+
|
|
|
},
|
|
|
initCharts(lng, lat, iconPng) {
|
|
|
this.option = {
|
|
@@ -110,51 +106,89 @@
|
|
|
}
|
|
|
</script>
|
|
|
<script module="Trenderjs" lang="renderjs">
|
|
|
+ import { EventBus } from "@/utils/vueBus.js"
|
|
|
var Tmap = null;
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
options: {},
|
|
|
+ markerList: [],
|
|
|
+ labelLsit: []
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
- this.removeMapMoveend()
|
|
|
+ this.removeMapEvent()
|
|
|
},
|
|
|
methods: {
|
|
|
- onPosition(e) {
|
|
|
- e.
|
|
|
- console.log("---------------------")
|
|
|
+ onPosition() {
|
|
|
+ EventBus.$emit('TianDiTuSearch' , (res) => {
|
|
|
+ this.SelectedDot(res)
|
|
|
+ })
|
|
|
+ // this.SelectedDot({longitude:114.414431,latitude:30.482926})
|
|
|
},
|
|
|
- addMapMoveend() {
|
|
|
+ addMapEvent() {
|
|
|
//移除地图的移动停止事件
|
|
|
- console.log("Tmap = 11", Tmap)
|
|
|
- this.removeMapMoveend()
|
|
|
- if (Tmap) Tmap.addEventListener("moveend", this.MapMoveend);
|
|
|
+ this.getLocation()
|
|
|
+ this.removeMapEvent()
|
|
|
+ if (Tmap) {
|
|
|
+ Tmap.addEventListener("moveend", this.MapMoveend);
|
|
|
+ Tmap.addEventListener('zoomend', this.handleZoomEvent);
|
|
|
+ }
|
|
|
},
|
|
|
- removeMapMoveend() {
|
|
|
+ removeMapEvent() {
|
|
|
//移除地图的移动停止事件
|
|
|
try {
|
|
|
- if (Tmap) Tmap.removeEventListener("moveend", this.MapMoveend);
|
|
|
+ if (Tmap) {
|
|
|
+ Tmap.removeEventListener("moveend", this.MapMoveend);
|
|
|
+ Tmap.removeEventListener("zoomend", this.MapMoveend);
|
|
|
+ }
|
|
|
} catch (error) {
|
|
|
//TODO handle the exception
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
+ // 移动地图,获取中心点
|
|
|
MapMoveend(e) {
|
|
|
try {
|
|
|
+ // console.log("移动地图")
|
|
|
const v = e.target.getCenter()
|
|
|
const Lng = v.getLng();
|
|
|
- const Lat = v.getLat()
|
|
|
- console.log("MapMoveend 99= ", Lng, Lat)
|
|
|
+ const Lat = v.getLat();
|
|
|
this.$emit("moveMap", { Lng, Lat })
|
|
|
} catch (error) {
|
|
|
//TODO handle the exception
|
|
|
}
|
|
|
+ },
|
|
|
|
|
|
+ // 点击地图标注的点位
|
|
|
+ clickMapSite(e) {
|
|
|
+ const Lng = e.lnglat.getLng();
|
|
|
+ const Lat = e.lnglat.getLat();
|
|
|
+ this.$emit('handleMapSite', { Lng, Lat })
|
|
|
+
|
|
|
+ },
|
|
|
+ // 天地图缩放事件
|
|
|
+ handleZoomEvent(event) {
|
|
|
+ if (!this.labelLsit || this.labelLsit.length === 0) return;
|
|
|
+ // let currentZoom = event.target.getZoom();
|
|
|
+ // console.log("handleZoomEvent = 天地图缩放事件 " , currentZoom)
|
|
|
+ this.labelLsit.forEach(el => {
|
|
|
+ this.labelShowOrHide(el)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 标签的显示与隐藏
|
|
|
+ labelShowOrHide(label) {
|
|
|
+ if (!Tmap) return
|
|
|
+ let currentZoom = Tmap.getZoom();
|
|
|
+ if (currentZoom >= 16) {
|
|
|
+ label.show()
|
|
|
+ } else {
|
|
|
+ label.hide()
|
|
|
+ }
|
|
|
},
|
|
|
+
|
|
|
initTmap() {
|
|
|
try {
|
|
|
Tmap = null;
|
|
@@ -177,7 +211,7 @@
|
|
|
document.head.appendChild(script)
|
|
|
setTimeout(() => {
|
|
|
this.$emit("handleSearch")
|
|
|
- }, 500);
|
|
|
+ }, 1000);
|
|
|
} else {
|
|
|
const {
|
|
|
lng,
|
|
@@ -226,14 +260,14 @@
|
|
|
// Tmap.addEventListener("moveend", (e) => {
|
|
|
// console.log('addEventListener = ' , e)
|
|
|
// });
|
|
|
- this.addMapMoveend()
|
|
|
+ this.addMapEvent()
|
|
|
},
|
|
|
upDataChartsRender(lng, lat) {
|
|
|
if (!Tmap) return
|
|
|
this.setIcon(lng, lat, true)
|
|
|
Tmap.centerAndZoom(new T.LngLat(lng, lat), 15);
|
|
|
},
|
|
|
- setIcon(lng, lat, isClear, iconU) {
|
|
|
+ setIcon(lng, lat, isClear, iconU, info) {
|
|
|
if (isClear) {
|
|
|
this.clearIcon()
|
|
|
}
|
|
@@ -245,31 +279,58 @@
|
|
|
const marker = new T.Marker(new T.LngLat(lng, lat), {
|
|
|
icon
|
|
|
});
|
|
|
+ // 点位注册点击事件
|
|
|
+ marker.addEventListener("click", this.clickMapSite);
|
|
|
+ // 缓存注册点击事件的点位
|
|
|
+ this.markerList.push(marker)
|
|
|
Tmap.addOverLay(marker);
|
|
|
+ if (info) {
|
|
|
+ try {
|
|
|
+ var label = new T.Label({
|
|
|
+ text: `<b>${info.locationName}<b>`,
|
|
|
+ position: marker.getLngLat(),
|
|
|
+ offset: new T.Point(-50, 15)
|
|
|
+ });
|
|
|
+ Tmap.addOverLay(label);
|
|
|
+ label.setLngLat(marker.getLngLat());
|
|
|
+ label.setBorderLine(0);
|
|
|
+ // label.setBackgroundColor ('transparent');
|
|
|
+ label.setFontSize(10);
|
|
|
+ this.labelLsit.push(label)
|
|
|
+ // 判断当前是否显示
|
|
|
+ this.labelShowOrHide(label)
|
|
|
+ } catch (error) {
|
|
|
+ //TODO handle the exception
|
|
|
+ console.log("info = error ", error)
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
+ // 移除点位,并注销点位绑定的点击事件
|
|
|
clearIcon() {
|
|
|
- Tmap.clearOverLays()
|
|
|
+ try {
|
|
|
+ (this.markerList || []).forEach(el => {
|
|
|
+ el.removeEventListener("click", this.clickMapSite);
|
|
|
+ });
|
|
|
+ this.markerList = [];
|
|
|
+ this.labelLsit = [];
|
|
|
+ Tmap.clearOverLays();
|
|
|
+ } catch (error) {
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
},
|
|
|
getLocation() {
|
|
|
var lo = new T.Geolocation();
|
|
|
- console.log('获取定位', lo)
|
|
|
- const fn = (e) => {
|
|
|
- console.log('eeeeeeeeeeeeeeeeeeee', e)
|
|
|
- // if (this.getStatus() == 0) {
|
|
|
- // map.centerAndZoom(e.lnglat, 15)
|
|
|
- // alert("获取定位坐标:" + e.lnglat.lat + "," + e.lnglat.lng)
|
|
|
- // var marker = new T.Marker(e.lnglat);
|
|
|
- // map.addOverLay(marker);
|
|
|
+ console.log("天地图获取定位 = ", lo, lo.getStatus())
|
|
|
+ try {
|
|
|
|
|
|
- // }
|
|
|
- // if (this.getStatus() == 1) {
|
|
|
- // map.centerAndZoom(e.lnglat, e.level)
|
|
|
- // alert("获取定位坐标:" + e.lnglat.lat + "," + e.lnglat.lng)
|
|
|
- // var marker = new T.Marker(e.lnglat);
|
|
|
- // map.addOverLay(marker);
|
|
|
- // }
|
|
|
+ lo.getCurrentPosition((res) => {
|
|
|
+ console.log('获取定位', res)
|
|
|
+
|
|
|
+ });
|
|
|
+ } catch (error) {
|
|
|
+ //TODO handle the exception
|
|
|
+ console.log("天地图获取定位 = error ", error)
|
|
|
}
|
|
|
- lo.getCurrentPosition(fn);
|
|
|
// if (this.getStatus() == 0) {
|
|
|
// map.centerAndZoom(e.lnglat, 15)
|
|
|
// alert("获取定位坐标:" + e.lnglat.lat + "," + e.lnglat.lng)
|
|
@@ -284,8 +345,9 @@
|
|
|
// map.addOverLay(marker);
|
|
|
// }
|
|
|
},
|
|
|
- SelectedDot(lng, lat) {
|
|
|
- Tmap.panTo(new T.LngLat(lng, lat), 16); // 移动到选中的点位
|
|
|
+ SelectedDot(res) {
|
|
|
+ const { longitude, latitude } = res;
|
|
|
+ Tmap.panTo(new T.LngLat(longitude, latitude), 16); // 移动到选中的点位
|
|
|
}
|
|
|
},
|
|
|
}
|
|
@@ -299,7 +361,7 @@
|
|
|
.position {
|
|
|
position: fixed;
|
|
|
right: 30rpx;
|
|
|
- bottom: 50vh;
|
|
|
+ bottom: 40vh;
|
|
|
z-index: 1000;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|