leaflet-webpack 入門開發系列六矢量瓦片(附源碼下載)

前言

leaflet-webpack 入門開發系列環境知識點了解：

• node 安裝包下載
  webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址
• webpack 配置介紹文檔
  詳細的 webpack 文檔配置介紹，適合新手查看，我也是邊看邊學
  
• vscode 安裝包下載，我這邊用 vscode工具編譯開發前端項目，個人覺的這款工具還不錯
• leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet 矢量瓦片
源代碼 demo 下載

效果圖如下：

本篇主要利用 leaflet 的插件 leaflet.vectorgrid 實現兩種不同數據源的矢量瓦片渲染加載效果：

1. 調用 geoserver 發布的 pbf 矢量瓦片服務
2. 加載 geojson 數據源渲染矢量瓦片
   leaflet.vectorgrid 插件 github 地址：https://github.com/Leaflet/Leaflet.VectorGrid

• 實現方式1：調用 geoserver 發布的 pbf 矢量瓦片服務

1. geoserver 安裝矢量瓦片插件，用來拓展支持發布矢量瓦片服務，具體可以參考以下資料：
   https://www.jianshu.com/p/6d0cb4d0e432
   https://blog.csdn.net/qq_36061233/article/details/84751073
   https://blog.csdn.net/qq_28418387/article/details/82823725
2. geoserver 安裝好矢量瓦片以及發布矢量瓦片服務之后，可以利用 leaflet.vectorgrid 插件來調用矢量瓦片服務渲染加載

//加載Pbf形式矢量瓦片函數
function loadVectorPbfLayer() {
// var localUrl = "http://localhost:8080/geoserver/gwc/service/wmts?" +
// "REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=ZKYGIS:bs_spot_t" +
// "&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
// "FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}";
var localUrl = "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/ZKYGIS:bs_spot_t@EPSG:900913@pbf/{z}/{x}/{-y}.pbf";
var localVectorTileOptions = {
rendererFactory: L.canvas.tile,//渲染方式 canvas
interactive: true,//設置true，允許鼠標交互事件
getFeatureId: function (f) {
return f.properties.map_num;
},
//rendererFactory: L.svg.tile,
vectorTileLayerStyles: getSpotVectorStyles("bs_spot_t"),//設置矢量渲染的樣式符號
};
……

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波