增加地图缩放及恢复

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,66 +16,109 @@ 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) {
-        echarts.registerMap('fengdu', {geoJSON})
-        echarts.registerMap('fd', {geoJSON: fdEdge})
-        this.map = echarts.init(this.$el)
-        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',
-              itemStyle: {
-                areaColor: '#02bcff29',
-                borderColor: '#02FEFF21',
-                borderWidth: 1,
-              },
-              label: {
+      if (this.$refs.content) {
+        if (!this.map) this.map = echarts.init(this.$refs.content)
+        const geo = this.$copy(geoJSON)
+        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({
+            series: [
+              {
+                type: 'map',
                 show: true,
-                color: '#02FEFF',
-                fontSize: 16,
-                fontFamily: 'PingFang-SC',
+                map: mapid,
+                roam: true,
+                itemStyle: {
+                  areaColor: '#02bcff29',
+                  borderColor: '#02FEFF',
+                  borderWidth: 2,
+                },
+                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)
               },
-              emphasis: {
-                disabled: true,
+            ]
+          })
+        } 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',
+                  },
+                }],
               },
-              select: {
-                itemStyle: {areaColor: '#02bcff29',},
-                label: {fontSize: 16, fontWeight: 'bold', color: '#02FEFF'}
-              },
-              zoom: 1.2,
-              data: geoJSON.features.map(e => e.properties)
-            },
-          ]
-        })
+            ]
+          })
+        }
         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>