大屏接入地图

ui/packages/tools/AiEchartMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="AiEchartMap" v-resize="onDomResize">
     <div class="chart-map" ref="dvMap"/>
+    <slot v-if="$slots.default"/>
   </div>
 </template>
 
@@ -9,6 +10,19 @@ import http from "dui/lib/js/request";
 import {mapState} from "vuex";
 import "../../lib/cdn/turf.min.js";
 
+const assign = (target, source = {}) => {
+  Object.entries(source).forEach(([key, value]) => {
+    if (typeof value === 'object') {
+      if (target[key] && typeof target[key] === 'object') {
+        assign(target[key], value)
+      } else {
+        target[key] = value
+      }
+    } else {
+      target[key] = value
+    }
+  })
+}
 export default {
   name: 'AiEchartMap',
   props: {
@@ -68,51 +82,41 @@ export default {
       }
       return Promise.all([getGeo])
     },
-    initChart() {
+    handleMapOps(geoJson, ops) {
       const {echarts, turf} = window
+      const boundary = geoJson.features?.length > 1 ? turf.union(geoJson) : this.$copy(geoJson.features[0])
+      boundary.properties = {...boundary.properties}
+      boundary.properties.name = "boundary"
+      geoJson.features.unshift(boundary)
+      echarts.registerMap('customMap', geoJson)
+      const option = {
+        geo: {
+          map: 'customMap', roam: true, emphasis: {disabled: true},
+          itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
+          silent: true,
+          label: {show: true, color: '#fff'},
+          regions: [
+            {
+              name: "boundary", itemStyle: {
+                areaColor: "rgba(2,188,255,0.16)", shadowColor: "#02F0FF21", shadowOffsetY: 20, shadowBlur: 20,
+                borderColor: '#02F0FF', borderWidth: 3
+              }, label: {show: false}
+            }
+          ],
+        },
+      }
+      assign(option, ops)
+      return option
+    },
+    initChart() {
+      const {echarts} = window
       this.chart = echarts.init(this.$refs.dvMap)
       this.chart.showLoading({
         text: "数据加载中...", textColor: "#fff",
         maskColor: 'rgba(0, 0, 0, 0.2)'
       })
       this.loadLibs().then(() => {
-        const geoJson = this.geo
-        const boundary = geoJson.features?.length > 1 ? turf.union(geoJson) : this.$copy(geoJson.features[0])
-        boundary.properties = {...boundary.properties}
-        boundary.properties.name = "boundary"
-        geoJson.features.unshift(boundary)
-        echarts.registerMap('customMap', geoJson)
-        const option = {
-          geo: {
-            map: 'customMap', roam: true, emphasis: {disabled: true},
-            itemStyle: {areaColor: "transparent", borderColor: '#97CAE6'},
-            silent: true,
-            label: {show: true, color: '#fff'},
-            regions: [
-              {
-                name: "boundary", itemStyle: {
-                  areaColor: "rgba(2,188,255,0.16)", shadowColor: "#02F0FF21", shadowOffsetY: 20, shadowBlur: 20,
-                  borderColor: '#02F0FF', borderWidth: 3
-                }, label: {show: false}
-              }
-            ],
-          },
-        }
-        const assign = (target, source) => {
-          Object.entries(source).forEach(([key, value]) => {
-            if (typeof value === 'object') {
-              if (target[key] && typeof target[key] === 'object') {
-                assign(target[key], value)
-              } else {
-                target[key] = value
-              }
-            } else {
-              target[key] = value
-            }
-          })
-        }
-        assign(option, this.ops)
-        this.chart.setOption(option)
+        this.chart.setOption(this.handleMapOps(this.geo, this.ops))
       }).finally(() => {
         this.$emit('map', this.chart)
         this.chart.hideLoading()