【前端搞地图】绘制一张填色专题地图

前端开发爱好者
2,182 阅读3分钟

🌏【前端搞地图】系列第四弹来啦，今天给大家带来的是如何制作一张填色专题地图。在前两篇文章中我们大致讲解了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 /* 透明度 */
        }
      });

使用该种方式，程序员可以自由控制展示的属性、展示的颜色配置和展示数据的时间周期等，程序的可扩展性得到了很大的增强。最终效果时实现：

最后

写文不易，记得关注微信公众号：前端开发爱好者 给这篇文章来个三连击吧 👍👍👍。持续关注，【前端搞地图】系列将会持续更新，下一期将会带来更多精彩的案列 🔥🔥🔥

avatar
文章
阅读
粉丝