gis地图修改管道的颜色

gassafety-web/src/utils/gaodeMapView.js

@@ -15,6 +15,7 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
 import workerManView from "../components/PopWindowGis/workerManView.vue";
 
 import { getArray } from "@/utils/gassafety.js";
+import { lineColor } from "./mapCommon.js";
 import { delPipe } from "@/api/device/pipe.js";
 import vue from "../main";
 import { Card } from "element-ui";
@@ -32,6 +33,7 @@ export const DEVICE_TYPE = {
   SMALLINSPECTOR: "workPoint",
   TROUBLE: "trouble"
 };
+
 class gaodeMap {
   // 所有线的数组
   polyLines = [];
@@ -112,6 +114,8 @@ class gaodeMap {
     this.myMap.on("zoomstart", () => {
       // console.log("缩放开始")
       this.closeInfoWindow();
+      this.polyLinesColorClear()
+
     });
     this.myMap.on("moveend", () => {
       if (this.handleInfoWindowOpenFunc) {
@@ -284,7 +288,7 @@ class gaodeMap {
       marker.on("mouseover", this.wokerManOpen);
       marker.on("mouseout", e => {
         e.target.infoWindow.close();
-        this.domAllShow()
+        this.domAllShow();
       });
 
       marker.on("mousedown", e => {
@@ -805,14 +809,15 @@ class gaodeMap {
     //console.log("包装的数组", arr);
     for (let i = 0; i < arr.length; i++) {
       const item = arr[i];
-      let { coordinates } = item;
+      let { coordinates, pipePressure } = item;
+      console.log(pipePressure);
       // //console.log("coordinates",coordinates)
       // let path = coordinates ? getArray(coordinates) :[];
       // 字符串转二维数组
       let path = coordinates ? eval(coordinates) : [];
       let polyline = new AMap.Polyline({
         path,
-        strokeColor: "#2EE7E7",
+        strokeColor: lineColor[pipePressure],
         strokeWeight: 4,
         strokeOpacity: 0.9,
         zIndex: 50,
@@ -834,6 +839,8 @@ class gaodeMap {
       //添加事件
       polyline.on("mousedown", this.polylineMouseOver);
       polyline.on("mouseover", () => {
+        // lineColor
+
         polyline.setOptions({ strokeColor: "#F7FE38" });
       });
       polyline.on("mouseout", e => {
@@ -841,7 +848,7 @@ class gaodeMap {
         if (polyline.getExtData().lineData.alarmState == 1) {
           polyline.setOptions({ strokeColor: "#ff0000" });
         } else {
-          polyline.setOptions({ strokeColor: "#2EE7E7" });
+          polyline.setOptions({ strokeColor: lineColor[pipePressure] });
         }
         // infoWindow.close();
       });
@@ -935,7 +942,8 @@ class gaodeMap {
         if (item.getExtData().lineData.alarmState == 1) {
           item.setOptions({ strokeColor: "#ff0000" });
         } else {
-          item.setOptions({ strokeColor: "#2EE7E7" });
+          const { pipePressure } = item.getExtData().lineData;
+          item.setOptions({ strokeColor: lineColor[pipePressure] });
         }
       }
     });

gassafety-web/src/utils/mapCommon.js

+// 管道压力（1低压，2中压，3次高压，4高压）  颜色不同
+
+ export const lineColor ={
+  "1":"#2EE7E7",
+  "2":"#FFFFFF",
+  "3":"#18FF0F",
+  "4":"#DE67FA"
+}
\ No newline at end of file

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

@@ -103,6 +103,14 @@
         <div :class="{ active: !mapStyle }" @click="mapChange(1)">卫星地图</div>
         <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
       </div>
+      <!-- 管道压力 -->
+      <div class="pipePressure">
+        <!-- <div>管道压力</div> -->
+        <div class="hasColorBox" :style="{color:lineColor[`1`]}">低压</div>
+        <div class="hasColorBox" :style="{color:lineColor[`2`]}">中压</div>
+        <div class="hasColorBox" :style="{color:lineColor[`3`]}">次高</div>
+        <div class="hasColorBox" :style="{color:lineColor[`4`]}">高压</div>
+      </div>
       <div class="switch" @click="backFlag = !backFlag">
         <img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
         <img v-else src="@/assets/images/r.png" alt="" />
@@ -295,6 +303,7 @@ import Right from "./components/Right.vue";
 import CreateWork from "./components/CreateWork.vue";
 import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
 import { getInspectorLocations } from "@/api/inspectorLocation/location";
+import { lineColor } from "@/utils/mapCommon.js";
 
 export default {
   components: {
@@ -305,6 +314,7 @@ export default {
   },
   data() {
     return {
+      lineColor,
       gaoMap: null,
       deviceType: false,
       value: "",
@@ -1687,6 +1697,20 @@ input[type="radio"] {
       }
     }
   }
+  .pipePressure {
+    position: absolute;
+    color: #fff;
+    right: -52px;
+    top: 50px;
+    padding:1px;
+    // background: rgba(6, 29, 51, 0.8);
+    .hasColorBox{
+      border:1px solid #053b6a;
+      padding:2px 5px;
+      margin-bottom:5px;
+    }
+
+  }
   .scroll {
     // height: 100%;
     position: relative;