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

时间:2023-01-23 23:27:19

前言

leaflet-webpack 入门开发系列环境知识点了解:

内容概览

leaflet 矢量瓦片
源代码 demo 下载

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

本篇主要利用 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小专栏

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