使用ECharts来实现地图下钻功能(某省的市级下钻到县级)
- var cityMap = {
- "长沙市": "430100",
- "株洲市": "430200",
- "湘潭市": "430300",
- "衡阳市": "430400",
- "邵阳市": "430500",
- "岳阳市": "430600",
- "常德市": "430700",
- "张家界市": "430800",
- "益阳市": "430900",
- "郴州市": "431000",
- "永州市": "431100",
- "怀化市": "431200",
- "娄底市": "431300",
- "湘西土家族苗族自治州": "433100"
- };
- var curIndx = 0;
- var mapType = [];
- var mapGeoData = require('echarts/util/mapData/params');
- for (var city in cityMap) {
- mapType.push(city);
- // 自定义扩展图表类型
- mapGeoData.params[city] = {
- getGeoJson: (function (c) {
- var geoJsonName = cityMap[c];
- return function (callback) {
- $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
- }
- })(city)
- }
- }
- var ecConfig = require('echarts/config');
- var zrEvent = require('zrender/tool/event');
- document.getElementById('main').onmousewheel = function (e){
- var event = e || window.event;
- curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
- if (curIndx < 0) {
- curIndx = mapType.length - 1;
- }
- var mt = mapType[curIndx % mapType.length];
- option.series[0].mapType = mt;
- option.title.subtext = mt + ' (滚轮或点击切换)';
- myChart.setOption(option, true);
- zrEvent.stop(event);
- };
- myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
- var mt = param.target;
- var len = mapType.length;
- var f= false;
- for(var i=0;i<len;i++){
- if(mt == mapType[i]){
- f =true;
- mt=mapType[i];
- }
- }
- if(!f){
- mt='湖南';
- }
- option.series[0].mapType = mt;
- option.title.subtext = mt + ' (滚轮或点击切换)';
- myChart.setOption(option, true);
- });
- option = {
- title: {
- text : '全国344个主要城市(县)地图 by Pactera 陈然',
- link : 'http://www.pactera.com/',
- subtext : '长沙市 (滚轮或点击切换)'
- },
- tooltip : {
- trigger: 'item',
- formatter: '滚轮或点击切换<br/>{b}'
- },
- series : [
- {
- name: '全国344个主要城市(县)地图',
- type: 'map',
- mapType: '湖南',
- selectedMode : 'single',
- itemStyle:{
- normal:{label:{show:true}},
- emphasis:{label:{show:true}}
- },
- data:[]
- }
- ]
- };
- 将上面部分代码复制,然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中,然后点击刷新,即可看到效果。
2.其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件,然后执行循环将city对应的县级数据加载到param.js文件中
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code
使用ECharts来实现地图下钻功能(某省的市级下钻到县级)的更多相关文章
- 第三方工具 - 关于echarts下钻功能的一些总结.js
废话:好久没有写博客了,每每看着自己的'战绩'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享. ---------------------------$O_O$--- ...
- (十八)WebGIS中清空功能和地图定位功能的设计以及实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 [源码下载]
相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修正版[ZMap.js] 实例源码! ZMap.js 本类方法功能大多使用 ...
- 百度地图整合功能分享修正版[ZMap.js] 实例源码!
ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...
- ArcGIS API for Silverlight实现地图测距功能
原文:ArcGIS API for Silverlight实现地图测距功能 问题:如何实现地图测距功能? 地图工具栏 <Grid x:Name="gToolMenu" Hei ...
- 百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例
百度地图 api 功能封装类 (ZMap.js) 本地搜索,范围查找实例 相关说明 1. 界面查看: 吐槽贴:百度地图 api 封装 的实用功能 [源码下载] 2. 功能说明: 百度地图整合功能分享修 ...
- js实现地图打印功能
注意:js对地图的打印功能在arcgis10.1中才有提供,所以如果要使用esri自带的地图打印功能,必须使用arcgis 10.1或更高版本的地图打印模板.(由于官网和arcgis desktop提 ...
- vue-cli +echarts-amap集成echarts和高德地图TypeError: Cannot read property 'dataToPoint' of null解决方案
由于项目的需求,需要做一种迁徙效果, 最后我们采用了组件化开发,可以说这个坑自己一个人踩,有点累,但也收获不少. vue-cli +echarts-amap集成echarts和高德地图,出现报错,错误 ...
- 百度地图API功能
984aca5bc78b070e59f34e230f11cf6d http://api.map.baidu.com/api?v=2.0&ak=您的密钥" <html> & ...
随机推荐
- 8张图让你一步步看清 async/await 和 promise 的执行顺序
摘要: 面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3749 Fundebug经授权转载,版权归原作者所有. 为什么写这篇文章? 说实 ...
- 事件处理程序(HTML)
HTML事件处理程序 通过设置HTML标签特性来绑定事件处理程序. 处理方式(如图): 1:会创建一个封装元素属性值的函数 2:会在这个函数中创建一个event事件对象 <form> &l ...
- Laravel条件查询数据单条数据first,多条数据get
使用DB查询,必须use Illuminate\Support\Facades\DB; 多数组条件查询单条数据 first() //提交加入我们数据 public function ajax_join ...
- react-conponent-secondesElapsed
<!DOCTYPE html> <html> <head> <script src="../../build/react.js">& ...
- Oracle11g: simple sql script examples
---https://docs.oracle.com/cd/B19306_01/server.102/b14200/statements_8003.htm drop user geovin; drop ...
- Linux配置防火墙端口 8080端口
1.查看防火墙状态,哪些端口开放了 /etc/init.d/iptables status 2.配置防火墙 vi /etc/sysconfig/iptables ################# ...
- Human Motion Analysis with Wearable Inertial Sensors——阅读1
Human Motion Analysis with Wearable Inertial Sensors——阅读 博主认为对于做室内定位和导航的人这是一篇很很棒的文章,不是他的技术很牛,而是这是一篇医 ...
- Mysql 常用数据类型
double:浮点型,double(5,2) 表示最多5位,必须包含两位小数,最大值是 999.99 char:定长字符串类型,char(10) 表示必须放 10 的字节,没有就用空格补充 varch ...
- GDPR 和个人信息保护的小知识
从2018年5月25日起,欧盟的<通用数据保护条例>(简称 GDPR,General Data Protection Regulation)开始强制施行.这个规范加强了对个人信息的保护,并 ...
- 章节五、2-Package包和权限修饰符
一.Package包 为了更好的组织类,java提供了包机制,用于区别类名的命名空间. 包的作用: 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了 ...