一、实现效果
- 使用echarts实现省市地图绘制
- 根据数据不同显示不同区域颜色
- 实现省市地图下钻效果
- 实现地图上根据经纬度打点
二、实现方法
1、安装echarts插件
npm install echarts --save
2、获取省市json数据
https://datav.aliyun.com/portal/school/atlas/area_selector
通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。
3、地图经纬度数据
经度和纬度常合称为经纬度，把地球球面上的经纬度显示在平面地图上需要采用某种地图投影。
与之相关的地理坐标系一般是指由经度、纬度和相对高度组成的坐标系，能够标示地球上的任何一个位置。
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 } },
三、实例代码已上传，去顶部可下载
附全部代码
<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>
四、效果展示
