dvcp_v2_webapp/ui/dv/AiDvMap.vue

<template>
  <div class="AiDvMap" v-resize="onDomResize">
    <div class="chart-map" ref="dvMap"/>
  </div>
</template>

<script>
import http from "dui/lib/js/request";
import {mapState} from "vuex";

export default {
  name: 'AiDvMap',
  props: {
    geoJson: String,
    data: Array,
    ops: Object
  },
  data() {
    return {
      chart: 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()
      })
    },
    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.getData(this.geoJson).then(res => {
        if (!!res?.data) {
          echarts.registerMap('customMap', res.data)
          const option = {
            geo: [
              // 重影
              ...Array(3).fill(1).map((e, i) => {
                return {
                  type: "map",
                  map: "customMap",
                  zlevel: -1,
                  aspectScale: 1,
                  zoom: 0.65,
                  layoutCenter: ["50%", `${51 + i}%`],
                  layoutSize: "180%",
                  roam: false,
                  silent: true,
                  itemStyle: {
                    normal: {
                      borderWidth: 1,
                      // borderColor:"rgba(17, 149, 216,0.6)",
                      borderColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
                      shadowColor: `rgba(2, 198, 220, ${0.6 - i * 0.2})`,
                      shadowOffsetY: 5,
                      shadowBlur: 15,
                      areaColor: "transparent",
                    },
                  },
                }
              }),
            ],
            series: {
              type: "map",
              map: "customMap",
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "50%"],
              layoutSize: "180%",
              show: true,
              roam: false,
              selectedMode: 'single',
              emphasis: {
                show: true,
                label: {
                  textStyle: {
                    color: "#FFFFFF"
                  },
                },
                itemStyle: {
                  areaColor: '#02C6DC'
                }
              },
              select: {
                label: {
                  color: "#fff"
                },
                itemStyle: {
                  areaColor: '#02bcff29'
                }
              },
              label: {
                show: true,
                color: '#fff',
                fontSize: 22
              },
              itemStyle: {
                borderColor: "rgba(2, 198, 220, 0)",
                borderWidth: 2,
                areaColor: "#02bcff29",
                shadowBlur: 120,
              },
              data: this.data
            },
            ...this.ops
            // geo3D: {
            //   map: "customMap",
            //   shading: 'color',
            //   regionHeight: 8,
            //   show: true,
            //   emphasis: {
            //     show: true,
            //   },
            //   label: {
            //     show: true,
            //     color: '#fff',
            //     fontSize: 22
            //   },
            //   itemStyle: {
            //     color: '#02bcff29',
            //     borderColor: "rgba(2, 198, 220, 1)",
            //     borderWidth: 2
            //   },
            //   viewControl: {
            //     rotateSensitivity: 0,
            //     zoomSensitivity: 0,
            //     panMouseButton: 0,
            //     distance: 250,
            //     alpha:50,
            //     center:[0,-60,0]
            //   }
            // },
          }
          this.chart.setOption(option)
          this.chart.on('click', evt => this.$emit("click", {...evt, info: res.data.features.find(e => e.properties?.name == evt.name)?.properties}))
          this.chart.on('globalout', () => this.$emit("globalout"))
        }
        return 1
      }).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>
.AiDvMap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  position: relative;

  .chart-map {
    width: 100%;
    height: 100%;
  }
}
</style>