基于Mapbox的Mvt矢量瓦片集成实践

目录

前言

一、数据说明

1、基本数据

2、属性数据

二、Mapbox集成Mvt矢量瓦片

1、关于访问令牌

2、定义html

3、初始地图

4、加载矢量瓦片

5、效果展示

 总结

---

前言

        熟悉矢量瓦片的朋友一定知道，在Webgis当中，矢量瓦片的格式除了pbf的格式，还有geojson等格式。而提出mvt等pbf格式的，是大名鼎鼎的Mapbox，关于Mapbox中的矢量瓦片生成和加载，在Mapbox中最为完备，在之前的博客中，对于矢量瓦片的应用和展示有几个篇幅的介绍。但是暂时没有涉及Mapbox的相关实践博客。

        本文将为各位朋友简单介绍Mapbox，以及如何基于Mapbox来进行Mvt矢量瓦片的集成展示，最后为朋友们生成一个完整的案例，如果您当前业务当中有需要，可以作为参考。

一、数据说明

        本次实战数据采用Mapbox自带的底图，矢量瓦片数据是以湖南省的行政区划数据。

1、基本数据

序号	参数	说明
1	文件格式	ESRI Shapefile
2	编码	ISO-8859-1
3	几何图形	Polygon (MultiPolygon)
4	坐标参照系	EPSG:4326 - WGS 84 - 地理的
5	范围	108.6201356299999929,24.4147307699999985 : 114.4100520700000061,30.3505439400000014
6	要素数目	2,664

2、属性数据

序号	字段名	类型	长度
1	gml_id	String	80
2	Name	String	80
3	layer	String	80
4	code	String	80
5	grade	Integer	9

属性列数据展示如下：

二、Mapbox集成Mvt矢量瓦片

        关于Mapbox的知识，大家可以到mapbox的官方网站去学习，在C站也有很多优秀的博主分享了相关的博客。大家可以去找找，资料非常详细，这里不再赘述，mapbox官网。

1、关于访问令牌

        在Mapbox当中，有一个令牌的概念，因此在每个应用创建之前需要申请一个令牌，申请的流程也不复杂，还是比较简单的。大家有兴趣的可以到官网自己申请，开发者没有任何限制，大家直接申请后直接在项目中学习使用即可。申请的参考博客mapbox申请链接。

        如果想更加偷懒的，可以直接使用官网的示例token，不过可能会过期，在国企后再去官网找一个可以用的继续使用。 本文中使用的token是从官网演示示例中获取的。

2、定义html

首先定义一个html文件，里面定义基础网页，关键代码如下：

这里采用了mapbox-gl框架实现，在页面中引入以下资源。

3、初始地图

        下面定义了mapbox的地图容器，并设置了访问token，关键代码如下：

4、加载矢量瓦片

        使用以下代码加载矢量瓦片，

        这里需要注意的是，在加载矢量瓦片的时候，注意source-layer和发布的矢量瓦片的id对应。同时layer中的soure要和source中的name一致，同时需要给layer定义一个唯一的id。

5、效果展示

 使用mapbox可以使用鼠标进行地图旋转，点击鼠标右键，可开启旋转功能，展示界面如下：

 总结

        以上就是本文的主要内容，本文将为各位朋友简单介绍Mapbox，以及如何基于Mapbox来进行Mvt矢量瓦片的集成展示，最后为朋友们生成一个完整的案例，如果您当前业务当中有需要，可以作为参考。行文仓促，难免有错误，不当之处，还请朋友们在评论区留言批评指正。