--- theme: channing-cyan highlight: agate --- # echarts地图功能 ***本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856/ "https://juejin.cn/post/7207698564641996856/")*** >介绍：本文实现echarts地图功能有：geojson获取数据、渐变色、地图描边、添加地区名字、地区名标点、点击空白区域取消选中地图状态。以下功能使用vue代码展示。以下代码每一个步骤都是关联的。 ## 1.geojson获取数据渲染地图 **index.vue** ```js

```
**data.js** ```js import {reactive} from "vue"; export const option = reactive({ geo: { show: true, // 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应 map: '佛山市', // 文字是否显示 label: { show: false }, aspectScale: 1, //长宽比 zoom: 1.1, }, }) ``` 1. 这里使用了geo配置项： - 作用：地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。但是它的数据是基于`地理坐标`的。`geo` 组件可以绘制全球范围的地图，也可以绘制各种国家、地区的地图。在使用 `geo` 组件时，需要提供地理坐标系的相关配置，如投影方式、缩放、中心位置等。通过 `geo` 组件，可以在地图上展示各种数据的分布情况。
**geojson文件** ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/977d8a68c9a64cb18d5762fa9b284212~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1522&h=463&e=png&b=2c2c2c) **效果图** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c8d9b0c0c8b4ecba076118ac8b76464~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=664&h=542&e=png&b=fcfcfc) ## 2.地图渐变色 **data.js** ```js import {reactive} from "vue"; export const option = reactive({ geo: { show: true, // 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应 map: '佛山市', label: { show: false }, aspectScale: 1, //长宽比 zoom: 1.1, // 渐变色 itemStyle: { borderColor: '0BC265', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感 borderWidth: 0,//设置外层边框 areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.9, // 关键代码会从offset：0到offset：1去过渡。 // 我们可以增加其中的过渡颜色，在0和1之间加就行。 // 比如：{ // offset: 0.5, color: 'green' // }, colorStops: [ { offset: 0, color: '#0a3288' }, { offset: 1, color: 'rgba(27,130,183,1)' } ], global: false }, }, }, }) ``` **效果图** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cbd396dfc24446e1b6ece5ff7a5f1715~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=547&h=502&e=png&b=ffffff) ## 3.地图描边和添加地区名字 - 在series中添加一个map图层，对该图层进行操作即可。
**data.js** ```js import {reactive} from "vue"; export const option = reactive({ geo: { show: true, // 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应 map: '佛山市', label: { show: false }, aspectScale: 1, //长宽比 zoom: 1.1, // 渐变色 itemStyle: { borderColor: '0BC265', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感 borderWidth: 0,//设置外层边框 areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.9, // 关键代码会从offset：0到offset：1去过渡。 // 我们可以增加其中的过渡颜色，在0和1之间加就行。 // 比如：{ // offset: 0.5, color: 'green' // }, colorStops: [ { offset: 0, color: '#0a3288' }, { offset: 1, color: 'rgba(27,130,183,1)' } ], global: false }, }, }, series: [ { zoom: 1.1, aspectScale: 1, shading: 'realistic', name: "地图", map: "佛山市", selectedMode: 'single',//选择类型, hoverable: true,//鼠标经过高亮 type: "map", // 鼠标移入的样式 emphasis: { label: { show: true, color: 'white', fontSize: 16, }, itemStyle: { borderColor: '#0BC265', borderWidth: 4, areaColor: null, }, }, // 选中的样式 select: { label: { color: 'white', fontSize: 16, } }, // 地图样式 itemStyle: { areaColor: 'rgba(0,0,0,0)', borderWidth: 1, borderColor: '#0BC265', }, // 文字默认样式 label: { show: true, color: '#fff', fontSize: 16, distance: 20, }, }, ], }) ```
**geojson文件** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1ef02d7175364a71a1575325e5dea81d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1476&h=454&e=png&b=2c2c2c) - 要让地图上展示地区名字，这里必须在properties的对象里面，写入name这个key值才可以。
**地图展示** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/eab967fa101544879be606e9b557f7d9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=524&h=496&e=png&b=ffffff) ## 4.地区标点 - 地区旁边标点:在series数组中添加多一个对象即可。 - 作用：相当于添加多一个图层，这个图层专门来标点。
**data.js** ```js // 标点 { name: "地图", map: "佛山市", // 这个必须写上，否则无法对应地理坐标 coordinateSystem: 'geo', // 散点图 type: "scatter", // 标点的样式 itemStyle: {color: 'red'}, // 标点的数据 // 下面的value值是下面地区的中心经纬度，因为我想把点标在地区中心 // 这些点的值如何来的？ // 1.地区的中心点 // 2.如果没有，从geojson文件中找到对应地区的点（随便一个），把点进行手动调试，把中心点调试出来 data: [ { name: '禅城区', value: [113.055332, 22.999999] }, { name: '三水区', value: [112.905332, 23.296666] }, { name: '高明区', value: [112.655332, 22.796666] }, { name: '南海区', value: [113.055332, 23.111999] }, { name: '顺德区', value: [113.175332, 22.859999] }, ], }, ``` **效果图** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b9075fd388d4cfea7885db579fca95a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=545&h=517&e=png&b=ffffff) ## 5.点击空白区域取消选中 **index.vue** ```js ``` **效果图** ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b6dd942aeaa435d8aa71104bb7757e6~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=850&h=565&e=png&b=ffffff) ## 6.所有代码 **index.vue** ```js ``` **data.js** ```js import {reactive} from "vue"; export const option = reactive({ geo: { show: true, // 这个名字要和echarts.registerMap("佛山市", {geoJSON: data}) 相对应 map: '佛山市', label: { show: false }, aspectScale: 1, //长宽比 zoom: 1.1, // 渐变色 itemStyle: { borderColor: '0BC265', shadowColor: '#182f68', shadowOffsetX: 0, shadowOffsetY: 20, //这里可以设置一下Y轴的阴影，比较有层次感 borderWidth: 0,//设置外层边框 areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.9, // 关键代码会从offset：0到offset：1去过渡。 // 我们可以增加其中的过渡颜色，在0和1之间加就行。 // 比如：{ // offset: 0.5, color: 'green' // }, colorStops: [ { offset: 0, color: '#0a3288' }, { offset: 1, color: 'rgba(27,130,183,1)' } ], global: false }, }, }, series: [ { zoom: 1.1, aspectScale: 1, shading: 'realistic', name: "地图", map: "佛山市", // aspectScale: 1.0, selectedMode: 'single',//选择类型, hoverable: true,//鼠标经过高亮 type: "map", // 鼠标移入的样式 emphasis: { label: { show: true, color: 'white', fontSize: 16, }, itemStyle: { borderColor: '#0BC265', borderWidth: 4, areaColor: null, }, }, // 选中的样式 select: { label: { color: 'white', fontSize: 16, } }, // 地图样式 itemStyle: { areaColor: 'rgba(0,0,0,0)', borderWidth: 1, borderColor: '#0BC265', }, // 文字默认样式 label: { show: true, color: '#fff', fontSize: 16, distance: 20, }, }, // 标点 { name: "地图", map: "佛山市", // 这个必须写上，否贼无法对应地理坐标 coordinateSystem: 'geo', // 散点图 type: "scatter", // 标点的样式 itemStyle: {color: 'red'}, // 标点的数据 // 下面的value值是下面地区的中心经纬度，因为我想把点标在地区中心 // 这些点的值如何来的？ // 1.地区的中心点 // 2.如果没有，从geojson文件中找到对应地区的点（随便一个）， // 把点进行手动调试，把中心点调试出来 data: [ { name: '禅城区', value: [113.055332, 22.999999] }, { name: '三水区', value: [112.905332, 23.296666] }, { name: '高明区', value: [112.655332, 22.796666] }, { name: '南海区', value: [113.055332, 23.111999] }, { name: '顺德区', value: [113.175332, 22.859999] }, ], }, ], }) ``` ## 7. geo和series中map的区别： 1. `geo` 组件：`geo` 组件用于绘制地理坐标系上的图表。它可以绘制各种类型的图表，如散点图、线图和柱状图等，但是它的数据是基于地理坐标的。`geo` 组件可以绘制全球范围的地图，也可以绘制各种国家、地区的地图。在使用 `geo` 组件时，需要提供地理坐标系的相关配置，如投影方式、缩放、中心位置等。通过 `geo` 组件，可以在地图上展示各种数据的分布情况。 2. `map` 组件：`map` 组件用于绘制预定义的地图，它内置了一些常见的地图数据，如中国地图、世界地图等。与 `geo` 不同，`map` 组件的数据是基于地图的区域进行的，而不是地理坐标。`map` 组件提供了一些预定义的地图数据，可以直接使用，无需手动配置地理坐标系。通过 `map` 组件，可以在地图上展示各个区域的数据情况。 3. 总结来说，`geo` 组件适用于自定义的地理数据可视化，可以根据需要配置地理坐标系，绘制各种类型的图表；而 `map` 组件适用于预定义的地图数据可视化，提供了一些常见地图的数据，方便快速展示各个区域的数据情况。 **全文总结** 1. 本文介绍：geojson获取数据、渐变色、地图描边、添加地区名字、地区名标点、点击空白区域取消选中地图状态功能实现。 2. 代码解释都通过注释的方式说明，每一行关键代码上方都添加了注释，请仔细观看注释。 3. 有什么问题可以下方留言或者私信哦。