重点区域/路段

src/assets/styles/leaflet.scss

@@ -331,3 +331,18 @@
 .popup-pc-monitoring {
   bottom: 20px !important;
 }
+
+// 重点区域文字
+.region-name1 {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  color: #F44444;
+}
+// 重点路段文字
+.region-name2 {
+  display: flex !important;
+  // justify-content: center;
+  align-items: center;
+  color: #46FF77;
+}

src/utils/mapJson/zhongdianluduan.json

@@ -0,0 +1,43 @@
+{
+  "type": "FeatureCollection",
+  "name": "江宁经开区",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {"name":"重点路段"},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              118.79812211018367,
+              31.89488527680767
+            ],
+            [
+              118.79840281990607,
+              31.894249733686692
+            ],
+            [
+              118.84050927825359,
+              31.89766572637714
+            ],
+            [
+              118.84032213843915,
+              31.898301245916215
+            ],
+            [
+              118.79812211018367,
+              31.89488527680767
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

src/utils/mapJson/zhongdianquyu.json

@@ -0,0 +1,43 @@
+{
+  "type": "FeatureCollection",
+  "name": "江宁经开区",
+  "crs": {
+    "type": "name",
+    "properties": {
+      "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
+    }
+  },
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {"name":"重点片区"},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              118.73133970615027,
+              31.82565980871793
+            ],
+            [
+              118.71899184395562,
+              31.807634288801196
+            ],
+            [
+              118.74590385130261,
+              31.806558027067368
+            ],
+            [
+              118.76300089126534,
+              31.83346080829797
+            ],
+            [
+              118.73133970615027,
+              31.82565980871793
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

src/views/bigScreen/map/index.vue

@@ -119,6 +119,10 @@ import detachment1 from "@/utils/mapJson/detachment1.json"
 import detachment2 from "@/utils/mapJson/detachment2.json"
 import detachment3 from "@/utils/mapJson/detachment3.json"
 import detachment4 from "@/utils/mapJson/detachment4.json"
+
+import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json"
+import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json"
+
 import mapLeft from "../components/mapLeftContent.vue"
 import mapRight from "../components/mapRightContent.vue"
 // import mapCentre from "../components/mapCentre.vue"
@@ -145,6 +149,8 @@ export default {
         mapLayer3:null,
         mapLayer4:null,
         mapLayer5:null,
+        mapLayer6:null,
+        mapLayer7:null,
       },
       mapEvent:{
         mapEvent1:null,
@@ -212,6 +218,14 @@ export default {
       this.globalMap.getPane('mapLayer5').style.zIndex = 502
       this.globalMap.getPane('mapLayer5').style.pointerEvents = 'none'
 
+      this.globalMap.createPane('mapLayer6')
+      this.globalMap.getPane('mapLayer6').style.zIndex = 502
+      this.globalMap.getPane('mapLayer6').style.pointerEvents = 'none'
+
+      this.globalMap.createPane('mapLayer7')
+      this.globalMap.getPane('mapLayer7').style.zIndex = 502
+      this.globalMap.getPane('mapLayer7').style.pointerEvents = 'none'
+
       this.globalMap.createPane('mapEvent1')
       this.globalMap.getPane('mapEvent1').style.zIndex = 503
       this.globalMap.getPane('mapEvent1').style.pointerEvents = 'none'
@@ -224,6 +238,8 @@ export default {
       this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.globalMap)
       this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap)
       this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap)
+      this.mapLayers.mapLayer6 = L.featureGroup().addTo(this.globalMap)
+      this.mapLayers.mapLayer7 = L.featureGroup().addTo(this.globalMap)
 
       this.globalMap.on('zoomend', e => {
         let zoom = this.globalMap.getZoom()
@@ -236,6 +252,8 @@ export default {
       // this.addLayer3();
       // this.addLayer4();
       // this.addLayer5();
+      this.addLayer6();
+      this.addLayer7();
     },
     addLayer1(){
       this.mapLayers.mapLayer1.clearLayers()
@@ -598,7 +616,7 @@ export default {
           pane: 'mapLayer5',
           style: function (feature) {
             return {
-              color: '#00C5EC',
+              color: 'rgba(255,0,0,0.38)',
               weight: 1,
               fillColor: 'rgba(255,0,0,0.38)',
               fillOpacity: 1,
@@ -609,6 +627,65 @@ export default {
       // 获取json文件的中心位置
       this.mapLayer5 = geojson.getBounds()
     },
+    addLayer6(){
+      this.mapLayers.mapLayer5.clearLayers()
+      let geojson = L.geoJSON(zhongdianquyu,{
+          pane: 'mapLayer6',
+          style: function (feature) {
+            return {
+              color: 'rgba(255,0,0,0.38)',
+              weight: 1,
+              fillColor: 'rgba(255,0,0,0.38)',
+              fillOpacity: 1,
+            }
+          },
+          
+        },{ className: 'jack-s6' }
+      ).addTo(this.mapLayers.mapLayer6)
+      // 获取json文件的中心位置
+      let bounds = geojson.getBounds()
+      let latlng = bounds.getCenter()
+
+      let myIcon1 = L.divIcon({
+          className: 'region-name1',
+          html: '重点区域',
+          iconSize: [120, 68],
+        })
+        L.marker(latlng, {
+          pane: 'mapLayer4',
+          icon: myIcon1,
+        }).addTo(this.mapLayers.mapLayer6)
+      // this.mapLayer5 = geojson.getBounds()
+    },
+    addLayer7(){
+      this.mapLayers.mapLayer7.clearLayers()
+      let geojson = L.geoJSON(zhongdianluduan,{
+          pane: 'mapLayer7',
+          style: function (feature) {
+            return {
+              color: '#00C5EC',
+              weight: 0,
+              fillColor: 'rgba(70,255,119,0.38)',
+              fillOpacity: 1,
+            }
+          },
+        },{ className: 'jack-s7' }
+      ).addTo(this.mapLayers.mapLayer7)
+      // 获取json文件的中心位置
+      // this.mapLayer5 = geojson.getBounds()
+      let bounds = geojson.getBounds()
+      let latlng = bounds.getCenter()
+      
+      let myIcon1 = L.divIcon({
+          className: 'region-name2',
+          html: '重点路段',
+          iconSize: [120, 68],
+        })
+        L.marker(latlng, {
+          pane: 'mapLayer4',
+          icon: myIcon1,
+        }).addTo(this.mapLayers.mapLayer7)
+    },
     actionBtn(id){
       this.action = id;
       // console.log(id)