利用Echarts+百度地图API绘制可交互的行政区划地图（2021）

工欲善其事必先利其器，这里我们绘制行政区划图的底层工具选用Echarts与百度地图javascript API。直接进入正题：

一、对比选取“地理坐标/地图”中合适的API示例

先进入Echarts官网（Apache ECharts），查看全部示例。因为目标是行政区划地图，所以目前可以选择的就是“香港18区人口密度（2011）”图（后称HK图）与“USA Population Estimates (2012)”图（后称USA图）。

对比代码细节后发现，主体功能没有什么区别。存在一些细节的差异，比如USA图显示地区名称，HK图不显示；USA图中像夏威夷等较远距离的地区，通过registerMap方法中配置平移参数时，拉近显示等。

那么选定本次用HK图作为示例代码，来绘制需要的行政区划图。

二、在程序中引用，生成初始化示例

这里引用示例时，使用的开发语言是HTML5，HTML代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>测试地图代码</title></head><body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div><!-- 引用jQuery与Echarts --><script src="jquery.min.js"></script><script src="echarts.min.js"></script><script type="text/javascript">var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;myChart.showLoading();$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('HK', geoJson);myChart.setOption(option = {title: {text: '香港18区人口密度 （2011）',subtext: '人口密度数据来自Wikipedia',sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'},tooltip: {trigger: 'item',formatter: '{b}<br/>{c} (p / km2)'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 800,max: 50000,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['lightskyblue', 'yellow', 'orangered']}},series: [{name: '香港18区人口密度',type: 'map',mapType: 'HK', // 自定义扩展图表类型label: {show: true},data: [{name: '中西区', value: 20057.34},{name: '湾仔', value: 15477.48},{name: '东区', value: 31686.1},{name: '南区', value: 6992.6},{name: '油尖旺', value: 44045.49},{name: '深水埗', value: 40689.64},{name: '九龙城', value: 37659.78},{name: '黄大仙', value: 45180.97},{name: '观塘', value: 55204.26},{name: '葵青', value: 21900.9},{name: '荃湾', value: 4918.26},{name: '屯门', value: 5881.84},{name: '元朗', value: 4178.01},{name: '北区', value: 2227.92},{name: '大埔', value: 2180.98},{name: '沙田', value: 9172.94},{name: '西贡', value: 3368},{name: '离岛', value: 806.98}],// 自定义名称映射nameMap: {'Central and Western': '中西区','Eastern': '东区','Islands': '离岛','Kowloon City': '九龙城','Kwai Tsing': '葵青','Kwun Tong': '观塘','North': '北区','Sai Kung': '西贡','Sha Tin': '沙田','Sham Shui Po': '深水埗','Southern': '南区','Tai Po': '大埔','Tsuen Wan': '荃湾','Tuen Mun': '屯门','Wan Chai': '湾仔','Wong Tai Sin': '黄大仙','Yau Tsim Mong': '油尖旺','Yuen Long': '元朗'}}]});});option && myChart.setOption(option);</script></body>
</html>

完成后直接在浏览器上打开这个html，效果如下：

三、获取目标地区的边界坐标，组整成需要的json文件

首先查看HK图中引用的边界数据的json文件，查看代码可知json地址为

https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json

访问后显示如下：

可见，省级行政区划的JSON，是由省内各个地市的边界坐标数据和组成的。那么，如何获取目标地区的json数据呢？

百度地图与高德地图开放平台中都给出了画出行政区划的代码，只需要console.log打印出绘制的数组就可以获得地区边界坐标集。得到坐标集后，整理格式即可。

但是！有同事推荐给我了一个网站，他们把数据已经整理好了！直接列出：地图选择器。进入后就是以下界面：

http://weixin.qq.com/r/WipXT7nEyeS2rf0s939I (二维码自动识别)

下载好后，发现存在一个问题：新设立的一些地市没有独立出来。那么，就在原有地市中找到该区县，直接剪切后，原有地区就不再显示该区县。把剪切后的按照市级格式重组成一个JSON文件即可。

生成后的数据，替换示例代码中的HK的边界坐标JSON，效果如图：

四、调整参数配置，优化地图显示

首先进入“文档”中“配置项手册”，查看需要配置的参数：

--标题（title）

--缩放与放大（roam）

--值的视觉映射（visualMap）

--提示框（tooltip）

--工具箱（toolbox）

--居中自调整大小

.map{width: 100vw;height: 100vh;margin: 0 auto;
}

五、实现区划图点击查询，点击进入下级区划图，返回上级功能

效果如下图：

主要使用以下监听事件获取地图上点击的地区：

myChart.on('click', function (params) {console.log(params);
});

六、实现地图低层区划切换至百度地图的功能

首先进入百度地图开放平台查看文档，https://lbsyun.baidu.com/。查看开发文档中的javascript API，百度地图基础调用demo如下（首先需要获得你的密钥）：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>测试地图代码</title></head><body><div id="container" style="width: 500px; height: 500px;"></div><!-- 引用jQuery与百度地区接口 --><script src="jquery.min.js"></script><script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的秘钥"></script><script type="text/javascript">var map = new BMapGL.Map('container'); // 创建Map实例map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放</script> </body>
</html>

完成后直接在浏览器上打开这个html，效果如下：

之后，增加如下功能：

海量聚合点

默认中心定位（文字/坐标）

基础缩放、拉动等功能

七、模块改进方向记录

1.行政区划图下增加实体地图，效果会更好，如下图：

2.行政区划图增加淡入淡出的切换效果会比较好

利用Echarts+百度地图API绘制可交互的行政区划地图（2021）相关推荐

android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
前端（echarts+百度地图api）后端（python+flask）完成绵阳餐饮消费数据可视化系统
一.可视化要求针对团购网站餐饮类消费数据的可视分析系统设计与开发大多数消费者在选择团购网站消费后会做出相应评价,从而产生海量的交易数据.这些数据包含了消费者对饮食比较全面的主观性评价和量化评分,因 ...
百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档新建文档可以直接从官方 ...
百度地图api 绘制乡镇边界
我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围: 百度api有提供了"添加行政区划"的示例:http://lbsyun.baidu.com/jsdemo.htm#c ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
python调用百度地图画轨迹图_百度地图 API 绘制路线
后台拿到数据返回给了jsp页面,并且显示到了地图上 . 现在要根据两个位点.绘制出他们之间的路线. 有实现过这个功能的大神,给指点一下,如果有实例,那当热是最好了. 下面是 : 我显示坐标的代码: v ...
如何利用【百度地图API】，制作房产酒店地图？（下）——结合自己的数据库...
摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章-- --------------------------------------------------------- 一.先按照前两篇 ...

利用Echarts+百度地图API绘制可交互的行政区划地图（2021）

利用Echarts+百度地图API绘制可交互的行政区划地图（2021）相关推荐

最新文章

热门文章