基于Mapbox矢量切片在线配图平台的设计与实现

原创地理信息世界时空信息学报

作者信息

翁世杰1，朱雪坚2，黄　婷1，任　福1

（1. 武汉大学　资源与环境科学学院，湖北　武汉　430072；2. 浙江省地理信息中心，浙江　杭州　310012）

“

【摘要】矢量切片是以四叉树模型切割矢量数据而生成的矢量要素描述性文件，WebGIS开发中，矢量切片的配图是通过编写Json样式文件，最后浏览器根据样式文件实现地图在线渲染显示，但这种方式配图效率低，样式单一。为了优化配图过程，本文从矢量切片数据和浏览器渲染两个方面提出了一套基于Mapbox的矢量切片在线配图平台，包括基于GeoServer的矢量切片服务发布、基于Mapbox GL的浏览器地图渲染等，设计实现了矢量切片在线配图平台应用于浙江省电子地图配图与在线制图研究项目，简化了矢量切片地图的配图过程，具有很强的实用性。

【关键词】矢量切片；矢量配图；Mapbox；GeoServer

【中图分类号】TP391.72 【文献标识码】B 【文章编号】1672-1586（2018）04-0064-05

”

引文格式：翁世杰, 朱雪坚, 黄　婷, 等. 基于Mapbox矢量切片在线配图平台的设计与实现[J].地理信息世界,2018,25(4):64-68.

正文

0　引　言

随着无线通信、计算机技术和地理信息系统的发展，网络电子地图逐渐得到了普及与应用。由于地图数据量大，网络传输效率低，瓦片技术应运而生。常用的瓦片技术分为栅格瓦片和矢量切片。相比较而言，矢量切片具有数据量小、渲染速度快、对地理要素语义特征描述形象准确以及交互性强等优势，因而矢量瓦片在电子地图的开发中应用越来越广泛，矢量切片地图也逐渐被各地图服务平台采用。通过将地理数据以矢量切片的形式存储于服务器，由地图渲染引擎（Mapbox GL等）按照样式文件实现地图在线渲染，但样式文件的编写效率低。长期以来，配图人员通过编写Json文件，再由浏览器渲染引擎帮助预览实现矢量切片地图配图，这对配图人员的专业知识要求高，不仅需要具有很好的编程基础，还要具备地图配图知识，并且工作效率低、不易更新、制作成本高。这与目前电子地图平台设计开发过程中系统需求和用户需求的便捷性与实用性产生明显冲突。近年来Mapbox的出现与发展，为优化矢量切片配图过程，设计更简洁易用的电子地图平台。2015年由官方发布的Mapbox Studio集矢量切片服务发布、切片渲染和地图在线配图于一体，能够帮助开发者快速制作矢量切片地图，用户只需要通过配图面板实现矢量切片地图的配制工作，相比于传统上编写Json样式文件具有很大优势。但是，通过Mapbox制作矢量切片地图需要将数据上传至它的服务器进行地图切片，使原本简单便捷的制作过程与数据保密问题产生了矛盾，这就制约了Mapbox矢量切片配图。为了解决这个问题，研究利用开源地图服务器软件GeoServer发布矢量切片服务，浏览器使用Mapbox提供的接口，根据样式文件也可提取数据实现矢量切片地图的渲染显示，这很好地解决了Mapbox在矢量切片地图配图中存在的数据保密问题，用户可以高效地在自己的电脑中实现矢量地图切片制作和地图配图工作。

本文设计实现了基于Mapbox矢量切片在线配图平台。该系统基于WebGIS，以GeoServer作为要素服务发布平台，以Mapbox GL作为地图绘制引擎实现地图要素服务发布、空间和属性数据渲染编辑、符号化等功能，提高了矢量切片制作发布和在线配图效率，丰富了系统的功能。系统主要功能概括为矢量切片数据服务自定义、配图样式自定义、地图符号本地化。

1　矢量切片相关原理

1.1 矢量切片工作原理

不同于栅格瓦片存储栅格图片，矢量切片存储的是投影区域的几何信息和属性信息。以四叉树金字塔模型切割矢量数据，并将矢量要素描述性文件存储于服务器端，浏览器按照配图样式文件实现地图在线渲染。矢量切片的工作原理如图1所示。首先以四叉树模型切割矢量数据，并根据矢量数据类型分组将矢量要素描述性文件存储于服务器，客户端浏览器根据地图显示范围和数据源映射获取服务器存储的矢量切片、图标、字体等数据源，最后依据配图样式文件定义的图层属性利用浏览器渲染引擎绘制地图。

图1　矢量切片工作原理

Fig.1 Working principle of vector tile-sets

1.2 矢量切片编码规则

1.2.1 几何编码

将地理信息编码到矢量切片中，由于矢量切片不包含地理信息的概念，因此必须将地理坐标转换为矢量切片中的网格坐标。以单个矢量切片为例，定义切片左上角为坐标原点，向右向下分别为X轴Y轴正方向，将点线面编码为相对网格坐标系的xy 对。如图2所示。绘制一个四边形，以第一点为基础，延XY轴正方向分别移动3、-1个单位，即LineTo(3，-1)移动画线到下一点，最后闭合图形。

图2　矢量切片几何编码规则

Fig.2 Vector tile-sets geometry encoding rule

1.2.2 属性编码

属性以一系列tag编码存储在向量的要素中，它具有引用指定原始关键字的键值对，并且将消除具有相同键值属性的冗余，避免重复信息的产生，减少数据量存储，相比GeoJSON格式的矢量瓦片文件体积更小，解析速度更快。如图3所示。通过tags整数对(0,0)找到对应keys和values列表中的索引号（0），确定所属图层属性。

图3　矢量切片属性编码规则

Fig.3 Vector tile-sets attributes encoding rule

2　配图平台设计与实现

2.1 配图平台的总体框架

系统基于SOA架构，采用层次化设计思路，搭建C/S和B/S混合架构，即C/S架构的后台数据服务子系统和B/S架构的矢量切片配图面板。利用开源软件GeoServer作为服务器发布基于Mapbox矢量切片数据标准的地图服务资源，客户端利用Mapbox GL JS调用矢量瓦片地图服务在浏览器渲染绘制矢量切片地图。系统总体框架如图4所示。包括表现层、业务层、服务层和数据层4个部分。

图4　系统总体框架

Fig.4 System framework

1）表现层

表现层运行在浏览器的FlashPlayer插件中，将空间数据和属性数据显示在浏览器中，负责与用户进行交互。浏览器根据地图显示范围获取服务器中的矢量切片等源数据，利用浏览器渲染引擎Mapbox GL根据样式文件在客户端进行地图绘制，实现用户交互。

2）业务层

业务需求包括数据导入、自定义地图模板、地图样式编辑和产品输出。自定义地图模板中，为用户提供了5种模仿Mapbox官方地图风格的地图模板：基础版、交通版、黑夜版、白天版和清新版，此外，用户还可以自定义地图模板，设计不同风格的地图。地图样式编辑是对地图点线面要素的样式进行编辑。

3）服务层

GeoServer服务器内置插件GeoWebCache发布矢量切片，将地理空间数据与属性数据存储于服务器端，并响应浏览器的空间数据和属性数据访问请求，进行空间数据缓冲处理和并发控制，进而反馈到表现层。由于样式是由客户端而不是服务器完成的，GeoWebCache只需要为不同的样式提供矢量切片数据源，因此可以绘制高分辨率的矢量切片地图。

4）数据层

数据库中包括用户空间地理数据和底图数据。用户空间地理数据是用户创建GeoServer要素服务的数据源，可以是用户上传的shp数据，也可以是用户通过属性字段定义生成的数据，用于制作矢量切片。底图数据是根据矢量切片数据源，按照一定的编码规则编写的配图样式文件，样式文件是一个具有特定根级别和嵌套属性的Json对象，浏览器根据样式文件绘制显示地图。

2.2 核心功能设计与实现

2.2.1 数据组织

数据主要包括矢量切片地图服务数据和地图样式数据。

矢量切片地图服务数据：是将矢量数据的几何信息和属性信息分割成一组矢量瓦片存储在服务器端，并利用协议缓冲技术紧凑的二进制格式传递信息。使用GeoServer作为地图服务器，利用内置的GeoWebCache对空间数据库里存储的地理数据进行切片生成矢量切片地图。常见的矢量切片数据格式有3种：GeoJSON，TopoJSON和MapbBox Vector Tile(MVT)，其中，Mpabox基于Google protocol buffers 制定的开源矢量切片数据标准（MVT）压缩率最高，体积最小。

地图样式数据：是定义矢量切片地图视觉外观的样式文件，是具有特定根级别和嵌套属性的Json对象。地图样式数据按照规范指定了地图源数据、图标字体源数据和图层绘制规则，浏览器根据地图显示范围和地图样式数据定义的地图数据源通过分布式网络获取矢量切片、地图标注字体、图标等数据源，然后根据样式文件定义的地图表达规则在浏览器即时渲染输出地图。

2.2.2 地图模板定制

地图样式文件引入矢量切片地图服务数据后，定义图层映射的视觉外观成了最重要的任务，即地图模板定制。该配图引擎提供了，5种风格样式地图模板和自定义地图模板功能模块。其中5种地图模板是依据Mapbox官方提供的地图样式风格，利用CartoCSS语言手动编写的完整的地图样式文档；而自定义地图模板中缺少了图层属性信息，需要用户通过配图面板选择地图要素，并配制不同风格的矢量切片地图。

2.2.3 地图在线编辑

矢量切片地图的优势有很多，地图交互实时渲染就是其中之一。利用Mapbox官方提供的交互式地图服务库Mapbox GL JS对地图空间数据和属性数据进行增删改，浏览器响应用户操作，实时更改地图样式。

地图在线编辑是在选择地图模板之后，利用配图引擎提供的编辑面板对地图要素进行编辑，编辑面板主要分为点、线、面要素编辑模块3个部分。根据选定的地图模板样式文件，显示当前地图的所有图层名称，当用户选择某一图层，显示其所有属性名称和对应的数值，当用户修改编辑面板显示的属性键值对，浏览器根据样式文件的反馈实现地图在线编辑功能。简单来说，矢量切片地图在线编辑就是通过修改地图样式文件，浏览器响应实时渲染。

地图要素除了编辑颜色和大小，图标和文字注记尤为重要，Mapbox官方提供的图标和文字服务并不能满足地图数据多样化海量化，地图样式个性化的挑战。因此系统设计实现了样式符号本地化，将字体和图标文件转为相应的数据格式引用实现。

2.2.4 地图输出

矢量切片地图底图是具有特定根级别和嵌套属性的Json对象，矢量切片地图输出即为当前地图对应的Json文件保存。通过保存按钮，系统将对应的样式文件保存在指定的文件夹或数据库中，供自己修改或他人调用。

3　应用实例

本文设计实现的系统，应用于“浙江省电子地图配图与在线制图研究”，以德清县地理空间数据为依据，建立矢量切片配图平台，以满足用户对矢量地图的展示和以矢量切片为数据源的配图应用，脱离原始的代码配图方式，增强了系统的可应用性。用户对矢量切片在线配图的需求主要为：制作矢量切片简便和数据保密，摆脱使用Mapbox官方工具制作矢量切片，以GeoServer作为地图服务器制作矢量切片；脱离客户端制图软件，使用在线制图方式等。

图5为浙江省湖州市德清县的矢量切片地图模板定制，用户可选择5种内置的地图样式，也可选择自定义地图样式。由于底图是样式文件Json对象，底图的切换对应了系统映射的样式文件的改变，会导致浏览器响应用户操作对样式文件重新渲染，因此在编辑地图完成后，必须对所编辑的地图进行下载保存。

a 底图切换总图

a Master map for base-map switching

b 底图切换面板

b Base-map switching panel

图5　地图模板定制

Fig.5 Map template customization

图6为自定义风格地图配制案例，用户新建空白样式文件，根据自己的需求选择要素图层，同时为选择的图层设置相应的属性和样式，系统同步响应展示预览，最后用户可以对绘制的图层进行保存或删除。

图6　自定义底图样式

Fig.6 Custom base-map style

图7为矢量切片地图在线编辑案例，根据所选图层的属性，对样式文件中对应的图层属性进行面板化显示，用户触发操作根据所选取的图层动态修改样式文件所在的图层属性，浏览器实时渲染地图实现预览效果。

图7　地图在线编辑

Fig.7 Map online editing

4　结束语

本文对基于Mapbox矢量切片在线配图平台的设计与实现进行了研究。同时，文章对矢量切片在线配图的关键技术进行改进，包括矢量切片服务发布、矢量切片浏览器渲染技术、矢量切片地图在线编辑等，这些技术对矢量切片在线配图平台的设计与实现具有极为重要的作用。相对于传统的栅格地图而言，该系统具有更快的制图与渲染速度与更高的用户交互性。矢量切片在线配图平台对用户的专业技能要求不高，具有很强的实用性，研究实现了矢量切片地图编绘与发布一体化的解决方案。后续工作将对GeoServer矢量切片发布剥离和移动端服务离线加载应用展开进一步的探索与研究，不断实现系统易用性和实用性。