gis地图功能优化

gassafety-web/src/components/PopWindowGis/workerManInfowindow.vue

 <template>
   <div class="wrapper">
-    <span class="left">姓名: {{ data.userName }}</span>
-    <span class="right">时间: {{ data.createTime }}</span>
+    <div class="content">
+      <span class="left">姓名: {{ data.userName }}</span>
+      <span class="right">时间: {{ data.createTime }}</span>
+    </div>
+
+    <div class=""></div>
   </div>
 </template>
 
@@ -29,14 +33,26 @@ export default {
   padding: 7px 7px 7px 8px;
   box-shadow: 0 0 20px -5px #0d4f88;
   border-radius: 4px;
-  span {
-    word-break: break-all;
-    display: block;
-    // vertical-align: top;
-    // &.right {
-    //   width: 90px;
-    //   padding-left: 4px;
-    // }
+  position: relative;
+  &:before {
+    content: "";
+    position: absolute;
+    left: -10px;
+    top: 5px;
+    width: 0px;
+    height: 0px;
+    /* border: 20px solid red; */
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent;
+    /* border-left: 50px solid greenyellow; */
+    border-right: 30px solid #0d4f88;
+    z-index: -1;
+  }
+  .content {
+    span {
+      word-break: break-all;
+      display: block;
+    }
   }
 }
 </style>
\ No newline at end of file

gassafety-web/src/utils/gaodeMapView.js

@@ -75,10 +75,10 @@ class gaodeMap {
     });
     this.myMap = map;
 
-    this.myMap.on("click", e => {
+    this.myMap.on("mousedown", e => {
       // if (this.lineType !=1 || this.lineFlag) return;
       this.closeInfoWindow();
-      this.view.bottomDataShow=true;
+      this.view.bottomDataShow = true;
 
       if (this.lineType != 1 || this.lineFlag) return;
 
@@ -100,8 +100,7 @@ class gaodeMap {
 
       // //console.log("抬起来了");
     });
-    this.myMap.on("mousedown", (e) => {
-      console.log(e)
+    this.myMap.on("mousedown", e => {
       // this.closeInfoWindow();
     });
     // 地图开始平移删除infowindow
@@ -265,7 +264,11 @@ class gaodeMap {
       marker.markerType = markerType;
       marker.data = data;
       marker.infoWindow = infoWindow;
-      marker.on("mousedown", this.wokerManOpen);
+      marker.on("mouseover", this.wokerManOpen);
+      marker.on("mouseout", e => {
+        e.target.infoWindow.close();
+      });
+
       marker.on("mousedown", e => {
         // console.log(data);
         that.closeInfoWindow();
@@ -387,8 +390,10 @@ class gaodeMap {
     this.markerType = e.target.markerType;
     e.target.content = this.getMarketContent(e.target.data);
     e.target.infoWindow.setContent(e.target.content);
-    e.target.infoWindow.open(map, e.target.getPosition());
-    console.log("e.target.getPosition()", e.target.getExtData());
+    e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
+    e.target.infoWindow.open(map, e.target.getExtData().pos);
+    console.log("e.target.getPosition()", e.target.getExtData().pos);
+    console.log("offset", e.target.infoWindow.getOffset());
     this.boxCollision(e.target.infoWindow.dom);
     // that.addCloneDome(e.target, infoWindow);
     // infoWindow.close();
@@ -706,12 +711,14 @@ class gaodeMap {
       marker.passedPolyline = new AMap.Polyline({
         map: map,
         strokeColor: "#AF5", //线颜色
+        cursor:"pointer",
         strokeWeight: 6 //线宽
+        
       });
 
       // removeLineInfoWindow
 
-      marker.passedPolyline.on("mouseover", e => {
+      marker.passedPolyline.on("mousedown", e => {
         const dom = createPop(removeLineInfoWindow, {
           map: this,
           marker
@@ -724,13 +731,13 @@ class gaodeMap {
           // offset: new AMap.Pixel(20, 20),
           anchor: "left-top"
         });
+        marker.infoWindow.setOffset(new AMap.Pixel(10,-20));
         marker.infoWindow.open(map, e.lnglat);
         // infoWindow.on("mousedown",(e)=>{
         //   e.stopPropagation();
 
         // })
         this.markerPassedPolylineInfoWindow = marker.infoWindow;
-        console.log(e.lnglat);
       });
 
       marker.moveMarker.on("moving", function(e) {
@@ -785,7 +792,6 @@ class gaodeMap {
       // //console.log("coordinates",coordinates)
       // let path = coordinates ? getArray(coordinates) :[];
       // 字符串转二维数组
-
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
@@ -793,8 +799,9 @@ class gaodeMap {
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
-        bubble: true,
+        bubble: false,
         geodesic: true,
+        cursor: "pointer",
         extData: {
           type: "line",
           //当前line状态 0:正常状态 1:正在编辑状态
@@ -809,11 +816,16 @@ class gaodeMap {
       this.newLineAddEvent(polyline);
       //添加事件
       polyline.on("mousedown", this.polylineMouseOver);
-
+      polyline.on("mouseover", () => {
+        polyline.setOptions({ strokeColor: "#F7FE38" });
+      });
       polyline.on("mouseout", e => {
         // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
-        if (polyline.getExtData().lineData.alarmState == 1) return;
-        polyline.setOptions({ strokeColor: "#2EE7E7" });
+        if (polyline.getExtData().lineData.alarmState == 1) {
+          polyline.setOptions({ strokeColor: "#ff0000" });
+        } else {
+          polyline.setOptions({ strokeColor: "#2EE7E7" });
+        }
         // infoWindow.close();
       });
       // 计算info的位置
@@ -837,8 +849,8 @@ class gaodeMap {
     } else {
       infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
     }
+
     infoWindow.open(map, e.lnglat);
-    console.log(infoWindow);
     // 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
     console.log("e.originEvent", e.originEvent);
     if (e.originEvent && 0) {

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

@@ -162,7 +162,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown.stop="panToo(iten, item)"
+                        @click="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.code" class="code">
@@ -187,7 +187,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown.stop="panToo(iten, item)"
+                        @click="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.troubleLevel" class="code">
@@ -212,7 +212,7 @@
                         :class="{ topActive: index == 0 }"
                         v-for="(iten, index) in item.list"
                         :key="iten.deviceId + `` + index"
-                        @mousedown="panToo(iten, item)"
+                        @click="panToo(iten, item)"
                       >
                         <div class="no">{{ iten.no + 1 }}</div>
                         <div :title="iten.userName" class="code">
@@ -232,7 +232,7 @@
                         class="btn backPage"
                         type="mini"
                         :disabled="item.nowPage == 1"
-                        @click.stop="pageBack(item, index)"
+                        @click="pageBack(item, index)"
                         icon="el-icon-arrow-left"
                       />
                       <span class="btn-w-num">{{ item.nowPage }}</span>
@@ -240,7 +240,7 @@
                         class="btn goPage"
                         type="mini"
                         :disabled="item.nowPage == item.maxPage"
-                        @click.stop="pageGo(item, index)"
+                        @click="pageGo(item, index)"
                         icon="el-icon-arrow-right"
                       />
                     </div>
@@ -787,20 +787,46 @@ export default {
     panTo(item, bool) {
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
-          this.gaoMap.panTo(item.list[0].path);
+          let path;
+          // 线条
+          if (item.value == 1) {
+            const a =
+              (Number(item.list[0].lnglat[0]) + Number(item.list[0].path[0])) /
+              2;
+            const b =
+              (Number(item.list[0].lnglat[1]) + Number(item.list[0].path[1])) /
+              2;
+            path = [a, b - 0.1];
+          } else {
+            path = [item.list[0].path[0], item.list[0].path[1] - 0.1];
+          }
+          this.gaoMap.panTo(path);
         }
       }
     },
     panToo(iten, item) {
       // 如果没打对勾，就啥也不干
       if (!this.leftBarNum.includes(item.value)) return;
-
       // 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
       this.gaoMap.myMap.setZoom(11);
       if (item.list.length > 0) {
         if (this.leftBarNum.includes(item.value)) {
-          const path =
-            item.value == 1 ? [iten.lnglat[0],iten.lnglat[1]-0.1] : [iten.path[0], iten.path[1] - 0.1];
+          let path;
+          if (item.value == 1) {
+            const a = (Number(iten.lnglat[0]) + Number(iten.path[0])) / 2;
+            const b = (Number(iten.lnglat[1]) + Number(iten.path[1])) / 2;
+            //屏幕移动的位置
+            path = [a, b - 0.1];
+            // 线条infowindow显示中间
+            iten.infoPath = [a.toFixed(6), b.toFixed(6)];
+            console.log(path);
+          } else {
+            path = [iten.path[0], iten.path[1] - 0.1];
+          }
+          // const path =
+          //   item.value == 1
+          //     ? [iten.lnglat[0], iten.lnglat[1] - 0.1]
+          //     : [iten.path[0], iten.path[1] - 0.1];
           this.gaoMap.panTo(path);
         }
       }
@@ -829,10 +855,10 @@ export default {
       console.log("target", target);
       const e = {
         target,
-        lnglat: iten.lnglat,
+        lnglat: iten.infoPath,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.infoPath[0] == lng && iten.infoPath[1] - 0.1 == lat) {
         this.gaoMap.polylineMouseOver(e);
         return;
       }
@@ -852,7 +878,7 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
         this.gaoMap.infoOpen(e);
         return;
       }
@@ -872,7 +898,7 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
         this.gaoMap.troubleOpen(e);
         return;
       }
@@ -893,7 +919,7 @@ export default {
         lnglat: iten.path,
       };
       // 如果是原地不动，就直接执行
-      if (iten.path[0] == lng && iten.path[1] == lat) {
+      if (iten.path[0] == lng && iten.path[1] - 0.1 == lat) {
         this.gaoMap.wokerManOpen(e);
         return;
       }