矢量切片地图前端开发tileserver-gl

tileserver-gl简介

Vector and raster maps with GL styles. Server side rendering by Mapbox GL Native. Map tile server for Mapbox GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc. http://tileserver.readthedocs.io/

源代码地址github：https://github.com/klokantech/tileserver-gl
矢量切片前段开发基于tileserver-gl改造。

MapBox GL

讲到TileServer-gl，我们不得不提到MapBox GL，官网地址：https://www.mapbox.com/mapbox-gl-js/api/

TileServer-gl目录结构

我们改造的TileServer-gl目录结构图：

如上图所示，fonts、js、mapbox、mapbox-gl、sprites、index.html
我们需要修改的地方，如下图红色方框选中部分：

字体fonts

字体库推荐使用微软雅黑，样式配置字体建议用一种字体配，选用多种字体，客户端需要下载，一个字体库在20-30M左右。

样式配置style.js

重要参考文献
MapBox GL https://www.mapbox.com/mapbox-gl-js/style-spec/
对应中文翻译 https://jingsam.github.io/mapbox-gl-style-spec/
在线样式编辑http://editor.openmaptiles.org/

CSDN Mapbox-GL样式参考 https://blog.csdn.net/wan_yanyan528/article/details/48465403

符号集图标配置sprite

Sprite属性提供了一个符号集，可以用于各种要素的渲染，包括background-pattern, fill-pattern, line-pattern, 和icon-image。sprite包含两个文件：

1、索引文件，json格式，描述每个单独符号的名称、大小、位置。例如一下描述了一个名为poi的符号：

{
“poi”: {
“width”: 32,
“height”: 32,
“x”: 0,
“y”: 0,
“pixelRatio”: 1
}
}

2、图像文件 ，一般png格式，包含符号的集合。
当指定一个sprite url以后，mapboxgl会自动在对应位置下载对应的json和png文件

图标可自己配置