根据属性对行进行符号化

时间:2016-08-04 20:25:39

标签: javascript leaflet

我正在尝试将PolyLineDecorator与Leaflet一起使用,但是当涉及根据属性数据对路径/行进行符号化时,我甚至无法弄清楚甚至放弃PolyLineDecorator。

var polyline = L.polyline([...]).addTo(map);
var decorator = L.polylineDecorator(polyline, {
    patterns: [
        // defines a pattern of 10px-wide dashes, repeated every 20px on the line
        {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
    ]
}).addTo(map);

然而,对我来说很有用,我在一个GeoJSON文件中有20行,我想根据JSON文件中的Name字段来表示行。我无法在任何地方找到一个例子。有人能指出我的相关示例或文档吗?我觉得必须有一种方法可以将每一行导出为自己的GeoJSON文件。

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

您应该使用GeoJson onEachFeature()方法。让我们假设你的geoJson结构是:

var geojsonFeatures = [
  {
    "type": "Feature",
    "properties": {
      "name": "Trail 1",
   },
    "geometry": {
      "type": "Point",
      "coordinates": [-104.99404, 39.75621]
    }
  },
  {
    "type": "Feature",
    "properties": {
      "name": "Trail 2",
   },
    "geometry": {
      "type": "Point",
      "coordinates": [-104.99404, 39.75621]
    }
  }      
];

您可以通过feature.properties.name访问功能的名称属性:

L.geoJson(geojsonFeature, {
  onEachFeature: function (feature, layer) {
    if (feature.properties.name === '') {
      L.polylineDecorator(layer, {
        patterns: [
          {offset: 0, repeat: 20, symbol: L.Symbol.dash({pixelSize: 10})}
       ]
      }).addTo(map);
    } else {
      L.polylineDecorator(layer, {
        patterns: [
          {offset: 0, repeat: 30, symbol: L.Symbol.dash({pixelSize: 20})}
       ]
      }).addTo(map);
    }
  })
})