【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓
要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的。
但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现
第一步 查阅官方文档你会知道这是echarts在使用geojson绘制svg图像,geojson的开发规范是固定的,参考http://geojson.org/ ,这应该是开发地理svg图像的官方网站吧, 在这里所说的要参考不是让你自己参考规范写json,仅仅明白规范内容就可以了。
第二步 下载world.json 然后和china.json进行合并,合并时要注意world.json的json格式,也就是要参考geojson的规范,避免格式错误。
关键的一点要明白:一般人的概念里会认为中国当然要去包含这些省份,而在事实上,china与各省份是同一层级的.
在这里 我把我合并好的json文件放在了download.csdn.net/download/dream361/9655095 大家可以去下载直接使用
第三步 合并之后的json要被调用到 这里使用了 jQuery的get的方法来从前端异步获取。
$.get(
"world.json的url",
null,
function(data,status){
echarts.registerMap(data,''world);
option = {
geo:{
type:'world'
//声明为world 和registerMap(data,'world')一致
}
};
},'json');
这三步就把问题搞定了
【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓的更多相关文章
- echarts 如何在世界地图中绘制中国地图
1.导入 world.china.js 这个js是将world.js 文件 以及china.js文件进行合并 (网上一些中国地图勾勒的身份曲线感觉很飘 所以自己加工了一下china.js中的数据, ...
- Javascript实战开发:教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
- 用matlab绘制中国地图
reference:https://jingyan.baidu.com/article/870c6fc36fdacfb03ee4be58.html shp: http://muchong.com/ht ...
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
.Net Core ORM选择之路,哪个才适合你 因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第七章:在Direct3D中绘制(二)
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第七章:在Direct3D中绘制(二) 代码工程地址: https:/ ...
- Android 绘制中国地图
最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...
- MATLAB中绘制质点轨迹动图并保存成GIF
工作需要在MATLAB中绘制质点轨迹并保存成GIF以便展示. 绘制质点轨迹动图可用comet和comet3命令,使用例子如下: t = 0:.01:2*pi;x = cos(2*t).*(cos(t) ...
- CSharpGL(6)在OpenGL中绘制UI元素
CSharpGL(6)在OpenGL中绘制UI元素 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立的Demo,更适合入 ...
- HTML5在canvas中绘制复杂形状附效果截图
HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...
随机推荐
- Java 用Freemarker完美导出word文档(带图片)
Java 用Freemarker完美导出word文档(带图片) 前言 最近在项目中,因客户要求,将页面内容(如合同协议)导出成word,在网上翻了好多,感觉太乱了,不过最后还是较好解决了这个问题. ...
- 【PHP】PHP面向对象编程--phpOOP入门
PHP从入门到精通 之PHP的面相对象编程 面向对象编程(Object Oriented Programming, OOP, 面向对象程序设计)是一种计算机编程架构,OOP的一条基本原则是计算机程序 ...
- 是什么优化让 .NET Core 性能飙升?
.NET Core(开放源代码,跨平台,x-copy可部署等)有许多令人兴奋的方面,其中最值得称赞的就是其性能了. 感谢所有社区开发人员对.NET Core做出的贡献,其中的许多改进也将在接下来的几个 ...
- Rsync:一个很实用的文件同步命令
sync是Linux系统下的文件同步和数据传输工具,可用于同步文件.代码发布 1.安装. yum install -y xinetd yum insatll -y rsync 2.配置 打开rsync ...
- JavaScript 之 HelloWorld编写
HelloWorld.html 代码如下: <html><body><script type="text/javascript">documen ...
- 采用HTML5之"data-"机制自由提供数据
周末总是过得很快,又到了跟代码亲密接触的日子,我在北京向各位问好,今天我分享一点关于前端的东西,HTML5之标签"data-*"自定义属性的值传递. 在过去学习JavaScript ...
- UglifyJS-- 对你的js做了什么
也不是闲着没事去看压缩代码,但今天调试自己代码的时候发现有点意思.因为是自己写的,虽然压缩了,格式化之后还是很好辨认.当然作为min的首要准则不是可读性,而是精简.那么它会尽量的缩短代码,尽量的保持一 ...
- (转)$.extend()方法和(function($){...})(jQuery)详解
1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
- FaceRank-人脸打分基于 TensorFlow 的 CNN 模型
FaceRank-人脸打分基于 TensorFlow 的 CNN 模型 隐私 因为隐私问题,训练图片集并不提供,稍微可能会放一些卡通图片. 数据集 130张 128*128 张网络图片,图片名: 1- ...
- 框架 之 -------Spring
目录一.Spring工作原理 二.为什么要用Spring三.请你谈谈SSH整合四.介绍一下Spring的事务管理五.什么是依赖注入,依赖注入的作用是什么? 六.什么是AOP,AOP的作用是什么? 七. ...