在搞地图了

2024-09-13 18:06:54 +08:00
parent e69b66d2aa
commit 78a3842e01
4 changed files with 220 additions and 35 deletions
--- a/ui/packages/tools/AiEchartMap.vue
+++ b/ui/packages/tools/AiEchartMap.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="AiEchartMap" v-resize="onDomResize">
+    <div class="chart-map" ref="dvMap"/>
+  </div>
+</template>
+
+<script>
+import http from "dui/lib/js/request";
+import {mapState} from "vuex";
+import "../../lib/cdn/turf.min.js";
+
+export default {
+  name: 'AiEchartMap',
+  props: {
+    geoJson: String,
+    data: Array,
+    ops: Object
+  },
+  data() {
+    return {
+      chart: null,
+      geo: null
+    }
+  },
+  directives: {
+    resize: {
+      bind(el, binding) {
+        let width = ''
+        let height = ''
+
+        function isResize() {
+          const style = document.defaultView.getComputedStyle(el)
+          if (width !== style.width || height !== style.height) {
+            binding.value({
+              width: style.width,
+              height: style.height
+            })
+          }
+          width = style.width
+          height = style.height
+        }
+
+        el.__vueSetInterval__ = setInterval(isResize, 300)
+      },
+      unbind(el) {
+        clearInterval(el.__vueSetInterval__)
+      }
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+  mounted() {
+    this.$load(this.$refs.dvMap).then(() => this.initChart())
+  },
+  methods: {
+    onDomResize() {
+      this.$nextTick(() => {
+        this.chart.resize()
+      })
+    },
+    loadLibs() {
+      return Promise.all([
+        this.getData(this.geoJson).then(res => this.geo = res?.data)
+      ])
+    },
+    initChart() {
+      const {echarts, turf} = 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) : geoJson
+        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: {
+                    type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [
+                      {offset: 0, color: 'rgba(61,127,255,0.35)'},
+                      {offset: 1, color: '#09E2F8'},
+                    ]
+                  }, shadowColor: "#1A80BF", shadowOffsetY: 2
+                }, label: {show: false}
+              }
+            ],
+          },
+          series: [
+            {type: 'scatter', coordinateSystem: 'geo', itemStyle: {color: '#66FFFF'}},
+            {type: 'effectScatter', coordinateSystem: 'geo', itemStyle: {color: '#FFD15C'}}
+          ],
+          ...this.ops
+        }
+        this.chart.setOption(option)
+      }).finally(() => this.chart.hideLoading())
+    },
+    getData(url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${this.user.info.areaId?.substring(0, 6)}`) {
+      return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(url)}`)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiEchartMap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  .chart-map {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>