概述

本文讲述在echart下基于行政区划的地图逐级钻取功能。主要实现：
1、点击地图展示下一级地图；
2、通过区域导航可返回上一级地图；

效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>map</title><style>html, body, #map{margin: 0;padding: 0;overflow: hidden;width: 100%;height: 100%;}.zone-nav{position: absolute;top:10px;left: 10px;padding: 5px 10px;z-index: 99;background: #fff;box-shadow: 1px 1px 2px #ccc;border-radius: 4px;}.zone-nav a{font-size: 13px;text-decoration: none;color: black;}</style>
</head>
<body>
<div class="zone-nav" id="nav"><a href="#" id="boundry" title="全国" index="0">全国</a><a href="#" id="province" index="1"></a><a href="#" id="city" index="2"></a>
</div>
<div id="map"></div>
<script src="../../plugin/jquery/jquery-3.1.1.min.js"></script>
<script src="../../plugin/echart3/echarts-all-3.js"></script>
<script>var mapDatas = {"全国": "china.json",};var index = 0,chart = null;addMap("全国");$("#boundry, #province, #city").on("click", function () {index = parseInt($(this).attr("index"));addMap($(this).attr("title"));});function addMap(zone) {switch (index){case 1:{$("#province").html(">>"+zone).attr("title", zone);$("#city").html("");break;}case 2:{$("#city").html(">>"+zone).attr("title", zone);break;}default:{$("#province").html("");$("#city").html("");break;}}if(chart) chart.dispose();chart = echarts.init(document.getElementById('map'));chart.on('click', function (result) {index++;if(index<3){addMap(result.name);}});var url = "./mapdata/";if(index===1){//省级url+="geometryProvince/";}else if(index===2){url+="geometryCouties/";}url+=mapDatas[zone];$.get(url, function (mapdata) {var features = mapdata.features;for(var i=0;i<features.length;i++){var feature = features[i];if(!mapDatas[feature.properties.name]){var jsonfile = feature.properties.id;if(index===1) jsonfile+="00";mapDatas[feature.properties.name] = jsonfile + ".json";}}echarts.registerMap(zone, mapdata);chart.setOption({roam: true,series: [{type: 'map',map: zone,scaleLimit: { min: 0.8, max: 1.9 },//缩放mapLocation:{y:60},itemSytle:{emphasis:{label:{show:false}}},label: {normal: {show: true},emphasis: {show: true}},data : []}]});});}
</script>
</body>
</html>

说明：

数据组织结构如下
├─mapdata
│ ├─china.json
│ ├─geometryCouties
│ │ ├─110100.json
│ │ ├─120100.json
│ │ └─…
│ ├─geometryProvince
│ │ ├─11.json
│ │ ├─12.json
│ │ └─…

2. 数据和源代码可从地址获得。

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式

类型	内容
qq	1004740957
公众号	lzugis15
e-mail	niujp08@qq.com
webgis群	452117357
Android群	337469080
GIS数据可视化群	458292378

“GIS讲堂”知识星球开通了，在星球，我将提供一对一的问答服务，你问我答，期待与你相见。

echart实现地图的逐级钻取相关推荐

Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
echart中国地图，多地图案例
1.echart,在网页中加载中国地图的方法,直接附上html代码 <!DOCTYPE html> <head><meta charset="utf-8&quo ...
基于echart青海省地图资源的修改体验
基于echart青海省地图资源的修改体验最近老用echart做首页展示地图,本来都还很正常,却遇到了奇怪的甲方需求. 在青海省下8个同级行政区内,把唐古拉山镇部分独立划分出来和这8个平级. 什么也不 ...
Echart之地图使用方法及问题，地图大小和占比
Echart之地图使用方法及问题,地图大小和占比 1.到官网下载地图的js和json文件地址 http://echarts.baidu.com/download-map.html 2.上代码,数据 ...
echarts地图api series_ECharts地图绘制和钻取简易接口详解
1.地图绘制过程原理给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成中国以及省市县等地图的基础数据可以从这里生成与下载. ht ...
地图飞线图 echart+高德地图实现
前提:其实这个东西已经做了很久了,但是因为昨天他突然不显示了,所以重新整了一下实现效果: 一.引入echart的两个js和高德地图  <scri ...
echart湖南地图
最近项目中用到echart地图组件,湖南地图完整版本(提供下坠功能),供大家参考. 1.对地图数据进行注册,制定mapId. echarts.registerMap(mapId,json坐标数据项); ...
基于大数据的房价分析--3.echart+百度地图实现数据可视化
要实现的是在百度地图中画出房屋散点图,能进行区域选择,动态刷新显示该区域的房价数据雷达图,具体效果如下 1.在echarts中集成百度地图要使用百度地图,必须要有开发者AK和百度地图js包 < ...
echart中国地图
想做个中国地图的可视化,在echart社区找了半天,都没运行成功,后来找到了这个,亲测可用如下图: <script src="./lib/echarts.min.js"&g ...

echart实现地图的逐级钻取

概述

效果

实现代码

说明：

2. 数据和源代码可从地址获得。

echart实现地图的逐级钻取相关推荐

最新文章

热门文章