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

电玩女神 2024-02-06 00:01 41阅读 0赞

###  ###

**目录**

前言

一、数据说明

1、基本数据

2、属性数据

二、Mapbox集成Mvt矢量瓦片

1、关于访问令牌

2、定义html

3、初始地图

4、加载矢量瓦片

5、效果展示

总结

--------------------

### 前言 ###

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

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

## 一、数据说明 ##

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

### 1、基本数据 ###

![f2d8b3771d44412f93b5a5a3a5748634.png][]

<table> 
 <tbody> 
  <tr> 
   <td style="width:94px;">序号</td> 
   <td style="width:192px;">参数</td> 
   <td style="width:396px;">说明</td> 
  </tr> 
  <tr> 
   <td style="width:94px;">1</td> 
   <td style="width:192px;">文件格式</td> 
   <td style="width:396px;"> <p>ESRI Shapefile</p> </td> 
  </tr> 
  <tr> 
   <td style="width:94px;">2</td> 
   <td style="width:192px;">编码</td> 
   <td style="width:396px;"> <p>ISO-8859-1</p> </td> 
  </tr> 
  <tr> 
   <td style="width:94px;">3</td> 
   <td style="width:192px;">几何图形</td> 
   <td style="width:396px;"> <p>Polygon (MultiPolygon)</p> </td> 
  </tr> 
  <tr> 
   <td style="width:94px;">4</td> 
   <td style="width:192px;">坐标参照系</td> 
   <td style="width:396px;"> <p>EPSG:4326 - WGS 84 - 地理的</p> </td> 
  </tr> 
  <tr> 
   <td style="width:94px;">5</td> 
   <td style="width:192px;">范围</td> 
   <td style="width:396px;"> <p>108.6201356299999929,24.4147307699999985 : 114.4100520700000061,30.3505439400000014</p> </td> 
  </tr> 
  <tr> 
   <td style="width:94px;">6</td> 
   <td style="width:192px;">要素数目</td> 
   <td style="width:396px;"> <p>2,664</p> </td> 
  </tr> 
 </tbody> 
</table>

### 2、属性数据 ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:101px;">序号</td> 
   <td style="width:205px;">字段名</td> 
   <td style="width:226px;">类型</td> 
   <td style="width:155px;">长度</td> 
  </tr> 
  <tr> 
   <td style="width:101px;">1</td> 
   <td style="width:205px;"> <p>gml_id</p> </td> 
   <td style="width:226px;"> <p>String</p> </td> 
   <td style="width:155px;">80</td> 
  </tr> 
  <tr> 
   <td style="width:101px;">2</td> 
   <td style="width:205px;"> <p>Name</p> </td> 
   <td style="width:226px;">String</td> 
   <td style="width:155px;"> <p>80</p> </td> 
  </tr> 
  <tr> 
   <td style="width:101px;">3</td> 
   <td style="width:205px;"> <p>layer</p> </td> 
   <td style="width:226px;">String</td> 
   <td style="width:155px;">80</td> 
  </tr> 
  <tr> 
   <td style="width:101px;">4</td> 
   <td style="width:205px;"> <p>code</p> </td> 
   <td style="width:226px;">String</td> 
   <td style="width:155px;">80</td> 
  </tr> 
  <tr> 
   <td style="width:101px;">5</td> 
   <td style="width:205px;"> <p>grade</p> </td> 
   <td style="width:226px;"> <p>Integer</p> </td> 
   <td style="width:155px;">9</td> 
  </tr> 
 </tbody> 
</table>

属性列数据展示如下：

![61fc25732b6a4a4f9fb7d7bed8f81918.png][]

## 二、Mapbox集成Mvt矢量瓦片 ##

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

### 1、关于访问令牌 ###

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

![113db7d93cc641d899a4d77e9b958daa.png][]

如果想更加偷懒的，可以直接使用官网的示例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框架实现，在页面中引入以下资源。

### 3、初始地图 ###

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

### 4、加载矢量瓦片 ###

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

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

### 5、效果展示 ###

![f145d4dc69484c4b9ea088498635c27d.png][]

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

![81dcd8e80827436abd677e8aeb9d732e.png][]

## 总结 ##

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

[f2d8b3771d44412f93b5a5a3a5748634.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4b86af07a07c4ae6ab411b679172be70.png
[61fc25732b6a4a4f9fb7d7bed8f81918.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/d7aebf9317864094a44c9de5506e766b.png
[mapbox]: https://www.mapbox.com/
[mapbox 1]: https://blog.csdn.net/weixin_43787651/article/details/124520280
[113db7d93cc641d899a4d77e9b958daa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/66c21a0903a34271b787ed8ec1bf3495.png
[f145d4dc69484c4b9ea088498635c27d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/c5f1ab4ea19844ac8e93089ad66ea0fb.png
[81dcd8e80827436abd677e8aeb9d732e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/b647ae407815457abfc092d21f863595.png