一个让echarts中国地图包含省市轮廓的技巧

背景知识及应用简介

本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的。有前端基础和以及对ECharts有了解的人基本可以读懂本文。

可能官方也提供过整体的地图库,但可能个人能力有限,并没有找到相关信息或者其他解决方案,如果知道的园友请告诉我。

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

上句话摘自ECharts的官方文档。ECharts支持许多图表类型,而在用到其中的地图组件时,官方提供了许多地图库数据,每种地图数据都提供了Js和JSON两种存储方式,下载地址:http://echarts.baidu.com/download-map.html

如果链接失效自行去Echarts官网找吧。

遇到的问题

百度提供的地图组件支持放大缩小,而本人遇到的需求是,在中国地图放大后能在中国地图轮廓内看到省内的轮廓信息。而无论是上面的预览图还是地图的实际效果,都是:世界地图有所有国家的轮廓,但没有每个国家内的轮廓信息;中国地图有省级行政区的轮廓,但没有省级行政区内进一步的轮廓信息。

具体点的例子,如果载入是中国地图数据,放大后如下图:

图中能看到江苏省和上海市的轮廓图,但是想进一步看江苏省内各市或者上海市内各区的轮廓那就做不到了,除非重新载入省市的地图,但这样就脱离了中国的大地图轮廓。

解决方案

没找到其他方案最后转为研究地图数据本身来,这里我用了上海的地图数据,分别打开了china.json和shanghai.json,这两个文件都可以从ECharts的地图库数据页面上下载到。对比其中的Json数据结构。(这里我使用了在线Json工具网站json.cn

(左边是json原数据,右边是折叠过的数据结构)

china.json

shanghai.json

从两张图可以发现其数据是类似的,其中china.json的features有34条数据,应该是代表中国34个省级行政区;shanghai.json的features有17条数据,代表上海17个区域。

于是,我不关心features里面每一项的结构是什么,把两个json合并一下(features的数据合并一下)。

现在是51条数据,那么载入这个地图数据,放大上海区域看看效果:

看起来可以了。(除了边缘,边缘问题是上海地图和中国地图在上海部分并不能完全重合的原因吧)(文字密集问题先忽略吧,可以用其他方法规避)

同理,如果想要弄其他省市信息,就要下载其他省市的地图数据,合并到china.json中。

这样做虽然解决了问题,但还是有些缺点:

1.地图数据会过大

2.部分边缘重合问题

3.多级行政层都合并到第一层(也许算优点)

时间: 2024-10-10 06:29:31

一个让echarts中国地图包含省市轮廓的技巧的相关文章

Echarts 中国地图(包括china.js文件)

用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 1 <!DOCTYPE html> 2 <html> 3 <head> 4 首先,引入jquery.js echarts.js china.js(必要) 5 <script src="/jquery.js"></script> 6 <script src="ech

echarts中国地图3D各个城市标点demo

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">    <title>3D中国</title>    <script src="js/jquery.min.js">

echarts中国地图描绘

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>首页</title> &l

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区

最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等.        这篇文章主要是通过Echarts可视化介绍入门知识.中国地图和贵州地区各省份的数据分析.其中贵州地图才是这篇文章的核心内容.这是一篇入门文章,希望对您有所帮助,如果文章中存在不足之处,还请海涵~        官网地址:http://echarts.baidu.com/index.html 一. 入门介绍-第一张图 强烈推荐大家阅读官网的教程进

echarts实现中国地图数据展示

在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地图的JS文件,可以在网盘下载,链接: https://pan.baidu.com/s/1j_edGU2ka9YeHBTErqDWdg 密码: ft9n 也可以在github上克隆下来:https://github.com/Luna829/incubator-echarts/blob/master/m

echarts画中国地图并上色

任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool.cn/echarts_tutorial/ 如果是写论文作图需要添加应用哦 最终效果如下: 参考了这个网址:https://www.cnblogs.com/luna666/p/9007263.html 另外还有个百度官方的例子:http://www.echartsjs.com/gallery/edi

R语言和中国地图

上图是R语言绘制的按地域分布的数据图.更科学,更严谨,也更有质感的样子. 今天瞎写点东西,我在想数据分析的意义是什么,也许就是研究事物存在的形式.而事物存在的形式是什么样子呢,从最初的三维空间,爱因斯坦伯伯把时间也拉了进来,于是时间作为一种变化的空间而存在着,成为第四维.现在好像还发现了第五空间,可能是人的心理空间或者意识空间,还有人说是曲率,不一而足.个人认为i,所有的事物应该都是彼此联系的,没有单纯的独立的与其他东西绝缘的存在.而人的内心,人的思维目前确实是独立于其他四维的空间.所以他应该是

Javascript实战开发:教你使用raphael.js绘制中国地图

最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大家分享如何使用js来完成地图交互. 先简单介绍下raphael.js,raphael.js是一个很小的javascript库,它可以在网页中实现绘制各种矢量图.各类图表.以及图像裁剪.旋转.运动动画等等功能.此外raphael.js还跨浏览器兼容,而且还兼容老掉牙的IE6啊.raphael.js的官

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind