leaflet 加载矢量切片服务

import L from 'leaflet';

import 'leaflet-side-by-side';

// geoman
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';


let L = this.L;
      let _this = this;
      let url = _this.districtUrl + '/region/{z}/{x}/{y}?code=100000';
      let MainvectorTile = L.vectorGrid
        .protobuf(url, {
          rendererFactory: L.canvas.tile,
          vectorTileLayerStyles: {
            province: {
              weight: 1, // 边线宽度
              fillColor: '#85e0b7', // 填充颜色
              color: '#BEBEBE', // 边线颜色
              fill: true,
              fillOpacity: 0.8, // 填充颜色透明度
            },
            points: {
              weight: 1,
              color: 'red',
              opacity: 1,
              fillColor: 'white',
              fill: true,
              radius: 2,
              fillOpacity: 0.3,
            },
          },
          interactive: true, // 开启VectorGrid触发mouse/pointer事件
          getFeatureId: function (f) {
            if (f.properties.center) {
              let arr = f.properties.center.split(',');
              arr[0] = parseFloat(arr[0].replace('{', ''));
              arr[1] = parseFloat(arr[1].replace('}', ''));
              let MyText = L.divIcon({
                html: f.properties.name,
                className: 'my-div-icon',
                iconSize: 40,
              });
              L.marker([arr[1], arr[0]], { icon: MyText }).addTo(
                _this.MainMapGroup
              );
            }
          },
          // tms: true // 如果使用 TMS，则必须开启
        })
        .addTo(this.MainMapGroup);

      // this.MainMap.remove(MainvectorTile);
      let self = this;
      MainvectorTile.on('mouseover', function (e) {
        // console.log(e.layer.properties);
        let properties = e.layer.properties.adcode;
        self.adcode = properties;
        //console.log(properties);
      });
      MainvectorTile.on('click', function (e) {
        // console.log(e.layer.properties + "xzq"); // adcode
      });