From 456b728f2d861c6160341a8672bec421f872cba6 Mon Sep 17 00:00:00 2001 From: Lvtf Date: Fri, 18 Aug 2023 19:33:36 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E7=82=B9=E5=8C=BA=E5=9F=9F/=E8=B7=AF?= =?UTF-8?q?=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/leaflet.scss | 15 +++++ src/utils/mapJson/zhongdianluduan.json | 43 ++++++++++++++ src/utils/mapJson/zhongdianquyu.json | 43 ++++++++++++++ src/views/bigScreen/map/index.vue | 79 +++++++++++++++++++++++++- 4 files changed, 179 insertions(+), 1 deletion(-) create mode 100644 src/utils/mapJson/zhongdianluduan.json create mode 100644 src/utils/mapJson/zhongdianquyu.json diff --git a/src/assets/styles/leaflet.scss b/src/assets/styles/leaflet.scss index 96adc15..d83d5bd 100644 --- a/src/assets/styles/leaflet.scss +++ b/src/assets/styles/leaflet.scss @@ -330,4 +330,19 @@ } .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; } \ No newline at end of file diff --git a/src/utils/mapJson/zhongdianluduan.json b/src/utils/mapJson/zhongdianluduan.json new file mode 100644 index 0000000..60509f7 --- /dev/null +++ b/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" + } + } + ] +} \ No newline at end of file diff --git a/src/utils/mapJson/zhongdianquyu.json b/src/utils/mapJson/zhongdianquyu.json new file mode 100644 index 0000000..2ac7d30 --- /dev/null +++ b/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" + } + } + ] +} \ No newline at end of file diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue index 3c4fc91..8d67333 100644 --- a/src/views/bigScreen/map/index.vue +++ b/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)