2022-05-28 Vue中高德地图api结合echarts实

省市区3级下钻
示意图如下

image.png image.png image.png

<template>
  <div class="home-container">
    <el-button type="primary" @click="mapBack">返回上级地图</el-button>
    <div id="map"></div>
  </div>
</template>

<script lang="js">
import {defineComponent} from 'vue';
import * as echarts from 'echarts';

export default defineComponent({
  name: 'map',
  data() {
    return {
      echartsMap: null,
      mapJson: {},
      level: 'province'
    }
  },
  props: {
    markers: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    level(val) {
      console.log(val)
    }
  },
  mounted() {
    this.loadMapData('320000')
  },
  methods: {
    mapBack() {
      if (this.level === 'district') {
        this.level = 'city'
        const parentCode = this.mapJson.features[0].properties.acroutes[2]
        this.loadMapData(parentCode)
      } else if (this.level === 'city') {
        this.level = 'province'
        this.loadMapData('320000')
      }
    },
    loadMapData(areaCode) {
      // eslint-disable-next-line no-undef
      AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {

        //创建一个实例
        var districtExplorer = window.districtExplorer = new DistrictExplorer({
          eventSupport: true, //打开事件支持
          map: this.map
        });

        districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {

          if (error) {
            console.error(error);
            return;
          }
          let mapJson = {};
          mapJson.type = 'FeatureCollection'
          //特别注意这里哦，如果查看过正常的geojson文件，都会发现，文件都是以features 字段开头的，所以这里要记得加上
          mapJson.features = areaNode.getSubFeatures();
          this.mapJson = mapJson
          this.loadMap('province', mapJson);
        });
      });
    },
    //通过loadMap函数加载地图
    loadMap(mapName, data) {

      if (this.echartsMap) this.echartsMap.dispose();

      //注册并赋值给echartsMap
      this.echartsMap = echarts.init(document.getElementById('map'));
      if (data) {

        echarts.registerMap(mapName, data);//把geoJson数据注入echarts
        //配置echarts的option
        const option = {
          backgroundColor: '#020933',
          geo: {
            map: mapName,
            aspectScale: 0.75, //长宽比
            zoom: 1.1,
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            nameProperty: 'name',
            data: this.markers,
            itemStyle: {
              normal: {
                borderColor: '#2ab8ff',
                borderWidth: 1.5,
                areaColor: '#12235c'
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green'
              }
            },
          },
          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'fill'
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#ffff',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              data: this.markers
            }

          ]
        };
        this.echartsMap.setOption(option);

        this.echartsMap.on('click', this.echartsMapClick);
      }
    },
    echartsMapClick(params) {
      const currentMap = this.mapJson.features.filter(item => {
        if (item.properties.name === params.name) return true
      })

      this.level = currentMap[0].properties.level

      if (this.level === 'district') {
        let mapJson = {};
        mapJson.type = 'FeatureCollection'
        mapJson.features = currentMap
        this.mapJson = mapJson
      }
      this.$emit('mapClick', {level: this.level, code: currentMap[0].properties.adcode})
    },
  },
  beforeUnmount() {
    this.echartsMap = null
  }
});
</script>


<style scoped>
#map {
  height: 600px;
  width: 800px;
}
</style>