vue echarts绘制市级地图下钻（带注释）

vue echarts绘制市级地图下钻

------- 以浙江嘉兴市为例
首先要知道地图的数据获取：http://datav.aliyun.com/portal/school/atlas/area_selector
其次要知道怎么在vue中使用echarts，可参考vite2+vue3项目使用router+echarts+eslint其中的第二部分

如果是要绘制中国地图和省级的话可以直接安装echarts，在其中找到map下的文件即可引用

成品图

1、首先复制市级地图json内容并存储

在网站中点击复制嘉兴市的json内容

在项目的src文件下新建assets文件夹用于存放内容
在assets文件夹下新建json文件夹并在该文件夹下新建文件jiaxing-map.json
将复制的嘉兴市的json内容直接粘贴到当前文件中

2、同样将下钻的区域的json内容复制并存储

这时为了区分，则在json文件夹下新建sub-map文件夹存放区级的地图数据，如下图所示

3、地图数据都准备好了之后需要一个js文件来统筹地图数据

maputil.js

需要建立两个字典，一个是汉字和拼音的对照映射，一个是拼音和JSON文件的映射，这个由自己可灵活配置，并不是唯一的

// 添加的地图json数据
import jiaxing from '_assets/json/jiaxing-map-data.json'
import nanhu from '_assets/json/sub-map/nanhu-data.json'
import xiuzhou from '_assets/json/sub-map/xiuzhou-data.json'
import jiashan from '_assets/json/sub-map/jiashan-data.json'
import pinghu from '_assets/json/sub-map/pinghu-data.json'
import tongxiang from '_assets/json/sub-map/tongxiang-data.json'
import haining from '_assets/json/sub-map/haining-data.json'
// ...

const mapDict = {
  秀洲区: 'xiuzhou',
  南湖区: 'nanhu',
  嘉善县: 'jiashan',
  平湖市: 'pinghu',
  桐乡市: 'tongxiang',
  海宁市: 'haining'
  // ...
}

const mapData = {
  xiuzhou,
  nanhu,
  jiashan,
  pinghu,
  tongxiang,
  haining
  // ...
}

export function getMap (mapName) {
  const cityName = mapDict[mapName]
  if (cityName) {
    return [cityName, mapData[cityName]]
  }
  return ['jiaxing', jiaxing]
}

4、页面使用

<template>
  <div class="order-map-wrapper">
    <div ref="charts" class="map"></div>
  </div>
</template>

<style lang="less">
.order-map-wrapper {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>

<script>
import * as echarts from 'echarts'
import { getMap } from '_assets/json/maputil.js'

export default {
  created () {
    this.$nextTick(() => {
      this.initCharts()
    })
  },
  methods: {
    initCharts () {
      // 可以多次使用
      const charts = echarts.init(this.$refs.charts)
      const option = {
        // 背景颜色
        backgroundColor: '#404a59',
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.16)',
          hideDelay: 100,
          triggerOn: 'mousemove',
          enterable: true,
          textStyle: {
            color: '#DADADA',
            fontSize: '33',
            width: 20,
            height: 30,
            overflow: 'break'
          },
          showDelay: 100
        },
        // 地图配置
        geo: {
          map: 'jiaxing',
          label: {
            // 通常状态下的样式
            normal: {
              show: true,
              textStyle: {
                fontSize: 30,
                color: '#fff'
              }
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        graphic: [
          {
            type: 'text',
            left: '10%',
            top: '10%',
            style: {
              textStyle: {
                fontSize: 35
              },
              text: '浙江嘉兴',
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              fill: '#fff'
            }
          }
        ],
        visualMap: {
          // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
          show: true,
          // 上下端文字
          text: ['高', '低'],
          // 最小值和最大值，必须指定
          min: 0,
          max: 6000,
          // 位置
          left: '10%',
          bottom: '10%',
          // 是否展示滑块
          calculable: true,
          // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
          seriesIndex: [0],
          // 从下到上的颜色
          inRange: {
            color: ['#00467F', '#A5CC82']
          },
          // 字体颜色
          textStyle: {
            color: '#fff',
            map: 'china'
          }
        }
      }

      console.log(getMap())
      // 获得数据
      const [mapName, mapJson] = getMap()
      option.geo.map = mapName
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap(mapName, mapJson)

      charts.setOption(option)

      charts.on('click', ({ name }) => {
        // 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击
        const index = option.graphic.findIndex(i => i.style.text === name)
        if (!name || index !== -1) return

        const [mapName, mapJson] = getMap(name)
        // 修改option的配置，可以继续自定义
        option.geo.zoom = 0.8
        // 这里必须要和注册地图时的名字一致
        option.geo.map = mapName

        // 为了重新定位，这里使用了length
        const idx = option.graphic.length + 1
        option.graphic.push({
          type: 'text',
          left: `${idx * 10}%`,
          top: '10%',
          style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: '#fff'
          }
        })

        // 注册地图
        echarts.registerMap(mapName, mapJson)
        // 渲染
        charts.setOption(option, true)
      })
    }
  }
}
</script>

具体写的代码大部分参考了: https://blog.csdn.net/SkelleBest/article/details/121204097这篇文章