Echarts实现省级到市级地图下钻

在echarts社区里copy项目时，有符合需求的地图但是没有地图下钻，没办法看了看有地图下钻的项目想了一个比较简单的思路。
（这里不再赘述如何创建基本地图实例）
1.首先把对应城市的下级地区geoJson下载到本地。
这里给大家一个下载连接↓
https://www.makeapie.com/editor.html?c=xmCAi_XNuJ

这个思路主要是对查询的geoJson文件名进行改变，并不会影响地图下钻的动画效果，还是很流畅的。
uploadDataURL是地图查询用到的json地址，本思路就是改变uploadedDataURL的值。

    var uploadedDataURL = "json/nmg.geoJson"

2.在myCharts.on（myCharts也可能是echarts，取决于你到导入echarts时声明的变量名）上绑定click点击事件，params为获取到的城市数据，params.name则是params数据中的城市名，可以console.log打印一下params详细了解获取到的数据。这里用语法糖代替了switch或if else。

    myChart.on('click', function (params) {let map = {'呼和浩特市':'json/hohot.geoJson','包头市':'json/baotou.geoJson','巴彦淖尔市':'json/bayannaoer.geoJson','赤峰市':'json/chifeng.geoJson','鄂尔多斯市':'json/eerduosi.geoJson','呼伦贝尔市':'json/hulunbeier.geoJson','通辽市':'json/tongliao.geoJson','乌海市':'json/wuhai.geoJson','乌兰察布市':'json/wulanchabu.geoJson','锡林郭勒盟':'json/xilinguole.geoJson','兴安盟':'json/xinganmeng.geoJson','阿拉善盟':'json/alashan.geoJson',}uploadedDataURL = map[params.name]getResult();});

最后getResult()-（你的渲染方法）重新渲染页面。
*ps：如果有每次点击方法运行次数都会增多的情况，将myCharts.on方法拿出来(比如不要放在getResult()里面)进行解耦。

Echarts实现省级到市级地图下钻相关推荐

vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Echarts使用map3D+visualMap 实现地图下钻，区域高亮状态下变高
想要实现3D地图省市区下钻,地图区域用不同颜色区分数值大小,当hover区域时,当前区域变高,点击下钻 js核心代码 data() {return {cityData,mapData,cityLis ...
echarts初始化显示到市级地图
今天有个项目需要地图初始化展示到市级地图,我们采用echats将省.json文件合并到了china.json文件中,实现了初始化地图到市的效果如下: 不显示市名称看着效果更清爽些! label: {n ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题
目录先看实现效果:编辑步骤一安装echarts和echarts-gl 步骤二设置地图容器在methods中设置初始化地图方法并在mounted中调用在methods中设置初始化地图方法 ...
echarts 5.4 版本 map 地图下钻，显示南沙群岛缩略图，海南三沙市编辑隐藏
需求:渲染中国地图,支持下钻,同时南沙群岛显示在地图右下脚,三沙市边界隐藏 geoJson 数据可从阿里云-dataV-下载如果要展示南海诸岛需要将地图类型设置为china, 将海南省中的三沙市 ...
VUE echarts绘制省级/市级地图自动轮循tooltip
效果图绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
vue中基于echart地图功能省级地图下钻和返回、发射线、水波涟漪等功能展示
效果图展示-包含水波涟漪.发射线功能效果图点击地市.区县下钻功能 vue项目中main.js import echarts from 'echarts' import anhui from '../ ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...

Echarts实现省级到市级地图下钻

Echarts实现省级到市级地图下钻相关推荐

最新文章

热门文章