时间戳

首页 > 解决方案 > 如何更改传单中特征集合的样式？

javascript - 如何更改传单中特征集合的样式？

问题描述

我在看 choropleth 的例子。

https://leafletjs.com/examples/choropleth/

这是他们使用的数据源

{
 "type": "Feature",
 "properties": {
    "name": "Alabama",
    "density": 94.65
 },
 "geometry": ...
...
 }

我的数据集是多边形的特征集合，所以它看起来像

{
"type": "Feature Collection",
"Features": [
     {
 "type": "Feature",
 "properties": {
    "name": "Alabama",
    "density": 94.65
 },
 "geometry": ...
...
 },
     {
 "type": "Feature",
 "properties": {
    "name": "Ohio",
    "density": 99.65
 },
 "geometry": ...
...
 },
   }

无论如何，它是一个数组，所以当我制作我的样式函数时，我使用

const finalLayer = L.geoJSON(currentLayer.layer, { 
style: {this.styleData(currentLayer.layer)}
           });
           this.currentProjectLayers.push(finalLayer);
           finalLayer.addTo(this.map);

getColor(data) {
return data > 1000000 ? '#800026' :
      data > 800000 ? '#BD0026' :
      data > 600000 ?  '#E31A1C' :
      data > 400000 ?  '#FC4E2A' :
      data > 200000 ? '#FD8D3C' :
        '#FEB24C';
}

styleData(feature) {
return {
  fillColor: this.getColor(feature.features[0].properties.totalHH),
  weight: 2,
  opacity: 1,
  color: 'white',
  dashArray: '3',
  fillOpacity: 0.7
};
}

显然我不想使用 0 作为索引。当我使用索引时，它会根据一个点的索引将它们全部着色。我知道如何做一个 forEach 但我认为这不会奏效。我需要在我认为的 onEachFeature 中做样式....但是我可以使用 OnEachFeature 应用样式.. 我该怎么做？

标签： javascriptleaflet

解决方案

您可能正在尝试解决一个不存在的问题。

虽然这可能不是明确的，但Leaflet GeoJSON 工厂也解析 GeoJSON 特征集合，就好像它直接是一个特征数组。因此，这些特征中的每一个都将由style选项修改，该选项接收特征数据作为参数：

L.geoJSON(geojsonFeatureCollectionObject, {
  style: function (featureObject) {
    return {
      fill: featureObject.properties.totalHH
    };
  }
});

推荐阅读