Leaflet：如何在没有样式属性的GeoJSON对象中设计2000+个点？

Question

我有一个GeoJSON FeatureCollection对象，其中包含超过2000个功能。以GeoJSON对象，每个特征是一个种类的部分，像这样：

{ 
    "type": "Feature", 
    "properties": { 
    "category": "Electrical", 
    "Name": "Plane No 2" 
    }, 
    "geometry": { 
    "type": "Point", 
    "coordinates": [ 
     94.5703125, 
     58.722598828043374 
    ] 
    } 
}, 
{ 
    "type": "Feature", 
    "properties": { 
    "category": "Military", 
    "Name": "Base 1" 
    }, 
    "geometry": { 
    "type": "Point", 
    "coordinates": [ 
     104.4140625, 
     62.91523303947614 
    ] 
    } 
}, 

在我的实际数据中，有一个总的约38种类（每个特征仅被分配给一个类）。

在我的情况中使用JavaScript Switch语句是一种实用的解决方案，以便赋予每个点自己的样式？或者，还有更好的方法？

我做这样的事情在我的代码：

L.geoJson(mygeoJson, { 
onEachFeature: function (feature, layer){ 
    layer.bindPopup(L.Util.template(popupTemplate, feature.properties)); 
}, 
pointToLayer: function (feature, latlng){ 
    return L.circleMarker(latlng, gjsonOptions); 
}, 
// 3 of the 38 categories are listed here as an example 
style: function(feature){ 
     switch(feature.properties.category){ 
      case 'Electrical': return { color: '#fb8072'}; 
      case 'Military': return { color: '#b3de69'}; 
      case 'Aviation': return { color: '#80b1d3'}; 
     } 
    } 
}).addTo(map); 

Demo link here

Answer 1

我觉得应该加上颜色上的客户方，就像他/她的代码示例中一样。将颜色添加到每个GeoJSON功能将不必要地增加您的传输。如果你真的想将它们添加到您的收藏，你可以在你的收藏对象建立某种形式的传奇性，像这样：

var collection = { 
    "type": "FeatureCollection", 
    "properties": { 
     "legend": { 
      "Electrical": "#fb8072", 
      "Military": "#b3de69", 
      "Aviation": "#80b1d3" 
     } 
    } 
    "features": [...] 
} 

这样当您创建GeoJSON的层，你可以将它们添加在飞行：

L.geoJson(collection, { 
    'style': function (feature) { 
     return { 
      'color': collection.properties.legend[feature.properties.category] 
     } 
    } 
}).addTo(map); 

你可以而不是存储在集合对象的传说，将其存储在你的代码/脚本的地方：

var legend = { 
    "Electrical": "#fb8072", 
    "Military": "#b3de69", 
    "Aviation": "#80b1d3" 
} 

L.geoJson(collection, { 
    'style': function (feature) { 
     return { 
      'color': legend[feature.properties.category] 
     } 
    } 
}).addTo(map); 

编辑点评后：

如果您需要设置L.Marker图标，你应该使用pointToLayer功能：

L.geoJson(collection, { 
    'pointToLayer': function (feature, latlng) { 
     return new L.Marker(latlng, { 
      'icon': new L.Icon({ 
       'iconUrl': 'icons/' + feature.properties.category + '.png' 
       ... 
      }) 
     }) 
    } 
}).addTo(map); 

您目前正在使用L.CircleMarker不支持图标的选项。这是其只支持pathoptions的路径：

• http://leafletjs.com/reference.html#path-options

这里创造L.Marker与自定义图标一个很好的教程：

• http://leafletjs.com/examples/custom-icons.html