diff --git a/src/views/gridman/forestranger/index.vue b/src/views/gridman/forestranger/index.vue index c3ca511..e733851 100644 --- a/src/views/gridman/forestranger/index.vue +++ b/src/views/gridman/forestranger/index.vue @@ -1,622 +1,715 @@ \ No newline at end of file + diff --git a/src/views/gridman/forestranger/widget/ditu.vue b/src/views/gridman/forestranger/widget/ditu.vue index 5a89eed..ef53fff 100644 --- a/src/views/gridman/forestranger/widget/ditu.vue +++ b/src/views/gridman/forestranger/widget/ditu.vue @@ -14,13 +14,13 @@ export default { return { map: null, clockInList: [], - markerArr:[] + markerArr: [], }; }, watch: { rowkey: function (e) { - console.log('123',e) - this.getClockInList() + console.log("123", e); + this.getClockInList(); }, lnglat: function (e) {}, flyCenter: function (e) { @@ -45,13 +45,13 @@ export default { getMethodCommon("/FireGrid/GetTotalCheckPoint").then((res) => { this.clockInList = res.result; for (var i = this.markerArr.length - 1; i >= 0; i--) { - this.markerArr[i].remove(); + this.markerArr[i].remove(); } this.addPointLayer(); }); }, addPointLayer() { - let _this = this + let _this = this; this.clockInList.forEach((item) => { console.log("iii", item); let el = document.createElement("img"); //这里可以是任意标签 @@ -59,15 +59,19 @@ export default { el.src = "/img/dakadian.png"; //图片路径赋值 el.style.width = "40px"; // el.onclick = function(){ - + // console.log('123item',item) // _this.$emit("editClock",item) // } - + console.log(item) + const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`${item.pointname }
${item.usernames}`); // 添加自定义标记点 - let marker = new mapboxgl.Marker(el).setLngLat([item.lng, item.lat]).addTo(this.map); - this.markerArr.push(marker) - + let marker = new mapboxgl.Marker(el) + .setLngLat([item.lng, item.lat]) + .setPopup(popup) + .addTo(this.map); + marker + this.markerArr.push(marker); }); }, initMap(url, jwd) { @@ -85,14 +89,17 @@ export default { this.loadMengban(); this.loadZhenJieLayer(); this.loadXianJieLayer(); - + this.getClockInList(); }); this.map.on("click", (e) => { this.$emit("getLocation", e); }); + this.map.on("contextmenu", (e) => { + this.$emit("rightClick", e); + }); }, - + loadMengban() { this.map.addLayer({ //蒙版图层 //通过边界数据反选 达到挖洞效果