使用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> & ...
随机推荐
- eclipse提交到git
前言 今天是我正式加入GitHub的第一天,作为世界上最大的同性交友社区,以push和pull出名的它,让我坠入其中并无法自拔,废话不多说,上教程: 步骤一 首先,你需要注册一个github账号,相信 ...
- maven将依赖依赖打包到jar中
通过maven-assembly-plugin插件可以实现将依赖jar包打包到自己的jar包中的需求,只需要在pom.xml中配置该插件即可,配置如下: <build> <plugi ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- VR技术了解(作业)
增强现实技术 概念:将现实世界和虚拟世界无缝集成的新技术. 突出特点: 真实世界与虚拟的信息集成 实时交互 三维空间中增添定位虚拟物 应用 医疗领域:医生可以利用增强现实技术,轻易地进行手术部位的精确 ...
- Django+MongoDB批量插入数据
在百万级和千万级数据级别进行插入,pymongo的insert_many()方法有着很强的优势.原因是每次使用insert_one()方法进行插入数据,都是要对数据库服务器进行一次访问,而这样的访问是 ...
- git 入门教程之里程碑式标签
"春风得意马蹄疾,一日看尽长安花",对于项目也是如此,最值得期待的恐怕就要数新版本发布的时刻了吧?每当发布新版本时要么是版本号命名(比如v0.0.1)或者代号命名(比如Chelse ...
- git 入门教程之实战 git
实战 git git 是一款分布式版本控制系统,可以简单概括: 不要把鸡蛋放在一个篮子里,你的一举一动都在监视中. 实战场景 你作为某项目的其中一员或者负责人,和小伙伴们一起开发,大家既有着各自分工互 ...
- springboot 学习之路 2(注解介绍)
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
- java后台打开浏览器代码
import java.awt.Desktop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxE ...
- [转] Scala Try 与错误处理
一.概述 当你在尝试一门新的语言时,可能不会过于关注程序出错的问题, 但当真的去创造可用的代码时,就不能再忽视代码中的可能产生的错误和异常了. 鉴于各种各样的原因,人们往往低估了语言对错误处理支持程度 ...