最近看了一份人民大学的报告，《中国城市政商关系排行榜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()

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

二、数据转换

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

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

因为openlayer默认的坐标系为EPSG:3857，既平面墨卡托投影坐标系，如果用EPSG:4326，既WGS84球面经纬度坐标系，会导致加载的底图瓦片变形。

所以我们要先将数据做个投影，转成平面的。

点选界面右下角，修改项目坐标系。

将项目坐标系修改为WGS 84/Pseudo-Mercator。

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

矢量图层另存为中，将格式选为GeoJSON，坐标系参照系选为项目坐标参照系，点击ok，将文件存为GeoJSON格式。

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

三、前端

json.js：

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

openlayer_map.html：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>各省/直辖市政商关系健康指数</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"><script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script><script src="json.js" type="text/javascript"></script><style type="text/css">#map,html,body {height: 100%;width: 100%;}.ol-popup {position: absolute;background-color: white;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 100px;}.ol-popup:after,.ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}.ol-popup:after {border-top-color: white;border-width: 10px;left: 48px;margin-left: -10px;}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}.ol-popup-closer:after {content: "✖";}</style></head><body><div id="map"></div><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content"></div></div></body><script type="text/javascript">//弹窗var container = document.getElementById('popup');var content = document.getElementById('popup-content');var closer = document.getElementById('popup-closer');var overlay = new ol.Overlay({element: container,autoPan: true,autoPanAnimation: {duration: 50,},});closer.onclick = function() {overlay.setPosition(undefined);closer.blur();return false;};var polygons = getFeatures();var colors = ['#000000', '#001133', '#002266', '#003399', '#0044cc', '#0055ff', '#3377ff', '#6699ff', '#99bbff', '#ccddff', '#ffffff'];var styleFunction = function(feature) {let colorHex = colors[10 - Math.round(parseFloat(feature.getProperties()['health']) / 10)];let colorRgba = 'rgba(' + parseInt('0x' + colorHex.slice(1, 3)) + ',' + parseInt('0x' + colorHex.slice(3, 5)) + ',' +parseInt('0x' + colorHex.slice(5, 7)) + ',' + 0.8 + ')'let stylePolygon = new ol.style.Style({fill: new ol.style.Fill({color: colorRgba,}),});return stylePolygon;};features = new ol.format.GeoJSON().readFeatures(polygons);var vectorSource = new ol.source.Vector({features: features,});var vectorLayer = new ol.layer.Vector({source: vectorSource,style: styleFunction});//页面var view = new ol.View({center: ol.proj.transform([112.273486, 35.719192], 'EPSG:4326', 'EPSG:3857'),zoom: 4});var layers = [// 加载高德瓦片底图new ol.layer.Tile({source: new ol.source.XYZ({url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"})}), vectorLayer];//地图var map = new ol.Map({target: 'map', //指向divlayers: layers,overlays: [overlay],view: view});// 单击选择控件var selectSingleClick = new ol.interaction.Select({ style: styleFunction });map.addInteraction(selectSingleClick);selectSingleClick.on('select', function(e) {content.innerHTML = '<code>' + e.target.getFeatures().getArray()[0].getProperties()['name'] + '为：' + e.target.getFeatures().getArray()[0].getProperties()['health'] + '</code>';overlay.setPosition(e['mapBrowserEvent']['coordinate']);});</script></html>

四、总结

使用openlayer的人不多，但它应该是最底层的、最严格符合OGC WMS规范的地图前端了。

用openlayer做专题图是不太合适，但用它做绘制页面工具的开发是挺好的。

Openlayer不够轻量级，上手也难，但用它的时候，会觉得很专业、很标准、很严格。

Openlayer的各种样例：https://openlayers.org/en/latest/examples/

openlayer制作专题图相关推荐

腾讯地图JS API制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜2020>,https://new.qq.com/omn/20201230/20201230A0F3MY00.html. 讲的是中国各个 ...
百度地图JS API制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜2020>,https://new.qq.com/omn/20201230/20201230A0F3MY00.html. 讲的是中国各个 ...
MAPBOX制作专题图
最近看了一份人民大学的报告,<中国城市政商关系排行榜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 ...

openlayer制作专题图

一、数据获取

二、数据转换

三、前端

四、总结

openlayer制作专题图相关推荐

最新文章

热门文章