Leaflet + GeoJson 从 OSM 数据转换而来 - 关系

Question

我正在尝试显示我从 geofabrik 下载、使用 osmconvert 转换、使用 osmfilter 过滤并转换为 geojson 的自行车关系。目前 Leaflet 在地图上正确显示线串和节点。问题在于文件中包含的关系数据。这是我的 GeoJson 文件的一部分（我不会包含整个文件，因为它太大了）：

var rower = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "id": "way/27149688",
    "properties": {
      "type": "way",
      "id": "27149688",
      "tags": {
        "agricultural": "no",
        "bicycle": "yes",
        "highway": "residential",
        "maxweightrating:hgv": "24",
        "maxweightrating:hgv:condtitional": "none @ marked",
        "name": "Mikołaja Reja",
        "source:maxweightrating:hgv": "PL:sign_B-5-note"
      },
      "relations": [{
        "role": "",
        "rel": "4046118",
        "reltags": {
          "colour": "blue",
          "description": "Leśna trasa rowerowa, preferowany rower górski / Forest track, Mountain Bike preferred",
          "lcn_ref": "niebieski",
          "name": "Szlak Trójmiejski",
          "network": "rcn",
          "route": "bicycle",
          "type": "route"
        }
      }],
      "meta": {
        "timestamp": "2014-04-17T11:58:45Z",
        "version": "20",
        "changeset": "21747999",
        "user": "wojtas82",
        "uid": "729745"
      },
      "tainted": true
    },
    "geometry": {
      "type": "LineString",
      "coordinates": [[
          18.5024141,
          54.4354139
      ],[
          18.503622,
          54.4353485
      ],[
          18.5053714,
          54.4352858
      ]]
    }
  }]
};

如您所见，关系在方括号中。我希望根据 relations>reltags>colour tag 显示不同颜色的曲目。这是我的主要 html 文件（实际上是不起作用的一方）：

var rower2 = L.geoJson(rower, {
    style: function (feature) {
        switch (feature.properties.relations) {
            case 'blue':
                return {color: "#ff0000"};
            case 'red':
                return {color: "#0000ff"};
        }
    }
}).addTo(map);

我试图将这部分 (feature.properties.relations) 修改为 (feature.properties.relations.reltags.colour) 但它不起作用。有什么办法可以解决这个问题吗？

Answer 1

这不起作用，因为 feature.properties.relations 是一个包含对象的数组（因此周围的括号）。要访问存储在该数组中的对象，您可以使用这样的数组表示法：feature.properties.relations[0] 表示数组中的第一个对象，feature.properties.relations[1] 表示数组中的第二个对象，依此类推。因此，如果您想访问数组中第一个关系对象中 reltags 对象的颜色属性，您应该使用 feature.properties.relations[0].reltags.colour

var rower2 = L.geoJson(rower, {
    style: function (feature) {
        switch (feature.properties.relations[0].reltags.colour) {
            case 'blue':
                return {color: "#ff0000"};
            case 'red':
                return {color: "#0000ff"};
        }
    }
}).addTo(map);

但我猜你会运行惹上麻烦，因为 OSM 确实使用数组来处理有目的的关系。我的猜测是一个特征可以有多种关系，因此它可以有多种颜色。

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/EjCCsb?p=preview

PS。我想知道为什么当 case 是 blue 时你返回 '#FF0000' 因为那是红色的代码，与 case red 一样，你返回 '#0000FF' 这是蓝色的代码。除此之外，当您使用 feature.properties.relations[0].reltags.colour 时代码工作正常，如您在我提供的示例中所见。

Leaflet + GeoJson 从 OSM 数据转换而来 - 关系

Leaflet + GeoJson converted from OSM Data - Relations

javascript

openstreetmap

geojson

leaflet