leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)

本篇主要利用 leaflet 的插件 leaflet.vectorgrid 实现两种不同数据源的矢量瓦片渲染加载效果：调用 geoserver 发布的 pbf 矢量瓦片服务；加载 geojson 数据源渲染矢量瓦片；leaflet.vectorgrid 插件 github 地址：https://github.com/Leaflet/Leaflet.VectorGrid

前言

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,//渲染方式 canvasinteractive: true,//设置true，允许鼠标交互事件getFeatureId: function (f) {return f.properties.map_num;
},//rendererFactory: L.svg.tile,vectorTileLayerStyles: getSpotVectorStyles("bs_spot_t"),//设置矢量渲染的样式符号};
……