🌏
【前端搞地图】
系列第四弹
来啦,今天给大家带来的是如何制作一张填色专题地图
。在前两篇文章中我们大致讲解了Mapbox
的基础使用
以及如何去设计一张高度可自定义的地图
,还没有学会的小伙伴可以查看前两篇文章,自己动手实操下,这里就不对基础做过多的介绍了。
制作思路
制作填色专题地图,目前有两种思路:
- 直接在
Mapbox Studio
上传数据,根据属性值调整配色; - 添加
fill
图层,使用Mapbox Expression
调整配色。
准备数据
其实在
Mapbox
的地图中,我们可以在Studio
中上传国家
、省份
、洲
、城市
等多边形数据,然后在Style
中引用这个数据图层,也可以使用自带的
商业边界数据。同时GL JS SDK
支持根据瓦片中的数据进行配色的的功能,在 Mapbox 中我们把它叫做Expression
。
数据的获取可以推荐一个网站:http://datav.aliyun.com/tools/atlas/index.html#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
支持省市区GeoJson
的数据下载:
可以点击 右侧
下载按钮直接下载json
文件,当然下载下来还远远不够,需要自定义添加可视化属性
,这里建议把数据
保存到数据库中
,方便后期动态添加;这里增加 Confirmed
、Recovery
、Deaths
数据, 因为本次只对省级数据进行了可视化,所以只需在数据库中按省份进行分组查询即可得到每个省份的以上数据,接着就是常规操作,为GeoJSON properties
添加这几个属性就 OK,示例:
"properties": {
"childNum": 17,
"size": "1700",
"name": "河南省",
"id": "41",
"cp": [
113.0668,
33.8818
],
"confirmed": 1276,
"deaths": 24,
"recovery": 1270
}
思路1实现
需要把之前编辑好的数据保存为
本地文件
,上传Mapbox Studio
;Mapbox Studio
的基本使用这里就不做过多讲解了,不会使用的小伙伴可以查看之前几篇文章做了解。这里直接创建一个新的样式地图,样式看自己喜好选择
上传我们预先下载好的 GeoJson 数据:
选择我们预先下载
好的数据,直接上传,上传成功右下角
会给出相应的提示, 点击 Source
下的输入框,选择我们刚刚上传的文件
选择后应该页面应该会展示出一个中国地图
的样式,具体展示还要根据自己选择的数据
有关系
切换回 style
点击 Style across data range
根据自己添加的数据属性进行自定义调色
接着将其发布,然后在自己的Mapbox
应用里引用为底图
就可以了。
上面这个方法固然可以实现效果,但是
动态变化
难以实现,例如,我想能够快速切换显示的属性,如果仍使用第一种方法,就只好发布三个
图层,然后切换显示,这样效率不高。
思路2实现
在前端使用程序添加
GeoJSON
图层,在后端根据查询条件生成GeoJSON
数据,需要数据时访问后端
接口即可。前端代码如下:
map.addSource("fillSourceID", {
type: "geojson",
data: "./GeoJson.json" // 自己的json文件
});
map.addLayer({
id: "fillID",
type: "fill" /* fill类型一般用来表示一个面,一般较大 */,
source: "fillSourceID",
paint: {
"fill-color": {
property: "confirmed", // this will be your density property form you geojson
stops: [
[0, "#ffd0a6"],
[10, "#ffd0a6"],
[100, "#ffaa7f"],
[500, "#ff704e"],
[1000, "#f04040"],
[10000, "#b50a09"]
]
},
"fill-opacity": 1 /* 透明度 */
}
});
使用该种方式,程序员可以自由控制展示的属性
、展示的颜色配置
和展示数据
的时间周期
等,程序的可扩展性
得到了很大的增强。最终效果时实现:
最后
写文不易,记得关注微信公众号:
前端开发爱好者
给这篇文章来个三连击
吧 👍👍👍。持续关注
,【前端搞地图】
系列将会持续更新,下一期将会带来更多精彩的案列 🔥🔥🔥