增加地图缩放及恢复

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -53,7 +53,7 @@
           </fd-card>
         </div>
         <div class="center fill relative">
-          <fd-map class="w100" v-model="map" style="height: calc(100% - 114px)"/>
+          <fd-map ref="map" class="w100" v-model="map" :root="areaId" style="height: calc(100% - 114px)"/>
           <fd-card class="centerBottom pad-b8" label="实时动态">
             <dv-scroll-board class="mar-t14" :config="realtimeEvents" style="height: 114px"
                              @click="handleRealtimeEventDialog"/>
@@ -360,7 +360,6 @@ export default {
       !v && (this.detail = {})
     },
     areaId(v) {
-      console.log(v)
       !!v && this.getData()
     }
   },
@@ -372,7 +371,7 @@ export default {
       this.$refs.fddv.dialog = v
     },
     calcProgress(data = []) {
-      const value = data.length > 0 ? (data[0].value / data.at(-1).value * 100).toFixed(0) : 0
+      const value = data.length > 0 ? (data[0].value / data.at(-1).value * 100 || 0).toFixed(0) : 0
       return [{value}]
     },
     watchTablePageChange(c = 0) {
@@ -476,6 +475,7 @@ export default {
       this.instance.post("/app/appintegralsupermarketshop/list", null, {params: {areaId, size: 9999}}).then(res => {
         if (res?.data) {
           initMap.then(() => {
+            this.$refs.map.handleReset()
             const {records} = res.data
             this.map.on('click', e => {
               console.log(e)

project/fengdu/AppBIBoard/assets/fdEdge.json

@@ -8293,7 +8293,8 @@
         ]
       },
       "properties": {
-        "pid": "500230"
+        "pid": "500230",
+        "name": "丰都县"
       }
     }
   ]

project/fengdu/AppBIBoard/components/fdMap.vue

@@ -1,5 +1,8 @@
 <template>
-  <section class="fdMap"/>
+  <section class="fdMap">
+    <div ref="content" class="w100 h100"/>
+    <div class="reset" @click="handleReset"/>
+  </section>
 </template>
 <script>
 import * as echarts from 'echarts'
@@ -13,45 +16,42 @@ export default {
     event: "input"
   },
   props: {
-    ins: {default: null}
+    ins: {default: null},
+    root: String
+  },
+  watch: {
+    root(v) {
+      if (v) {
+        this.areaId = v.slice(0, 9)
+      }
+    }
   },
   data() {
     return {
-      map: null
+      map: null,
+      areaId: ''
     }
   },
   methods: {
     init(c = 0) {
-      if (this.$el) {
+      if (this.$refs.content) {
-        echarts.registerMap('fengdu', {geoJSON})
+        if (!this.map) this.map = echarts.init(this.$refs.content)
-        echarts.registerMap('fd', {geoJSON: fdEdge})
+        const geo = this.$copy(geoJSON)
-        this.map = echarts.init(this.$el)
+        if (this.areaId && this.areaId != "500230000") {//根据地区切换地图
+          const mapid = 'fd' + this.areaId
+          geo.features = geoJSON.features.filter(e => e.properties.unique_id == this.areaId)
+          echarts.registerMap(mapid, {geoJSON: geo})
           this.map.setOption({
-          geo: [
-            {
-              show: true,
-              map: 'fd', itemStyle: {
-                areaColor: 'transparent',
-                borderWidth: 2,
-                borderColor: '#02FEFF',
-                // shadowOffsetY: 2,
-                // shadowColor: '#02FEFF'
-              },
-              emphasis: {
-                disabled: true
-              },
-              zoom: 1.2
-            },
-          ],
             series: [
               {
                 type: 'map',
                 show: true,
-              map: 'fengdu',
+                map: mapid,
+                roam: true,
                 itemStyle: {
                   areaColor: '#02bcff29',
-                borderColor: '#02FEFF21',
+                  borderColor: '#02FEFF',
-                borderWidth: 1,
+                  borderWidth: 2,
                 },
                 label: {
                   show: true,
@@ -71,8 +71,54 @@ export default {
               },
             ]
           })
+        } else {
+          const fd = fdEdge.features[0]
+          geo.features.unshift(fd)
+          echarts.registerMap('fengdu', {geoJSON: geo})
+          this.map.setOption({
+            series: [
+              {
+                type: 'map',
+                show: true,
+                map: 'fengdu',
+                roam: true,
+                itemStyle: {
+                  areaColor: '#02bcff29',
+                  borderColor: '#02FEFF21',
+                  borderWidth: 1,
+                },
+                label: {
+                  show: true,
+                  color: '#02FEFF',
+                  fontSize: 16,
+                  fontFamily: 'PingFang-SC',
+                },
+                emphasis: {
+                  disabled: true,
+                },
+                select: {
+                  itemStyle: {areaColor: '#02bcff29',},
+                  label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
+                },
+                zoom: 1.2,
+                data: [...geoJSON.features.map(e => e.properties), {
+                  ...fd.properties, select: {disabled: true}, itemStyle: {
+                    areaColor: 'transparent',
+                    borderWidth: 2,
+                    borderColor: '#02FEFF',
+                  },
+                }],
+              },
+            ]
+          })
+        }
         this.$emit("input", this.map)
       } else if (c < 5) setTimeout(() => this.init(++c), 500)
+    },
+    handleReset() {
+      const options = this.map.getOption()
+      this.map.clear()
+      this.map.setOption(options)
     }
   },
   mounted() {
@@ -82,5 +128,17 @@ export default {
 </script>
 <style scoped lang="scss">
 .fdMap {
+  position: relative;
+
+  .reset {
+    position: absolute;
+    top: 20px;
+    right: 60px;
+    background: url("../assets/mapReset.png") no-repeat;
+    width: 66px;
+    height: 64px;
+    z-index: 202310241633;
+    cursor: pointer;
+  }
 }
 </style>