需求:在报表显示世界地图,国外显示到国家,国内显示到省份。
分析:由于之前系统中所有的报表都是用Echarts做的,所以决定世界地图也用Echarts来做,查了一下Echarts网方网站,貌似和地图有关的Demo都已关闭(API尚在);查了一些资料,发现Echarts支持的地图大都只显示到国家,如下图。很明显不符合我们的需求,对于我这个半屌子前端,着实费了好大精力,好在查到了Echarts是可以支持自定义,这里记录一下,供有需求同学参考。
w-m-0.png
1、简述地图坐标加载的两种方式
第一种:通过动态从后台加载,这里可以参考Echarts API文档,这里后台的数据要以JSON格式返回
$.get('map/json/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
});
//https://echarts.baidu.com/option.html#geo.map
第二种:比较简单,就是直接在页面上引入js文件,这里改造前用的是world.js,改造后用的是world_new.js文件。
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/world.js"></script>
//<script type="text/javascript" src="js/world_new.js"></script>
这里采用引入JS的方式作示例说明,后面我会把两个JS都附上。
2、改造world.js
大家可以自行下载world.js文件打开看一下源码,这里只拿出一行核心代码说明,registerMap里面的world.json就是我们要自定义的json(原world.js中world.json参数位置坐标是不包含中国省份的),这里我们要做的就是把中国省份地理坐标加入,因为registerMap支持的是标准的geo坐标系(不了解的可自行搜索),关于中国省份的坐标,大家可以从网上自行下载china.js,很容易找到,记得要稍微转换一下格式。
  echarts.registerMap('world', world.json);
  改造后
  echarts.registerMap('world', world_new.json);
改造后的效果如下:
w-m-1.png
3、打包下载
链接:https://pan.baidu.com/s/1xazTcjHyGOKQsi-jyRe6eA
提取码:kapq
若链接莫名失效,可以留言联系,也可以按照上述的方式自行改造一下,包中有一份世界地图中的中国坐标供参考。
网友评论