地图

src/components/LeafletMap/index.vue

@@ -19,6 +19,9 @@ import shequName from "@/assets/data/shequ-name.json";
 // 街道
 import loujiangjiedao from "@/assets/data/loujiangjiedao.json"; //娄东街道
 import loujiangjiedaoMove from "@/assets/data/loujiangjiedao-move.json"; //娄东街道
+
+import xiaoqu from "@/assets/data/小区.json";
+
 export default {
   data() {
     return {
@@ -27,9 +30,13 @@ export default {
       mapLayers: {
         mapLayer1: null,
         mapLayer2: null,
+        mapLayer3: null,
+        mapLayer4: null,
         mapLayer5: null,
       },
       globalMap: null,
+      markerXiaoqu: null,
+      markerShequ: null,
     };
   },
   mounted() {
@@ -60,6 +67,16 @@ export default {
       this.globalMap.getPane("mapLayer2").style.zIndex = 504;
       this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
 
+      // 小区面
+      this.globalMap.createPane("mapLayer3", rotatePane);
+      this.globalMap.getPane("mapLayer3").style.zIndex = 505;
+      this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";
+
+      // 小区名字
+      this.globalMap.createPane("mapLayer4", noRotatePane);
+      this.globalMap.getPane("mapLayer4").style.zIndex = 703;
+      this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";
+
       // 社区名字
       this.globalMap.createPane("mapLayer5", noRotatePane);
       this.globalMap.getPane("mapLayer5").style.zIndex = 702;
@@ -67,12 +84,24 @@ export default {
 
       this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
       this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
+      this.mapLayers.mapLayer3 = L.featureGroup();
+      this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
       this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
 
       // 渲染街道
       this.addStreet();
-
+      //社区
       this.addShequ();
+      //小区
+      this.addXiaoqu();
+
+      this.globalMap.on("zoomend", (e) => {
+        let zoom = e.target._zoom;
+        if (zoom >= 15) {
+          // this.mapLayers.mapLayer3.setStyle({ opacity: 1, fillOpacity: 0.2 });
+          // this.markerXiaoqu.setOpacity(1);
+        }
+      });
     },
 
     addStreet() {
@@ -114,7 +143,8 @@ export default {
           };
         },
       }).addTo(this.mapLayers.mapLayer2);
-
+      let bounds = geojsons.getBounds();
+      this.globalMap.fitBounds(bounds);
       // 社区名称
       L.geoJSON(shequName, {
         pointToLayer: (feature) => {
@@ -124,7 +154,7 @@ export default {
             iconSize: [80, 20],
             iconAnchor: [40, 10],
           });
-          var marker = L.marker(
+          return L.marker(
             L.latLng(
               feature.geometry.coordinates[1],
               feature.geometry.coordinates[0]
@@ -136,11 +166,57 @@ export default {
               rotationOrigin: "left center",
             }
           );
-
-          return marker;
+        },
+        style: {
+          opacity: 0,
         },
       }).addTo(this.mapLayers.mapLayer5);
     },
+    addXiaoqu() {
+      L.geoJSON(xiaoqu, {
+        pane: "mapLayer3",
+
+        style: function (feature) {
+          let id = feature.properties.Id;
+          /* 没有人口数据面给灰色 */
+          if (id == 254 || id == 257 || id == 260) {
+            return {
+              color: "#545454",
+              weight: 5,
+              fillColor: "#545454",
+              fillOpacity: 0.5,
+            };
+          } else {
+            return {
+              color: "#ffeb3b",
+              weight: 5,
+              fillColor: "#ffeb3b",
+              fillOpacity: 0.2,
+            };
+          }
+        },
+        onEachFeature: (feature, layer) => {
+          let bounds = layer._bounds;
+          let center = bounds.getCenter();
+          let text = feature.properties.name;
+          let html = text;
+          let myIcon = L.divIcon({
+            className: "land-name",
+            html: html,
+            iconSize: [150, 24],
+            iconAnchor: [75, 12],
+          });
+          //   多边形上的标记点;
+          let marker = L.marker(center, {
+            pane: "mapLayer3",
+            properties: feature.properties,
+            icon: myIcon,
+          });
+
+          marker.addTo(this.mapLayers.mapLayer3);
+        },
+      }).addTo(this.mapLayers.mapLayer3);
+    },
   },
 };
 </script>

src/views/components/IndexModel/components/pieChart.vue

@@ -231,7 +231,7 @@ export default {
     #pie-echarts {
       flex: 1;
       margin: 5px 0;
-      height: 75%;
+      height: 70%;
       width: 70%;
     }
     .lable {