最近看了一份人民大学的报告，《中国城市政商关系排行榜2020》，https://new.qq.com/omn/20201230/20201230A0F3MY00.html。

讲的是中国各个城市的政商关系健康指数，决定拿这份报告中的数据，来做一份html的专题图。

数据是使用python脚本从腾讯地图webapi上获取的，前端页面使用的是高德地图瓦片。

效果如下：

一、数据获取

参考腾讯web api：https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistrict

脚本：

import requests
import time
# 获取省code和省name列表
def getAllProvince(key):url = 'http://apis.map.qq.com/ws/district/v1/list?key='+keyreponse = requests.get(url=url)reponse.encoding = 'utf-8'data = reponse.json()provincelist = []for r in data['result'][0]:provincelist.append(r['id']+'\t'+r['name'])return provincelist
# 获取省围栏
def getProvincePolygon(key,provinceCode):url = 'https://apis.map.qq.com/ws/district/v1/search?&keyword='+provinceCode+'&key='+key+'&get_polygon=2&max_offset=3000'print(url)reponse = requests.get(url=url)reponse.encoding = 'utf-8'data = reponse.json()print(data)path = data['result'][0][0]['polygon']polygonlist = []# 对响应结果进行差分解压，lng lat,lng lat,lng lat|lng lat……格式for p in path:print(p)ringlist = []pointnum = int(len(p)/2)for i in range(0,pointnum):ringlist.append(str(p[i*2])+' '+str(p[i*2+1]))polygonlist.append('POLYGON(('+','.join(ringlist)+'))')return polygonlist
key = '腾讯key'healthlist = {'北京':86.33,'上海':81.84,'天津':62.73,'海南':51.43,'浙江':49.42,'山东':48.91,'广东':47.47,'江苏':45,'重庆':44.64,'福建':40.39,'贵州':38.4,'四川':36.74,'安徽':36.52,'广西':34.95,'江西':33.77,'湖北':31.56,'宁夏':28.82,'湖南':28.03,'辽宁':27.7,'山西':25.73,'内蒙古':25.27,'陕西':23.95,'西藏':23.94,'甘肃':22.56,'新疆':21.99,'青海':21.69,'河北':21.39,'吉林':21.16,'黑龙江':21.08,'河南':20.49,'云南':19.17}f = open(r'province.txt','a',encoding='utf-8')
f.write('\t'.join(['code','name','health','polygon'])+'\n')
province_list = getAllProvince(key)
for p in province_list:code,name = p.split('\t')if healthlist.__contains__(name):health = healthlist[name]else:health = 0.0time.sleep(1)polygonlist = getProvincePolygon(key,code)for pl in polygonlist:print(pl)f.write('\t'.join([code,name,str(health),pl])+'\n')
f.close()

执行完脚本，获取的数据长这样：

二、数据转换

因为mapbox能直接识别geojson格式的数据，所以我们把这份数据转成geojson的就行。

打开QGIS，ctrl+L，打开数据源管理器，分隔文本文件，按照下面的设置，将province.txt文件添加到QGIS面板上。

在图层面板上，选中图层province，右键导出，另存要素为。

矢量图层另存为中，将格式选为GeoJSON，点击ok，将文件存为GeoJSON格式。

GeoJSON文件可以拿文本文档打开。

三、前端

json.js：

var getFeatures = function(){var featureJson=province.geojson中的内容return featureJson;}

mapshow.html：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>各省/直辖市政商关系健康指数</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script><script src="json.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" /><style>body {margin: 0;padding: 0;}#map {position: absolute;top: 0;bottom: 0;width: 100%;}</style></head><body><style>.legend {background-color: #fff;border-radius: 3px;bottom: 30px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;padding: 10px;position: absolute;right: 10px;z-index: 1;}.legend h4 {margin: 0 0 10px;}.legend div span {border-radius: 50%;display: inline-block;height: 10px;margin-right: 5px;width: 10px;}.mapboxgl-popup {max-width: 500px;font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;}</style><div id="map"></div><div id="state-legend" class="legend"><h4>健康指数</h4><!-- #0055ff','#3377ff','#6699ff','#99bbff','#ccddff','#ffffff' --><div><span style="background-color: #001133"></span>90</div><div><span style="background-color: #002266"></span>80</div><div><span style="background-color: #003399"></span>70</div><div><span style="background-color: #0044cc"></span>60</div><div><span style="background-color: #0055ff"></span>50</div><div><span style="background-color: #3377ff"></span>40</div><div><span style="background-color: #6699ff"></span>30</div><div><span style="background-color: #99bbff"></span>20</div><div><span style="background-color: #ccddff"></span>10</div><div><span style="background-color: #ffffff"></span>null</div></div><script>mapboxgl.accessToken = '你的key';var map = new mapboxgl.Map({container: 'map',style: {'version': 8,'sources': {'raster-tiles': {'type': 'raster','tiles': ['http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],'tileSize': 256}},'layers': [{'id': 'simple-tiles','type': 'raster','source': 'raster-tiles','minzoom': 0,'maxzoom': 22}]},center: [112.273486, 35.719192],zoom: 3});//获取数据var jsondata = getFeatures();map.on('load', function() {map.addSource('rwanda-provinces', {'type': 'geojson','data': jsondata});map.addLayer({'id': 'rwanda-provinces','type': 'fill','source': 'rwanda-provinces','layout': {},'paint': {'fill-color': ['interpolate',['linear'],['get', 'health'],0,'#ffffff',10,'#ccddff',20,'#99bbff',30,'#6699ff',40,'#3377ff',50,'#0055ff',60,'#0044cc',70,'#003399',80,'#002266',90,'#001133'],'fill-opacity': 0.75}});// 点击图层对象获取属性标签map.on('click', 'rwanda-provinces', function(e) {new mapboxgl.Popup().setLngLat(e.lngLat).setHTML(e.features[0].properties.name + '为' + e.features[0].properties.health).addTo(map);});});</script></body></html>

四、总结

真要做专题图的话，各种地图相关的前端中，mapbox还是最全面的，性能也是最好的，毕竟它一直推推崇大地图前端的理念。

但mapbox不支持嵌入腾讯、高德的定制化风格底图，不过这个也能通过技术手段来实现。

Mapbox 的例子：https://docs.mapbox.com/mapbox-gl-js/example/

MAPBOX制作专题图相关推荐

高德地图JS API制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜2020>,https://new.qq.com/omn/20201230/20201230A0F3MY00.html. 讲的是中国各个 ...
腾讯地图JS API制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜2020>,https://new.qq.com/omn/20201230/20201230A0F3MY00.html. 讲的是中国各个 ...
百度地图JS API制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜2020>,https://new.qq.com/omn/20201230/20201230A0F3MY00.html. 讲的是中国各个 ...
使用ArcGIS制作专题图，并添加经纬网
目录一.添加地图三要素二.添加经纬网三.导出地图一.添加地图三要素首先将视图从数据视图切换到布局视图,页面的左下角. 现在页面是纵向的,点击文件→页面和打印设置,将方向调整为横向调整地图及 ...
bigemap如何点线面标注制作专题图？
1.导入/导出AutoCAD文件DXF格式 2.在线标注含有点线面的矢量标注(KML/KMZ/SHP/DWG/DXF) 3.标注矢量导入导出(支持格式KML.KMZ.SHP.GPX(GPS测量 ...
arcmap制作地闪密度专题图
arcmap制作地闪密度专题图最近需要制作地闪密度专题图,笔者现有数据是历年闪电定位数据资料以及省的shape地图,在次记录下遇到的问题及解决方法. 1.历年闪电定位数据资料有70多W条闪电定位数 ...
使用QGIS制作点密度专题图
点密度图(Dot Density Map)是专题地图的一种,是用一定大小的.形状相同的点表示分散分布现象的分布范围.数量特征和分布密度的制图方法,又叫点值法或者点法,广泛应用于表示人口.农业.畜牧业等 ...
ArcGIS基础：相同空间人口图层的人口数量字段转移至小区图层（核心：相交操作）及制作人口密度专题图
本实验目标: 人口普查数据分配给小区(两个数据空间和属性不一样,人口普查数据含有人口数量字段.交通小区(交通小区只是一个普通小区的名字,不要纠结)数据没有人口数量字段): 把人口字段搞到交通小区数据图 ...
[转] ArcEngine 产生专题图
小生原文 ArcEngine 产生专题图 ArcEngine提供多个着色对象用于产生专题图,可以使用标准着色方案,也可以自定义着色方案,ArcEngine提供8中标准着色方案. 一.SimpleRen ...

MAPBOX制作专题图

一、数据获取

二、数据转换

三、前端

四、总结

MAPBOX制作专题图相关推荐

最新文章

热门文章