在Leaflet中使用VectorGrid的代码效率

如何解决在Leaflet中使用VectorGrid的代码效率

在使用VectorGrid的GeoJSON文件中，我有大约7000个多边形，使用一层就可以了，但是我需要将该层分成10个LayerGroups（10个具有自己多边形的区域）。不用重写10次代码怎么办？这似乎是很多浪费，必须有一种更聪明的方法，我无法弄清楚。这是我正在测试的代码，重点必须在所有11层上都可以使用...

var all_regions = new L.layerGroup();
var region_1 = new L.layerGroup();
var region_2 = new L.layerGroup();
var region_3 = new L.layerGroup();
/* snip */
var region_10 = new L.layerGroup();

var highlight_polygon;
var clearHighlight = function () {
  if (highlight_polygon) {
    vectorGrid.resetFeatureStyle(highlight_polygon);
  }
  highlight_polygon = null;
};

var vectorTileOptions_allRegions = {
  rendererFactory: L.canvas.tile,maxNativeZoom: 13,zIndex: 6,vectorTileLayerStyles: {
    sliced: {
      weight: 2,color: "gray",opacity: 1,fill: false,//fillColor: 'white',//stroke: true,fillOpacity: 0,},interactive: true,getFeatureId: function (f) {
    return f.properties.id;
  },};

var vectorTileOptions_region_1 = {
  rendererFactory: L.canvas.tile,vectorTileLayerStyles: {
    sliced: function (properties,zoom) {
      var region = properties.region;
      if (region === "region one") {
        return {
          weight: 2,};
      } else {
        return {
          weight: 0,opacity: 0,stroke: false,interactive: false,};
      }
    },};

// Next vectorTileOptions until all 11 of them....

$.getJSON("/data/regions.geojson",function (json) {
  //Not sure this is the correct way doing it...

  var vectorGrid = L.vectorGrid
    .slicer(json,vectorTileOptions_allRegions,vectorTileOptions_region_1)

    .on("click",function (e) {
      var properties = e.layer.properties;
      L.popup()
        .setContent(
          "<b>Name</b>: " +
            properties.region_name +
            "<br><b>Date</b>: " +
            "<i>" +
            properties.date +
            "</i>"
        )
        .setLatLng(e.latlng)
        .openOn(map);
      clearHighlight();
      highlight_polygon = e.layer.properties.id;

      vectorGrid.setFeatureStyle(highlight_polygon,{
        weight: 3,fillColor: "#ff9999",fill: true,radius: 6,fillOpacity: 0.3,});
      L.DomEvent.stop(e);
    });

  var clearHighlight = function () {
    if (highlight_polygon) {
      vectorGrid.resetFeatureStyle(highlight_polygon);
    }
    highlight_polygon = null;

    map.on("popupclose",clearHighlight);
  };
  //This will not work....
  vectorGrid.addTo(all_regions);
  vectorGrid.addTo(region_1);
});

解决方法

您可能想做类似...

FeatureCollection

关键点是：

• 使用循环从1迭代到10
• 将内容保留在编号数组中，而不要使用名称相似的变量
• 过滤Object.assign，以便每个VectorGrid使用更少的数据。绘制不可见的多边形/折线将花费与绘制可见的多边形/折线相同的计算时间。
• 尽可能地重构，然后建立具体的数据结构（Debug，如果需要的话可以克隆对象）