echarts 画中国地图及省份切换

您所在的位置：网站首页 › 中国地图及省份特点简介图片 › echarts 画中国地图及省份切换

echarts 画中国地图及省份切换

2024-07-01 02:54| 来源: 网络整理| 查看: 265

最近用 ehcarts 写了一个有关中国地图的需求，这篇文章来总结下基本的原理和用法。

Geojson

首先了解一下 GeoJSON ，看下维基百科的定义：

GeoJSON 是一种基于 JSON 的地理空间数据交换格式，它定义了几种类型 JSON 对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。

2015年，互联网工程任务组（IETF）与原始规范作者组建了一个 GeoJSON 工作组，一起规范 GeoJSON 标准。在2016年8月，推出了最新的GeoJSON数据格式标准规范(RFC 7946)。

GeoJSON 使用唯一地理坐标参考系统 WGS1984 和十进制度单位，一个 GeoJSON 对象可以是 Geometry, Feature 或者FeatureCollection.

其几何对象包括有点（表示地理位置）、线（表示街道、公路、边界）、多边形（表示国家、省、领土），以及由以上类型组合成的复合几何图形。

简单说就是通过坐标系来描述点、线、面，看几个例子就明白它们是什么了。

单个点："type": "Point"

多个点，"type": "MultiPoint"

多个线："type": "MultiLineString"

多个面："type": "MultiPolygon"

地图 Geojson

中国地图和省份的 geoJson 可以在 echarts-map 或者阿里的数据可视化中心进行下载。

echarts 4.x 的版本自带了一些 Geojson 的数据，在 node_modules/echarts/map/json 目录，但可能考虑到一些省区数据不能及时更新，echarts 5 版本就没有自带数据了。

让我们看一下全国地图中山西省的 geoJson 长什么样子。

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849{ "type": "FeatureCollection", "features": [ ... { ... } { "type": "Feature", "properties": { "adcode": 140000, "name": "山西省", "center": [112.549248, 37.857014], "centroid": [112.304436, 37.618179], "childrenNum": 11, "level": "province", "parent": { "adcode": 100000 }, "subFeatureIndex": 3, "acroutes": [100000] }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [110.379257, 34.600612], [110.424837, 34.588295], [110.488279, 34.610956], [110.533242, 34.583368], [110.610851, 34.607508], [110.710017, 34.605045], [110.749437, 34.65232], [110.791937, 34.649858], [110.824582, 34.615881], [110.883712, 34.64395], [110.903422, 34.669056], [110.920052, 34.730068], ... ] ] ] } }, { ... } ... ]}

整体是一个 "type": "FeatureCollection" ，然后有一个 features 数组保存所有省份，每一个都是 "type": "Feature" ，代表单个省份。包含 properties 属性和 geometry 属性。geometry 属性就是所有的坐标信息。

根据坐标信息，计算最大值和最小值的差值，按比例映射到 canvas 上的坐标，然后就可以画出来了，细节的话可以参考 b 站的这个视频。

echarts 画地图

安装 vue 和 echarts ，先来个简单的正方形。

12345678910111213141516171819202122232425{ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "name": "正方形" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ] ] ] } } ]}

然后用 echarts 做引入我们的 json 文件、通过 echarts.registerMap 注册 json 文件、设置 opitons 的series 属性。

123456789101112131415161718192021222324252627282930 import * as echarts from "echarts";import test from '../data/test'export default { name: "HelloWorld", props: { }, mounted() { var myChart = echarts.init(document.getElementById("main")); echarts.registerMap('mapName', test); // 注册地图 let option = { series: [ { type: "map", map: 'mapName', // 引入地图数据 }, ], }; myChart.setOption(option); },};

然后我们只需要到阿里的数据可视化中心把中国地图的 Geojson 数据下载下来，替换上边的 test.json 即可。

值得注意的是，如果我们设置注册的名字为 china ，echarts 会自动给我们加上南沙群岛的放大图：

1234567891011121314151617181920import * as echarts from "echarts";import china from '../data/china'export default { name: "HelloWorld", props: { }, mounted() { var myChart = echarts.init(document.getElementById("main")); echarts.registerMap('china', china); let option = { series: [ { type: "map", map: 'china', // 引入地图数据 }, ], }; myChart.setOption(option); },};

可能会用到的 options 属性

地图画出来以后，接下来可以照着 echarts 官网变身为「echarts 配置工程师」了，记得注意一下自己当前的 eharts 版本。

设置悬浮上的数据

我们在 series 中引入 data ，加一点随机数据，其中 name 值是 json 数据中的 properties 对应的 name ，名字一定要一致。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149const option = { ... series: [ { type: "map", map: "china", // 引入地图数据 name: "省份随机数据", data: [ { name: "北京市", value: 21, }, { name: "天津市", value: 12, }, { name: "上海市", value: 99, }, { name: "重庆市", value: 98, }, { name: "河北省", value: 99, }, { name: "河南省", value: 29, }, { name: "云南省", value: 79, }, { name: "辽宁省", value: 38, }, { name: "黑龙江省", value: 4, }, { name: "湖南省", value: 32, }, { name: "安徽省", value: 84, }, { name: "山东省", value: 72, }, { name: "新疆维吾尔自治区", value: 99, }, { name: "江苏省", value: 70, }, { name: "浙江省", value: 85, }, { name: "江西省", value: 11, }, { name: "湖北省", value: 62, }, { name: "广西壮族自治区", value: 13, }, { name: "甘肃省", value: 74, }, { name: "山西省", value: 78, }, { name: "内蒙古自治区", value: 74, }, { name: "陕西省", value: 40, }, { name: "吉林省", value: 9, }, { name: "福建省", value: 90, }, { name: "贵州省", value: 57, }, { name: "广东省", value: 6, }, { name: "青海省", value: 52, }, { name: "西藏自治区", value: 10, }, { name: "四川省", value: 98, }, { name: "宁夏回族自治区", value: 11, }, { name: "海南省", value: 25, }, { name: "台湾省", value: 86, }, { name: "香港特别行政区", value: 8, }, { name: "澳门特别行政区", value: 50, }, ], }, ], ...}

再补上 tooltip 选项。

1234567const option = { ... tooltip: { trigger: "item", }, ...}

视觉映射

我们可以通过 visualMap 选项，将数据分组。

1234567891011121314151617181920212223242526const option = { ... visualMap: { left: "right", min: 0, max: 100, inRange: { color: [ "#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026", ], }, text: ["High", "Low"], calculable: true, }, ...}

设置后之后，我们可以滑动右下角的范围来选取不同的省份。

除了滑块的映射，还支持分区间的，类似下边这种。

其他选项

其他选项这里就不介绍了，可以参考官网和社区的样例，然后结合自己的需求进行配置即可。

贴几张社区上炫酷的地图：

省份切换

下边再实现一下点击省份切换到对应的省份地图的功能。

知道了上边的东西，思路其实很简单了，我们只需要把所有省份的 Geojson 数据全部下载下来，然后监听 echarts 的点击事件去显示省份即可。

为了逻辑之间的解耦，我们可以再新建一个组件，专门展示省份的数据。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 import * as echarts from "echarts";export default { name: "Province", props: { fileName: String, }, data() { return { option: { series: [ { name: "省份数据", type: "map", map: "province", data: [], }, ], }, }; }, mounted() { this.initData(); }, methods: { initData() { try { const provinceJSON = require("../data/province/" + this.fileName); const myChart = echarts.init( document.getElementById("province") ); echarts.registerMap("province", provinceJSON); myChart.setOption(this.option); } catch (e) { alert(`暂无${this.fileName}数据`); this.$emit("toMap"); } }, },};

我们把省份数据都放到 "../data/province" 目录中，这里简单演示，只下载了两个省份的地图：

通过外部传进来文件的 fileName 注册地图。这里直接通过 require("../data/province" + this.fileName) 来动态引入 Geojson，一定要加上 "../data/province" 前缀来限制文件的位置，关于 webpack 的动态引入的更多细节可以参考 Webpack 打包 commonjs 和 esmodule 动态引入模块的产物对比。

我们增加一个 ProvinceMap 组件来调度两个组件的显示隐藏。

1234567891011121314151617181920212223242526272829303132333435363738394041424344 import Province from "./Province.vue";import Map from "./Map.vue";export default { name: "HelloWorld", components: { Province, Map, }, data() { return { showProvince: false, fileName: null, }; }, methods: { // 显示省份数据 toProvince({ fileName } = {}) { this.fileName = fileName; this.showProvince = true; }, // 显示全国地图 toMap() { this.showProvince = false; }, },};

在 Map 组件中监听省份的 click ，传递给 ProvinceMap 组件。

123456789initData() { var myChart = echarts.init(document.getElementById("main")); echarts.registerMap("china", china); const option = ....; myChart.setOption(option); myChart.on("click", (params) => this.$emit("toProvince", { fileName: params.name }) );},

在 Province 组件中监听 click，传递给 ProvinceMap 组件。

123456789101112131415initData() { try { const provinceJSON = require("../data/province/" + this.fileName); const myChart = echarts.init( document.getElementById("province") ); echarts.registerMap("province", provinceJSON); myChart.setOption(this.option); myChart.on("click", () => this.$emit("toMap")); } catch (e) { alert(`暂无${this.fileName}数据`); this.$emit("toMap"); }},

最后看一下实现的效果：

Kapture 2022-05-12 at 10.06.29

总

通过 GeoJSON 画 echarts ，知道大致的原理，然后其他配置项参考官网和社区的例子比对上配置项慢慢配置即可，文章的整体代码放到了 github，需要的同学可以参考。

ECharts 最初由百度团队开源，并于 2018 年初捐赠给Apache 基金会，2021 年 1 月 26 日晚，Apache 基金会官方宣布 ECharts 项目正式毕业，成为 Apache 顶级项目。

平时开发 Echarts ，我们就可以从「切图仔」变成「echarts 配置工程师了」，手动狗头。

【本文地址】

公司简介

联系我们