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

前言

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

内容概览

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"),//设置矢量渲染的样式符号
    };
    myConfig.spotPbfLayer = L.vectorGrid.protobuf(localUrl, localVectorTileOptions).on('mouseover', function (e) {
    var attr = e.layer.properties;
    clearSpotHighlight();
    spothighlight = e.layer.properties.map_num;
    myConfig.spotPbfLayer.setFeatureStyle(e.layer.properties.map_num, highlightstyle);
    var content = "图斑编号:" + attr.map_num + "
    ";
    content += "项目ID:" + attr.project_id + "
    ";
    myConfig.spotPbfLayer.unbindPopup();
    myConfig.spotPbfLayer.bindPopup(content);
    myConfig.spotPbfLayer.openPopup(e.latlng);
    }).addTo(map);
    }
    //矢量瓦片高亮样式符号style
    const highlightstyle = {
    fillColor: '#e6d933',
    fillOpacity: 0.1,
    stroke: true,
    fill: true,
    color: '#00bfff',
top Created with Sketch.