Javascript 基于矢量网格的单张编码效率

我使用矢量网格在GeoJSON文件中有大约7000个多边形，使用一个图层就可以了，但是我需要将这个图层分成10个图层组（10个区域有自己的多边形）。如何在不重写代码10次的情况下做到这一点？这似乎是浪费，一定有更聪明的方法，我想不出来。这是Im测试的代码，亮点必须与所有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,
  maxNativeZoom: 13,
  zIndex: 6,
  vectorTileLayerStyles: {
    sliced: function (properties, zoom) {
      var region = properties.region;
      if (region === "region one") {
        return {
          weight: 2,
          color: "gray",
          opacity: 1,
          fill: false,
          //fillColor: 'white',
          //stroke: true,
          fillOpacity: 0,
        };
      } else {
        return {
          weight: 0,
          opacity: 0,
          fill: false,
          stroke: false,
          fillOpacity: 0,
          interactive: false,
        };
      }
    },
  },
  interactive: true,
  getFeatureId: function (f) {
    return f.properties.id;
  },
};

// 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,
        color: "gray",
        opacity: 1,
        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);
});

var all_regions=新的L.layerGroup（）；
var region_1=新的L.层组（）；
var region_2=新的L.层组（）；
var region_3=新的L.层组（）；
/*剪断*/
var region_10=新的L.层组（）；
var-u多边形；
var clearHighlight=函数（）{
if（高亮显示_多边形）{
vectorGrid.resetFeatureStyle（高亮显示多边形）；
}
高亮显示_polygon=null；
};
var vectorTileOptions\u allRegions={
渲染器工厂：L.canvas.tile，
maxNativeZoom:13，
zIndex:6，
矢量化图层样式：{
切片：{
体重：2，
颜色：“灰色”，
不透明度：1，
填充：假，
//fillColor:'白色'，
//中风：是的，
不透明度：0，
},
},
互动：没错，
getFeatureId:函数（f）{
返回f.properties.id；
},
};
var vectorTileOptions\u region\u 1={
渲染器工厂：L.canvas.tile，
maxNativeZoom:13，
zIndex:6，
矢量化图层样式：{
切片：函数（属性、缩放）{
var region=properties.region；
如果（区域==“区域一”）{
返回{
体重：2，
颜色：“灰色”，
不透明度：1，
填充：假，
//fillColor:'白色'，
//中风：是的，
不透明度：0，
};
}否则{
返回{
重量:0,，
不透明度：0，
填充：假，
笔画：错，
不透明度：0，
交互：错，
};
}
},
},
互动：没错，
getFeatureId:函数（f）{
返回f.properties.id；
},
};
//下一步矢量化选项，直到所有11个选项。。。。
$.getJSON（“/data/regions.geojson”，函数（json）{
//不确定这是正确的方法。。。
var vectorGrid=L.vectorGrid
.slicer（json、vectorTileOptions\u allRegions、vectorTileOptions\u region\u 1）
.在“点击”时，功能（e）{
var属性=e.layer.properties；
L.弹出窗口（）
.setContent(
“姓名：”+
properties.region\u名称+
“
日期：”+
"" +
日期+
""
)
.setLatLng（即latlng）
.openOn（地图）；
clearHighlight（）；
高亮显示_polygon=e.layer.properties.id；
vectorGrid.setFeatureStyle（高亮显示多边形{
体重：3，
颜色：“灰色”，
不透明度：1，
fillColor:#ff9999“，
填充：是的，
半径：6，
填充不透明度：0.3，
});
L.DomEvent.停止（e）；
});
var clearHighlight=函数（）{
if（高亮显示_多边形）{
vectorGrid.resetFeatureStyle（高亮显示多边形）；
}
高亮显示_polygon=null；
地图上（“popupclose”，clearHighlight）；
};
//这行不通。。。。
vectorGrid.addTo（所有_区域）；
矢量网格addTo（区域1）；
});

您可能希望执行以下操作：

var regions = []; // An array that will hold instances of VectorGrid

var vectorGridOptions = {
  rendererFactory: L.canvas.tile,
  maxNativeZoom: 13,
  zIndex: 6,
  vectorTileLayerStyles: {
    sliced: {}, // Empty, because it shall be overwritten later.
  },
};

var defaultStyle = {
  stroke: true,
  weight: 2,
};

var regionStyles = [];

regionStyles[0] = {
  weight: 2,
  color: "gray",
};
regionStyles[1] = {
  weight: 1,
  color: "red",
};
/* ...etc, up to regionStyles[9] */

fetch("/data/regions.geojson")
  .then(function (response) { return response.json(); })
  .then(function (json) {
      
    // For each number between 0 and 9...
    for (var i = 0; i <= 9; i++) {
        
      // Assuming that the GeoJSON data holds a FeatureCollection,
      // create a copy of said GeoJSON FeatureCollection, but holding only
      // the wanted features.
      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
      var filteredGeoJSON = {
        type: "FeatureCollection",
        features: json.features.filter(function (feature) {
          // This assumes that each Feature has a "regionID" property with a
          // numeric value between 0 and 9.
          return feature.properties.regionID === i;
        }),
      };

      // Build up the options for the i-th VectorGrid by merging stuff together.
      // See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
      var fullRegionStyle = Object.assign({}, defaultStyle, regionStyles[i]);

      // Overwrite some stuff in vectorGridOptions. Note that this changes the value of
      // a piece of vectorGridOptions at each pass of the loop.
      vectorGridOptions.vectorTileLayerStyles.sliced = fullRegionStyle;

      regions[i] = L.vectorGrid.slicer(filteredGeoJSON, vectorTileOptions);
      regions[i].addTo(map);
    }
  });

var regions=[]；//将保存矢量栅格实例的数组
var vectorGridOptions={
渲染器工厂：L.canvas.tile，
maxNativeZoom:13，
zIndex:6，
矢量化图层样式：{
切片：{}，//为空，因为稍后将覆盖它。
},
};
var defaultStyle={
中风：是的，
体重：2，
};
var regionStyles=[]；
区域样式[0]={
体重：2，
颜色：“灰色”，
};
地区风格[1]={
体重：1，
颜色：“红色”，
};
/*…等，直至区域样式[9]*/
获取（“/data/regions.geojson”）
.then（函数（响应）{return response.json（）；}）
.then（函数（json）{
//对于0和9之间的每个数字。。。
对于（var i=0；i