From a990224694af89499210303709d83004c7547dc4 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Wed, 9 Aug 2023 14:41:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=82=B9=E4=BD=8D=E5=90=8D?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/offLineMap/index.vue | 527 ++++++++++++++--------------
 src/views/factorResources/map.vue   |   2 +-
 src/views/realtimeWarning/map.vue   |   2 +-
 3 files changed, 274 insertions(+), 257 deletions(-)

diff --git a/src/components/offLineMap/index.vue b/src/components/offLineMap/index.vue
index 434f450..a7d541b 100644
--- a/src/components/offLineMap/index.vue
+++ b/src/components/offLineMap/index.vue
@@ -1,202 +1,222 @@
 <template>
-    <div>
-        <div class="bmap" id="container" ref="container"></div>
-        <el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button>
-    </div>
+  <div>
+    <div class="bmap" id="container" ref="container"></div>
+    <el-button class="fanhui" @click="goBack" v-if="isGoBack">返回</el-button>
+  </div>
 </template>
 
 <script>
-import MapLine from "../../../public/zhenhaiLine.json"
-import MapPoint from "../../../public/zhenhaiPoint.json"
-import styleJson from "../../../public/custom_map_config.json"
-import { topMap, topMapOne } from '@/api/offLineMap'
+import MapLine from "../../../public/zhenhaiLine.json";
+import MapPoint from "../../../public/zhenhaiPoint.json";
+import styleJson from "../../../public/custom_map_config.json";
+import { topMap, topMapOne } from "@/api/offLineMap";
 export default {
-    name: 'zhenhaimap',
-    data() {
-        return {
-            dongtaiPoint: [121.604192, 29.971189],
-            isGoBack: false,
-            villageList: [],
-            villageSumList: [],
-            flag: true,
-            companyList: [],
-            label1: {}
-        }
-    },
-    mounted() {
-        topMap({ scoreType: 'season' }).then(res => {
-            this.companyList = res.data
-            this.initMap()
-        })
+  name: "zhenhaimap",
+  data() {
+    return {
+      dongtaiPoint: [121.604192, 29.971189],
+      isGoBack: false,
+      villageList: [],
+      villageSumList: [],
+      flag: true,
+      companyList: [],
+      label1: {},
+    };
+  },
+  mounted() {
+    topMap({ scoreType: "season" }).then((res) => {
+      this.companyList = res.data;
+      this.initMap();
+    });
+  },
+  methods: {
+    goBack() {
+      this.initMap();
+      this.isGoBack = false;
+      this.$emit("goBack");
     },
-    methods: {
-        goBack() {
-            this.initMap()
-            this.isGoBack = false
-            this.$emit('goBack')
+    initMap() {
+      var BMap = window.BMap;
+      // console.log(BMap, 'BMap');
+      var map = new BMap.Map("container", {
+        style: {
+          styleJson,
         },
-        initMap() {
-            var BMap = window.BMap
-            // console.log(BMap, 'BMap');
-            var map = new BMap.Map('container', {
-                style: {
-                    styleJson
-                }
-            });
-            let that = this
-            map.centerAndZoom(new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]), 12);
-            map.setMinZoom(12)
-            map.setMaxZoom(19)
-            map.enableScrollWheelZoom(true);
-            // hjrequest({
-            //     url: '/yc/dt/statistical/village',
-            //     method: 'get',
-            //     params: { areaCode: that.areaCode }
-            // }).then((res) => {
-            //     that.villageSumList = res.data
-            // })
-            // console.log(MapLine, 'MapLine');
-            for (var i = 0, n = MapLine.features.length; i < n; i++) {
-                showBoundaryEx(MapLine.features[i]);
+      });
+      let that = this;
+      map.centerAndZoom(
+        new BMap.Point(this.dongtaiPoint[0], this.dongtaiPoint[1]),
+        12
+      );
+      map.setMinZoom(12);
+      map.setMaxZoom(19);
+      map.enableScrollWheelZoom(true);
+      // hjrequest({
+      //     url: '/yc/dt/statistical/village',
+      //     method: 'get',
+      //     params: { areaCode: that.areaCode }
+      // }).then((res) => {
+      //     that.villageSumList = res.data
+      // })
+      // console.log(MapLine, 'MapLine');
+      for (var i = 0, n = MapLine.features.length; i < n; i++) {
+        showBoundaryEx(MapLine.features[i]);
+      }
+      var label = new BMap.Label();
+      showPoint();
+      function showBoundaryEx(city) {
+        var paths = [];
+        var list = city.geometry.coordinates;
+        // console.log(list.length, 'list[0].length')
+        //console.log(list[1], 'list[1].length')
+        var polygon = {};
+        if (list.length > 1) {
+          for (let a = 0; a < list.length; a++) {
+            paths = [];
+            for (let i = 0; i < list[a][0].length; i++) {
+              let lat = list[a][0][i][1],
+                lng = list[a][0][i][0];
+              paths.push(new BMap.Point(lng, lat));
             }
-            var label = new BMap.Label();
-            showPoint()
-            function showBoundaryEx(city) {
-                var paths = []
-                var list = city.geometry.coordinates
-                // console.log(list.length, 'list[0].length')
-                //console.log(list[1], 'list[1].length')
-                var polygon = {}
-                if (list.length > 1) {
-                    for (let a = 0; a < list.length; a++) {
-                        paths = []
-                        for (let i = 0; i < list[a][0].length; i++) {
-                            let lat = list[a][0][i][1],
-                                lng = list[a][0][i][0];
-                            paths.push(new BMap.Point(lng, lat));
-                        }
-                        polygon = new BMap.Polygon(paths, {
-                            fillColor: '#3b4c44',
-                            strokeColor: "#0f1423",
-                            fillOpacity: 0.6,
-                            strokeWeight: 1
-                        }); //创建多边形
-                        map.addOverlay(polygon); //增加多边形
-                    }
-                    // // console.log(list, 'length');
-                } else {
-                    // console.log(list[0], ' list[0]');
-                    for (let i = 0; i < list[0].length; i++) {
-                        let lat = list[0][i][1],
-                            lng = list[0][i][0];
-                        paths.push(new BMap.Point(lng, lat));
-                    }
-                    // console.log(list, 'length');
-                    polygon = new BMap.Polygon(paths, {
-                        fillColor: '#3b4c44',
-                        strokeColor: "#0f1423",
-                        fillOpacity: 0.6,
-                        strokeWeight: 1
-                    }); //创建多边形
-                    map.addOverlay(polygon); //增加多边形
-                }
-                polygon.infowindow = new BMap.InfoWindow();
-                polygon.infowindow.name = city.properties.name;
-                polygon.addEventListener("mouseover", function () {
-                    polygon.setFillColor("#ffa500");
-                });
-                polygon.addEventListener("mouseout", function () {
-                    map.removeOverlay(label);
-                    polygon.setFillColor('#3b4c44');
-                });
-
-
-                //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
-                polygon.addEventListener("click", function () {
-                    console.log(city.properties.name, 'city.properties.name');
-                    if (city.properties.name == '骆驼街道') {
-                        map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '招宝山街道') {
-                        map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '蛟川街道') {
-                        map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '庄市街道') {
-                        map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '贵驷街道') {
-                        map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '澥浦镇') {
-                        map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
-                        that.isGoBack = true
-                    } else if (city.properties.name == '九龙湖镇') {
-                        map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
-                        that.isGoBack = true
-                    }
-                    // let streetCode = that.streetCodeList.filter((item) => {
-                    //     if (item.areaName == city.properties.name) {
-                    //         return item.areaCode
-                    //     }
-                    // });
-                    //   let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
-                    // that.$emit('goStreet', streetCode[0].areaCode)
-                    // hjrequest({
-                    //     url: '/yc/dt/statistical/villages',
-                    //     method: 'get',
-                    //     params: goStreetData
-                    // }).then((res) => {
-                    //     that.villageList = res.data
-                    // that.villageList.forEach((item) => {
-                    //     var point = new BMap.Point(item.longitude, item.latitude);
-                    //     var marker = new BMap.Marker(point);        // 创建标注   
-                    //     map.addOverlay(marker);
-                    //     var content = item.villageName;
-                    //     var label = new BMap.Label(content, {       // 创建文本标注
-                    //         position: point,                          // 设置标注的地理位置
-                    //         offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
-                    //     })
-                    //     label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
-                    //     map.addOverlay(label);
-                    //     marker.addEventListener("click", function () {
-                    //        // Cookies.set('village_current', item.villageCode)
-                    //         window.open(window.location.origin + '/#/communityShow', '_blank');
-                    //     });
-                    // })
-                    // })
+            polygon = new BMap.Polygon(paths, {
+              fillColor: "#3b4c44",
+              strokeColor: "#0f1423",
+              fillOpacity: 0.6,
+              strokeWeight: 1,
+            }); //创建多边形
+            map.addOverlay(polygon); //增加多边形
+          }
+          // // console.log(list, 'length');
+        } else {
+          // console.log(list[0], ' list[0]');
+          for (let i = 0; i < list[0].length; i++) {
+            let lat = list[0][i][1],
+              lng = list[0][i][0];
+            paths.push(new BMap.Point(lng, lat));
+          }
+          // console.log(list, 'length');
+          polygon = new BMap.Polygon(paths, {
+            fillColor: "#3b4c44",
+            strokeColor: "#0f1423",
+            fillOpacity: 0.6,
+            strokeWeight: 1,
+          }); //创建多边形
+          map.addOverlay(polygon); //增加多边形
+        }
+        polygon.infowindow = new BMap.InfoWindow();
+        polygon.infowindow.name = city.properties.name;
+        polygon.addEventListener("mouseover", function () {
+          polygon.setFillColor("#ffa500");
+        });
+        polygon.addEventListener("mouseout", function () {
+          map.removeOverlay(label);
+          polygon.setFillColor("#3b4c44");
+        });
+        //开始用"mouseover","mouseout"发现,鼠标移动过快,会多个省份也高亮了.所以改成 click了
+        polygon.addEventListener("click", function () {
+          console.log(city.properties.name, "city.properties.name");
+          if (city.properties.name == "骆驼街道") {
+            map.centerAndZoom(new BMap.Point(121.58887, 29.986122), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "招宝山街道") {
+            map.centerAndZoom(new BMap.Point(121.713707, 29.95656), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "蛟川街道") {
+            map.centerAndZoom(new BMap.Point(121.686105, 29.947339), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "庄市街道") {
+            map.centerAndZoom(new BMap.Point(121.627037, 29.925579), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "贵驷街道") {
+            map.centerAndZoom(new BMap.Point(121.624142, 29.985606), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "澥浦镇") {
+            map.centerAndZoom(new BMap.Point(121.607133, 30.037162), 15);
+            that.isGoBack = true;
+          } else if (city.properties.name == "九龙湖镇") {
+            map.centerAndZoom(new BMap.Point(121.558532, 30.039457), 15);
+            that.isGoBack = true;
+          }
+          // let streetCode = that.streetCodeList.filter((item) => {
+          //     if (item.areaName == city.properties.name) {
+          //         return item.areaCode
+          //     }
+          // });
+          //   let goStreetData = { areaCode: that.areaCode, streetCode: streetCode[0].areaCode }
+          // that.$emit('goStreet', streetCode[0].areaCode)
+          // hjrequest({
+          //     url: '/yc/dt/statistical/villages',
+          //     method: 'get',
+          //     params: goStreetData
+          // }).then((res) => {
+          //     that.villageList = res.data
+          // that.villageList.forEach((item) => {
+          //     var point = new BMap.Point(item.longitude, item.latitude);
+          //     var marker = new BMap.Marker(point);        // 创建标注
+          //     map.addOverlay(marker);
+          //     var content = item.villageName;
+          //     var label = new BMap.Label(content, {       // 创建文本标注
+          //         position: point,                          // 设置标注的地理位置
+          //         offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
+          //     })
+          //     label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: 'yellow', fontSize: '20px' })
+          //     map.addOverlay(label);
+          //     marker.addEventListener("click", function () {
+          //        // Cookies.set('village_current', item.villageCode)
+          //         window.open(window.location.origin + '/#/communityShow', '_blank');
+          //     });
+          // })
+          // })
 
-                    that.companyList.forEach((item) => {
-                        var point = new BMap.Point(item.longitude, item.latitude);
-                        console.log(point, 'point123');
-                        var marker = new BMap.Marker(point);        // 创建标注   
-                        map.addOverlay(marker);
-                        var content = item.companyName;
-                        var label = new BMap.Label(content, {       // 创建文本标注
-                            position: point,                          // 设置标注的地理位置
-                            offset: new BMap.Size(-10, -50)           // 设置标注的偏移量
-                        })
-                        label.setStyle({ backgroundColor: ' rgba(0, 0, 0, 0)', border: '0', color: '#0060ce', fontSize: '16px' })
-                        map.addOverlay(label);
-                        label.addEventListener("click", function () {
-                            map.removeOverlay(that.label1);
-                            topMapOne({ companyId: item.companyId, companyName: item.companyName }).then(res => {
-                                that.label1 = new BMap.Label();
-                                that.label1.setStyle({
-                                    color: 'blue',
-                                    borderRadius: '5px',
-                                    borderColor: '#ccc',
-                                    padding: '10px',
-                                    fontSize: '16px',
-                                    fontFamily: '微软雅黑',
-                                    transform: 'translateX(-50%) translateY(calc(-100% - 10px))'
-                                });
+          that.companyList.forEach((item) => {
+            var point = new BMap.Point(item.longitude, item.latitude);
+            console.log(point, "point123");
+            var marker = new BMap.Marker(point); // 创建标注
+            map.addOverlay(marker);
+            var content = item.companyName;
+            var label = new BMap.Label(content, {
+              // 创建文本标注
+              position: point, // 设置标注的地理位置
+              offset: new BMap.Size(-10, -50), // 设置标注的偏移量
+            });
+            label.setStyle({
+              backgroundColor: " rgba(0, 0, 0, 0)",
+              border: "0",
+              color: "rgba(0, 0, 0, 0)",
+              fontSize: "16px",
+            });
+            map.addOverlay(label);
+            label.addEventListener("click", function () {
+              map.removeOverlay(that.label1);
+              topMapOne({
+                companyId: item.companyId,
+                companyName: item.companyName,
+              }).then((res) => {
+                that.label1 = new BMap.Label();
+                that.label1.setStyle({
+                  color: "blue",
+                  borderRadius: "5px",
+                  borderColor: "#ccc",
+                  padding: "10px",
+                  fontSize: "16px",
+                  fontFamily: "微软雅黑",
+                  transform: "translateX(-50%) translateY(calc(-100% - 10px))",
+                });
 
-                                that.label1.setPosition(new BMap.Point(item.longitude, item.latitude));
-                                that.label1.setOffset(new BMap.Size(130, -10))
-                                that.label1.setStyle({ width: '372px', height: '242px', background: 'url(pbImg/bz49.png) no-repeat', backgroundSize: '100% 100%', border: '0', color: '#fff', padding: '13px 20px' })
-                                that.label1.setContent(`
+                that.label1.setPosition(
+                  new BMap.Point(item.longitude, item.latitude)
+                );
+                that.label1.setOffset(new BMap.Size(130, -10));
+                that.label1.setStyle({
+                  width: "372px",
+                  height: "242px",
+                  background: "url(pbImg/bz49.png) no-repeat",
+                  backgroundSize: "100% 100%",
+                  border: "0",
+                  color: "#fff",
+                  padding: "13px 20px",
+                });
+                that.label1.setContent(`
                                 <div style='width:100%;display:flex;justify-content: space-between;align-items: center;border-bottom:1px solid #657E83;'> <h4 style='margin:12px;font-size: 14px;color: #EBFFF4;letter-spacing: 1px;line-height: 24px;text-shadow: 0 0 9px rgba(21,255,195,0.77);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;'>${res.data.companyName}</h4><div class='closeBtn' style='font-size: 14px;color: #30C4FF;letter-spacing: 1px;font-weight: 400;'>企业看板<i style='display:inline-block; background: url(pbImg/跳转.png)  no-repeat;width:16px;height:14px;background-size: 100% 100%;"'></i></div><div class='closeBtn1' style='background: url(pbImg/关闭.png)  no-repeat;width:20px;height:20px;background-size: 100% 100%;position:relative;z-index:200000000;
                                 margin-top:-15px;"'></div></div>
                                 <div style='height:70px;width:100%;margin-top:15px;background: url(pbImg/编组.png);display:flex;justify-content: space-around;align-items: center;'>
@@ -244,78 +264,75 @@ export default {
                                     </div>
                                 </div>
                               `);
-                                map.addOverlay(that.label1);
-                                let closebtn = document.querySelector('.closeBtn')
-                                let closeBtn1 = document.querySelector('.closeBtn1')
-                                closeBtn1.addEventListener('click', () => {
-
-                                    map.removeOverlay(that.label1);
-                                })
-                                //console.log(btn, 'btn');
-                                closebtn.addEventListener('click', () => {
-                                    that.$emit('toArchives', item)
-                                    map.removeOverlay(that.label1);
-                                })
-                            })
-                        });
-                    })
-                    polygon.removeEventListener('mousemove')
+                map.addOverlay(that.label1);
+                let closebtn = document.querySelector(".closeBtn");
+                let closeBtn1 = document.querySelector(".closeBtn1");
+                closeBtn1.addEventListener("click", () => {
+                  map.removeOverlay(that.label1);
                 });
-
-            }
-            function showPoint() {
-                console.log(MapPoint, 'MapPoint');
-
-                for (let i = 0; i < MapPoint.features.length; i++) {
-                    var opts = {
-                        position: new BMap.Point(MapPoint.features[i].geometry.coordinates[0], MapPoint.features[i].geometry.coordinates[1]), // 指定文本标注所在的地理位置
-                        offset: new BMap.Size(-30, -30) // 设置文本偏移量
-                    };
-
-                    // 创建文本标注对象
-                    var label1 = new BMap.Label(MapPoint.features[i].properties.name, opts);
-                    // 自定义文本标注样式
-                    label1.setStyle({
-                        color: 'orange',
-                        borderRadius: '5px',
-                        borderColor: '#ccc',
-                        padding: '10px',
-                        fontSize: '16px',
-                        height: '20px',
-                        lineHeight: '20px',
-                        backgroundColor: 'rgba(0,0,0,0)',
-                        border: '0',
-                        fontFamily: '微软雅黑'
-                    });
-                    map.addOverlay(label1);
-                }
-            }
-
-        },
-    }
-}
+                //console.log(btn, 'btn');
+                closebtn.addEventListener("click", () => {
+                  that.$emit("toArchives", item);
+                  map.removeOverlay(that.label1);
+                });
+              });
+            });
+          });
+          polygon.removeEventListener("mousemove");
+        });
+      }
+      function showPoint() {
+        console.log(MapPoint, "MapPoint");
+        for (let i = 0; i < MapPoint.features.length; i++) {
+          var opts = {
+            position: new BMap.Point(
+              MapPoint.features[i].geometry.coordinates[0],
+              MapPoint.features[i].geometry.coordinates[1]
+            ), // 指定文本标注所在的地理位置
+            offset: new BMap.Size(-30, -30), // 设置文本偏移量
+          };
+          // 创建文本标注对象
+          var label1 = new BMap.Label(
+            MapPoint.features[i].properties.name,
+            opts
+          );
+          // 自定义文本标注样式
+          label1.setStyle({
+            color: "orange",
+            borderRadius: "5px",
+            borderColor: "#ccc",
+            padding: "10px",
+            fontSize: "16px",
+            height: "20px",
+            lineHeight: "20px",
+            backgroundColor: "rgba(0,0,0,0)",
+            border: "0",
+            fontFamily: "微软雅黑",
+          });
+          map.addOverlay(label1);
+        }
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
 .bmap {
-    width: 100%;
-    height: 100%;
-    border: 1px solid #000000;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #000000;
 }
-
-
-
 .fanhui {
-    display: inline-block;
-    width: 50px;
-    height: 20px;
-    position: absolute;
-    left: 49%;
-    bottom: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 50;
-
+  display: inline-block;
+  width: 50px;
+  height: 20px;
+  position: absolute;
+  left: 49%;
+  bottom: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/factorResources/map.vue b/src/views/factorResources/map.vue
index 305ff8d..9b4929a 100644
--- a/src/views/factorResources/map.vue
+++ b/src/views/factorResources/map.vue
@@ -165,7 +165,7 @@ export default {
             label.setStyle({
               backgroundColor: " rgba(0, 0, 0, 0)",
               border: "0",
-              color: "#0060ce",
+              color: "rgba(0, 0, 0, 0)",
               fontSize: "16px",
             });
             map.addOverlay(label);
diff --git a/src/views/realtimeWarning/map.vue b/src/views/realtimeWarning/map.vue
index 523547e..40d2711 100644
--- a/src/views/realtimeWarning/map.vue
+++ b/src/views/realtimeWarning/map.vue
@@ -149,7 +149,7 @@ export default {
             label.setStyle({
               backgroundColor: " rgba(0, 0, 0, 0)",
               border: "0",
-              color: "#0060ce",
+              color: "rgba(0, 0, 0, 0)",
               fontSize: "16px",
             });
             map.addOverlay(label);