vue中使用echarts实现省市地图绘制，根据数据显示不同区域颜色，点击省市切换，根据经纬度打点

一、实现效果

• 使用echarts实现省市地图绘制
• 根据数据不同显示不同区域颜色
• 实现省市地图点击切换效果
• 实现地图上根据经纬度打点

二、实现方法

1、安装echarts插件

npm install echarts --save

2、获取省市json数据

https://datav.aliyun.com/portal/school/atlas/area_selector

通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。

3、地图经纬度数据

经度和纬度常合称为经纬度，把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。
与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系，能够标示地球上的任何一个位置。

http://jingweidu.757dy.com/

4、本例中data 数据

本文以吉林省地图为例，来实现吉林省及所有市的切换效果。

<template>
  <div class="center-body">
      <div class="map" id="map"></div>
      <div class="rest-button" v-if="showButton" @click="reChinaMap()">返回吉林省</div>
  </div>
</template>

导入插件

import * as echarts from "echarts";

准备数据

export default {
  data() {
      return {
          showButton: true,//是否显示返回按钮
          currentCity: "",//当前城市
          // 市json数据名称
          province: {
              "长春市": "changchunshi",
              "吉林市": "jilinshi",
              "通化市": "tonghuashi",
              "四平市": "sipingshi",
              "白山市": "baishanshi",
              "辽源市": "liaoyuanshi",
              "白城市": "baichengshi",
              "延边朝鲜族自治州": "yanbianchaoxianzuzizhiqu",
              "松原市": "songyuanshi"
          },
      };
  },
}

5、视觉映射组件

visualMap: { // 视觉映射组件
  type: 'piecewise',
  show: true,
  bottom: '2%',
  left: '2%',
  textStyle: {
      fontsize: 12
  },
  pieces: [{
      gt: 600,
      lte: 1000,
      label: '600-1000个'
  },
  {
      gt: 400,
      lte: 600,
      label: '400-600个'
  },
  {
      gt: 200,
      lte: 400,
      label: '200-400个'
  },
  {
      gt: 0,
      lte: 200,
      label: '0-200个'
  },
  ],
  color: ['#F56C6C', '#E6A23C', '#67C23A', '#409EFF'], //自定义范围的颜色
},

6、标记的图形

markPoint: {
  /**
   * 标记的图形，标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
   * 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
   */
  symbol: 'circle',
  //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
  symbolSize: 6, 
  //文字标签
  label: {
      show: false, //是否显示标签
      position: 'top',//标签的位置
      color: '#ffffff', //文字的颜色
      fontSize: 12 //文字的字体大小
  },
  //标注的样式
  itemStyle: {
      opacity: 0.8,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
      color: '#ffffff' //图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充。
  },
  silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
  /**
   * 标注的数据数组。每个数组项是一个对象：{ name: '舒兰市', coord: [126.97170, 44.41223], value: '78', symbolSize: 10, },
   * name 标注名称
   * coord 数据在相应坐标系上的坐标位置 经纬度值
   * value 标注值，可以不设。
   * symbolSize 标记的大小，可以单独设置每个标记的大小
   */
  data: markData
},

7、地图渲染

series: [{
  type: 'map',
  map: name,
  zoom: 1.2,
  top: '10%',
  x: 'center',
  label: {
      show: true,
      color: '#770928'
  },
  itemStyle: {
      normal: { // 静态的时候显示的默认样式
          borderWidth: 1, // 边框宽度
          areaColor: '#C0C4CC', // 地图颜色
          borderColor: '#ffffff' // 边框颜色
      },
      emphasis: { // 鼠标移入动态的时候显示的默认样式
          borderWidth: 2, // 边框宽度
          areaColor: '#909399' // 地图颜色
      }
  },
}],

8、点击切换市地图

myChart.on('click', e => {
  this.darwProvniceMap(e)
})

// 切换市
darwProvniceMap(val) {
  this.currentCity = val.name
  if (this.province[val.name]) {
      let json = require(`@/json/${this.province[val.name]}.json`)
      this.drawMap(this.province[val.name], json)
      this.showButton = true
  }
},

9、实例代码已上传，去顶部可下载

附全部代码

<template>
  <div class="center-body">
      <div class="map" id="map"></div>
      <div class="rest-button" v-if="showButton" @click="reChinaMap()">返回吉林省</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
      return {
          showButton: true,//是否显示返回按钮
          currentCity: "",//当前城市
          // 市json数据名称
          province: {
              "长春市": "changchunshi",
              "吉林市": "jilinshi",
              "通化市": "tonghuashi",
              "四平市": "sipingshi",
              "白山市": "baishanshi",
              "辽源市": "liaoyuanshi",
              "白城市": "baichengshi",
              "延边朝鲜族自治州": "yanbianchaoxianzuzizhiqu",
              "松原市": "songyuanshi"
          },
          //地图展示数据
          mapData: [
              {
                  name: '长春市',
                  value: '92',
                  mapArea: [
                      { name: '南关区', value: '50' },
                      { name: '宽城区', value: '100'},
                      { name: '朝阳区', value: '150' },
                      { name: '二道区', value: '200'},
                      { name: '绿园区', value: '300' },
                      { name: '双阳区', value: '400'},
                      { name: '九台区', value: '500' },
                      { name: '农安县', value: '600'},
                      { name: '榆树市', value: '700'},
                      { name: '德惠市', value: '800'},
                      { name: '公主岭市', value: '900'},
                  ],
                  markPoints: [
                      { name: '宽城区', coord: [125.33329, 44.10415]},
                      { name: '二道区', coord: [125.62065, 43.87264]},
                      { name: '双阳区', coord: [125.67145, 43.53109]},
                      { name: '九台区', coord: [125.86288, 44.21006]},
                      { name: '农安县', coord: [125.03372, 44.43899]},
                      { name: '榆树市', coord: [126.59487, 44.93444]},
                      { name: '德惠市', coord: [125.83678, 44.60390]},
                      { name: '公主岭市', coord: [124.66729, 43.84164]},
                  ]
              },
              {
                  name: '吉林市',
                  value: '963',
                  mapArea: [
                      { name: '舒兰市', value: '100' },
                      { name: '永吉县', value: '200' },
                      { name: '龙潭区', value: '300' },
                      { name: '丰满区', value: '400' },
                      { name: '船营区', value: '500' },
                      { name: '昌邑区', value: '600' },
                      { name: '磐石市', value: '700' },
                      { name: '蛟河市', value: '800' },
                      { name: '桦甸市', value: '900' },
                  ],
                  markPoints: [
                      { name: '舒兰市', coord: [127.14763, 44.34747]},
                      { name: '永吉县', coord: [126.24366, 43.58495]},
                      { name: '龙潭区', coord: [126.63733, 44.02580]},
                      { name: '丰满区', coord: [126.70059, 43.67911]},
                      { name: '船营区', coord: [126.30294, 43.83106]},
                      { name: '昌邑区', coord: [126.25877, 44.02708]},
                      { name: '磐石市', coord: [126.15245, 43.10234]},
                      { name: '蛟河市', coord: [127.35148, 43.73000]},
                      { name: '桦甸市', coord: [126.93714, 43.09717]},
                  ]
              },
              {
                  name: '通化市',
                  value: '125'
              },
              {
                  name: '四平市',
                  value: '536'
              },
              {
                  name: '白山市',
                  value: '86'
              },
              {
                  name: '辽源市',
                  value: '60'
              },
              {
                  name: '白城市',
                  value: '31'
              },
              {
                  name: '延边朝鲜族自治州',
                  value: '196'
              },
              {
                  name: '松原市',
                  value: '380'
              }
          ]
      };
  },
  created() {
      
  },
  mounted() {
      this.reChinaMap()
  },
  methods: {
      drawMap(name, json) {
          // 判断地图是否渲染
          let myChart = echarts.getInstanceByDom(document.getElementById("map"))
          // 如果渲染则清空地图 
          if (myChart != null) {
              myChart.dispose()
          }
          // 初始化地图
          myChart = echarts.init(document.getElementById("map"));
          if (!json) {
              json = require("@/json/jilin.json");
              this.showButton = false
          }

          echarts.registerMap(name, json)

          let currentCity = this.currentCity
          let seriesData = []
          let markData = []
          if (currentCity) {
              let tempData = this.mapData.filter(x => x.name == currentCity)
              seriesData = tempData[0]?.mapArea
          } else {
              seriesData = this.mapData
              this.mapData.forEach(x => {
                  if (x.markPoints) {
                      markData.push(...x.markPoints)
                  }
              })
          }
          var option = {
              visualMap: { // 视觉映射组件
                  type: 'piecewise',
                  show: true,
                  bottom: '2%',
                  left: '2%',
                  textStyle: {
                      fontsize: 12
                  },
                  pieces: [{
                      gt: 600,
                      lte: 1000,
                      label: '600-1000个'
                  },
                  {
                      gt: 400,
                      lte: 600,
                      label: '400-600个'
                  },
                  {
                      gt: 200,
                      lte: 400,
                      label: '200-400个'
                  },
                  {
                      gt: 0,
                      lte: 200,
                      label: '0-200个'
                  },
                  ],
                  color: ['#F56C6C', '#E6A23C', '#67C23A', '#409EFF'], //自定义范围的颜色
              },
              tooltip: { // 悬浮框
                  trigger: 'item', // 触发条件
                  backgroundColor: 'RGBA(136, 123, 135, 0.8)',
                  formatter: '{b}<br/>占用数：{c}个', // 自定义显示数据
                  textStyle: {
                      color: '#ffffff'
                  }
              },
              series: [{
                  type: 'map',
                  map: name,
                  zoom: 1.2,
                  top: '10%',
                  x: 'center',
                  label: {
                      show: true,
                      color: '#770928'
                  },
                  itemStyle: {
                      normal: { // 静态的时候显示的默认样式
                          borderWidth: 1, // 边框宽度
                          areaColor: '#C0C4CC', // 地图颜色
                          borderColor: '#ffffff' // 边框颜色
                      },
                      emphasis: { // 鼠标移入动态的时候显示的默认样式
                          borderWidth: 2, // 边框宽度
                          areaColor: '#909399' // 地图颜色
                      }
                  },
                  markPoint: {
                      /**
                       * 标记的图形，标记类型包括：'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
                       * 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
                       */
                      symbol: 'circle',
                      //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                      symbolSize: 6, 
                      //文字标签
                      label: {
                          show: false, //是否显示标签
                          position: 'top',//标签的位置
                          color: '#ffffff', //文字的颜色
                          fontSize: 12 //文字的字体大小
                      },
                      //标注的样式
                      itemStyle: {
                          opacity: 0.8,//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                          color: '#ffffff' //图形的颜色。支持使用rgb(255,255,255)，rgba(255,255,255,1)，#fff等方式设置为纯色，也支持设置为渐变色和纹理填充。
                      },
                      silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                      /**
                       * 标注的数据数组。每个数组项是一个对象：{ name: '舒兰市', coord: [126.97170, 44.41223], value: '78', symbolSize: 10, },
                       * name 标注名称
                       * coord 数据在相应坐标系上的坐标位置 经纬度值
                       * value 标注值，可以不设。
                       * symbolSize 标记的大小，可以单独设置每个标记的大小
                       */
                      data: markData
                  },
                  // 数据
                  data: seriesData
              }],
          }
          myChart.setOption(option)

          myChart.on('click', e => {
              this.darwProvniceMap(e)
          })
          window.addEventListener("resize", () => {
              myChart.resize()
          })
      },
      // 切换市
      darwProvniceMap(val) {
          this.currentCity = val.name
          if (this.province[val.name]) {
              let json = require(`@/json/${this.province[val.name]}.json`)
              this.drawMap(this.province[val.name], json)
              this.showButton = true
          }
      },
      // 返回吉林省
      reChinaMap() {
          this.currentCity = ""
          this.drawMap('jilin')
      }
  },
}
</script>

<style scoped>
.rest-button {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  border-radius: 6px;
  font-size: 14px;
  border: 1px #770928 solid;
  color: #770928;
  height: 30px;
  line-height: 28px;
  padding: 0 20px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.map,
.center-body {
  width: 800px;
  height: 600px;
  position: relative;
}
</style>

10、效果图