一、实现效果

• 使用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.nameif (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.currentCitylet seriesData = []let markData = []if (currentCity) {let tempData = this.mapData.filter(x => x.name == currentCity)seriesData = tempData[0]?.mapArea} else {seriesData = this.mapDatathis.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.nameif (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、效果图