【vue@leaflet】 加载矢量切片服务

关注公众号"seeling_GIS"，领取学习视频资料

服务发布 请看之前发布的文章

实现效果

相关数据和插件

1. leaflet 需要使用插件 L.vectorGrid
2. api 文档 github.com/Leaflet/Lea…
3. 网盘地址 链接: pan.baidu.com/s/1H46XCK3P… 密码:ywo3

说明

1. 地图投影和调用的服务投影需要保持一致，这里使用的是 3857，服务对应的是 90013

2. 在这渲染方式上是以图层的方式 sc_countryroad 图层，因为就这一个图层，地图加载的是天地图为什么要加载天地图呢

3. 需要注意的是当你选择以 tms 服务时， tms: true,该属性要设为 true，interactive 是开启图层事件的属性。

代码实现 使用 vue@leaflet 的方式开发

// 引入 插件
import '@/assets/Leaflet/Leaflet.VectorGrid.bundled.min.js';
import '@/assets/Leaflet/Leaflet.VectorGrid.min.js';

// pbf 服务
var url = `http://ip:port/geoserver/gwc/service/tms/1.0.0/geotest:sc_countryroad@EPSG:900913@pbf/\{z\}/\{x\}/\{-y\}.pbf`;

 var vectorTileOptions = {
        layerURL: url,
        rendererFactory: L.canvas.tile,
        tms: true,
        vectorTileLayerStyles: {
           sc_countryroad: function(properties, zoom) {
                var prop = parseInt(properties.KIND);
                //do something
            }
        },
        interactive: true, //开启VectorGrid触发mouse/pointer事件
        getFeatureId: function(f) {
          return f.properties.osm_id;
        }

         var vectorTile = new L.vectorGrid.protobuf(url, vectorTileOptions).addTo(
        this._map
      );
        vectorTile.on("mouseover", e => {
        var properties = e.layer.properties;
        L.popup()
          .setContent(properties.NAME)
          .setLatLng(e.latlng)
          .openOn(this._map);
      });

更多内容，欢迎关注公众号