gis地图优化

gassafety-web/src/utils/gaodeMapView.js

@@ -74,14 +74,12 @@ class gaodeMap {
       // mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae',
     });
     this.myMap = map;
-
     this.myMap.on("mousedown", e => {
+      console.log(e);
       // if (this.lineType !=1 || this.lineFlag) return;
       this.closeInfoWindow();
       this.view.bottomDataShow = true;
-
       if (this.lineType != 1 || this.lineFlag) return;
-
       // 除了这里，还要利用vue页面的window事件辅助，当组件出来的时候，就得利用window事件
       if (this.newLineObj) {
         vue
@@ -92,7 +90,6 @@ class gaodeMap {
             this.newLineObj = null;
             this.lineFlag = false;
             this.createNewLine();
-
             //console.log("map点击事件新建");
           })
           .catch(() => {});
@@ -100,14 +97,12 @@ class gaodeMap {
 
       // //console.log("抬起来了");
     });
-    this.myMap.on("mousedown", e => {
-      // this.closeInfoWindow();
-    });
     // 地图开始平移删除infowindow
     this.myMap.on("movestart", () => {
       // console.log("地图平移");
       // this.closeInfoWindow();
     });
+
     // 地图开始缩放删除infowindow
     this.myMap.on("zoomstart", () => {
       // console.log("缩放开始")
@@ -711,9 +706,8 @@ class gaodeMap {
       marker.passedPolyline = new AMap.Polyline({
         map: map,
         strokeColor: "#AF5", //线颜色
-        cursor:"pointer",
+        cursor: "pointer",
         strokeWeight: 6 //线宽
-        
       });
 
       // removeLineInfoWindow
@@ -731,7 +725,7 @@ class gaodeMap {
           // offset: new AMap.Pixel(20, 20),
           anchor: "left-top"
         });
-        marker.infoWindow.setOffset(new AMap.Pixel(10,-20));
+        marker.infoWindow.setOffset(new AMap.Pixel(10, -20));
         marker.infoWindow.open(map, e.lnglat);
         // infoWindow.on("mousedown",(e)=>{
         //   e.stopPropagation();
@@ -908,6 +902,16 @@ class gaodeMap {
     this.showInfoWindow = infoWindow;
     // const
   };
+  // 所有的线的颜色归位，如果是报警的，就红色，不是就蓝色
+  polyLinesColorClear() {
+    this.polyLines.forEach(item => {
+      if (item.getExtData().lineData.alarmState == 1) {
+        item.setOptions({ strokeColor: "#ff0000" });
+      } else {
+        item.setOptions({ strokeColor: "#2EE7E7" });
+      }
+    });
+  }
 
   lineMouseOver(polyline, lineInfoWindow, item) {
     let dom = createPop(lineInfoWindow, {

gassafety-web/src/views/device/map/index.vue

 <template>
   <div>
-    <div style="width: 100vw; height: 100vh" id="container"></div>
+    <div style="width: 100vw;" id="container"></div>
     <div class="btn-wrapper">
       <div class="myBtn">
         <div

gassafety-web/src/views/enterprise/mapView/index.vue

 <template>
   <div>
-    <div style="width: 100vw; height: 100vh" id="container"></div>
+    <div style="width: 100vw" id="container"></div>
     <div v-show="false" class="btn-wrapper">
       <div class="myBtn">
         <div
@@ -391,8 +391,11 @@ export default {
   },
 
   mounted() {
-    this.initMap();
     this.boxHeight = document.body.clientHeight - 81;
+
+    // this.$nextTick(() => {
+    this.initMap();
+    // });
   },
   watch: {
     changeBtnData: {
@@ -732,7 +735,6 @@ export default {
       }
       // 1,2,3,4,7分别对应数据库type5，1，2，3，4
       // console.log(this.leftBarNum);
-
       if (this.leftBarNum.includes(1)) {
         this.gaoMap.lineShow(true);
         // this.panTo(item);
@@ -808,6 +810,8 @@ export default {
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
       // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
+      // 所有线条颜色还原
+      this.gaoMap.polyLinesColorClear();
       this.gaoMap.myMap.setZoom(11);
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
@@ -817,7 +821,7 @@ export default {
             const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
             //屏幕移动的位置
             path = [a, b - 0.1];
-            // 线条infowindow显示中间
+            // 线条infowindow显示中间,保留六位转换字符串，否则有时候会出现一些问题
             iten.infoPath = [a.toFixed(6), b.toFixed(6)];
             console.log(path);
           } else {
@@ -833,7 +837,6 @@ export default {
       // 当前地图中心点
       const { lat, lng } = this.gaoMap.myMap.getCenter();
       // 管道是这个方法，因为管道比较特殊
-
       if (item.value == 1) {
         this.polylineInfoWindowShow(iten, lat, lng);
       } else if (item.value == 9) {
@@ -857,14 +860,18 @@ export default {
         target,
         lnglat: iten.infoPath,
       };
+      // console.log(target.getOptions());
       // 如果是原地不动，就直接执行
-      if (iten.infoPath[0] == lng && iten.infoPath[1] - 0.1 == lat) {
+      if (iten.infoPath[0] == lng && iten.infoPath[1] == lat + 0.1) {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
         return;
       }
+
       // 因为地图移动的时候infowindow无法显示
       this.gaoMap.handleInfoWindowOpenFunc = () => {
         this.gaoMap.polylineMouseOver(e);
+        target.setOptions({ strokeColor: "#F7FE38" });
       };
     },
     // 这个是其他设备的infowindow
@@ -878,7 +885,7 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
         this.gaoMap.infoOpen(e);
         return;
       }
@@ -898,7 +905,8 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
+        console.log("??????");
         this.gaoMap.troubleOpen(e);
         return;
       }
@@ -919,7 +927,7 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
+      if (iten.path[0] == lng && iten.path[1] == lat + 0.1) {
         this.gaoMap.wokerManOpen(e);
         return;
       }