如何在传单中更改要素集合的样式?

时间:2018-11-13 19:52:16

标签: javascript leaflet

我在看那个例子。

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作为索引。当我使用索引时,它会根据一个点的索引为它们全部着色。我知道该如何做,但我认为这行不通。我认为我需要在onEachFeature中进行样式设置。...但是我可以使用OnEachFeature来应用样式设置吗。

1 个答案:

答案 0 :(得分:1)

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

尽管可能不是很明确,但Leaflet GeoJSON factory也会解析GeoJSON Feature Collection,就好像它是一个Features数组一样。这样,每个{Features}功能都将通过style选项进行修改,该选项接收Feature参数作为参数:

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