文章/答案/技术大牛

发布

社区首页 >问答首页 >VectorGrid在传单中的编码效率

问VectorGrid在传单中的编码效率
EN

Stack Overflow用户

提问于 2020-10-09 20:37:57

回答 1查看 471关注 0票数 0

我在一个GeoJSON文件中使用VectorGrid有大约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,
  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);
});

javascript

leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-10 22:28:45

你可能想做些类似..。

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);
    }
  });

这里的要点是：

variables

Filter

使用一个循环来迭代从1到10

，将事物保存在编号数组中，而不是同名的

FeatureCollection，因此每个VectorGrid都可以处理较少的数据。绘制不可见的多边形/多边形与绘制可见多边形一样需要尽可能多的计算时间。

重构尽可能多，然后建立具体的数据结构(Object.assign，如果需要克隆对象)

。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64286990

复制

相似问题

问VectorGrid在传单中的编码效率
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VectorGrid在传单中的编码效率EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问VectorGrid在传单中的编码效率
EN