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

前言

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/Leaf let.VectorGrid

• 实现方式1：调用 geoserver 发布的 pbf 矢量瓦片服务

1. geoserver 安装矢量瓦片插件，用来拓展支持发布矢量瓦片服务，具体可以参考以下资料：

在GeoServer中发布矢量切片服务​www.jianshu.com

https://blog.csdn.net/qq_36061233/article/details/84751073​blog.csdn.net https://blog.csdn.net/qq_28418387/article/details/82823725​blog.csdn.net

1. 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"),//设置矢量渲染的样式符号 
  };
……

更多详情见下面链接：

leaflet-webpack 入门开发系列六矢量瓦片(附源码下载) － 小专栏​xiaozhuanlan.com

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家店铺：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询