向量切片前段開發tileserver-gl

• tileserver-gl簡介
• MapBox GL
• TileServer-gl目錄結構
• 字型fonts
• 樣式配置style.js
• 符號集圖示配置sprite

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.

原始碼地址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檔案

圖示可自己配置