前言

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

node 安裝包下載
webpack 打包管理工具需要依賴 node 環境，所以 node 安裝包必須安裝，上面鏈接是官網下載地址

webpack 配置介紹檔案
詳細的 webpack 檔案配置介紹，適合新手查看，我也是邊看邊學

vscode 安裝包下載，我這邊用 vscode工具編譯開發前端專案，個人覺的這款工具還不錯

leaflet api檔案介紹，詳細介紹 leaflet 每個類的函式以及屬性等等

leaflet 在線例子

leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet 矢量瓦片
源代碼 demo 下載

效果圖如下：

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

呼叫 geoserver 發布的 pbf 矢量瓦片服務

加載 geojson 資料源渲染矢量瓦片
leaflet.vectorgrid 插件 github 地址：https://github.com/Leaflet/Leaflet.VectorGrid

實作方式1：呼叫 geoserver 發布的 pbf 矢量瓦片服務

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
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小專欄

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/121100.html

標籤：其他

上一篇：求助！iTOP-4418開發板ubuntu編譯QtE4.7出錯

下一篇：SAP 基礎知識

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

前言

內容概覽