基于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文件，里面定义基础网页，关键代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>基于Mapbox的矢量瓦片集成实例</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='./mapbox/mapbox-gl.js'></script>
    <link href='./mapbox/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id='map'></div>
</body>

</html>

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

<script src='./mapbox/mapbox-gl.js'></script>
<link href='./mapbox/mapbox-gl.css' rel='stylesheet' />

3、初始地图

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

<script>
        mapboxgl.accessToken = 'pk.eyJ1IjoibGFicy1zYW5kYm94IiwiYSI6ImNqejl3a2o0NDBieWczZXBqNnI4OGxjd24ifQ.PeWoqmCrmHKgMwM6GCAfEg';
        var tileset = 'mapbox.streets';
        var map = new mapboxgl.Map({
            container: 'map',
            zoom: 6,
            center: [112.742578, 27.669359],
            style: 'mapbox://styles/mapbox/light-v9',
            hash: false,
        });    
</script>

4、加载矢量瓦片

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

<script>
        map.on('load', function loaded() {
          //添加刚才发布的mvt数据源
            map.addSource('tile', {
                "type": "vector",
                "tiles": [
    				'http://localhost:8050/zgis/vector/tile/{z}/{x}/{y}'
                ],
                "minZoom": 1,
                "maxZoom": 7
            })
            //添加各图层
            map.addLayer({
                "id": "area-layer",
                "type": "fill",
                "source": "tile",// 上一步添加的数据源id
    			"source-layer": "points",// source-layer和mvt服务中的图层名对应
                //"layout": {"visibility": "visible"},
                "paint": {"fill-color": '#51bbd6', "fill-opacity": 0.6, "fill-outline-color": '#0000ff'}
            })
            
        });
        
    </script>

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