Попытка показать отношение OSM/Nominatim на карте OpenLayers 3

Я пытаюсь показать границу отношения 4569(Брюгге, Западная Фландрия, Фландрия, Кнокке-Хейст) на карте типа OpenLayers 3, например http://nominatim.openstreetmap.org/. Но я не знаю, как поступить.

Вот что я делаю:

  1. Я запрашиваю Overpass API со следующими параметрами:

data=[output:json];relation(4569); out geom; out center;

Этот запрос возвращает мне информацию об отношении с идентификатором 4569 из OpenStreetMaps.

Результирующий набор из этого запроса является несколькими способами, для которых их роль установлена ​​как outer, Я объединяю эти способы создания многоугольника и сохраняю их в массиве.

foreach ($geom['members'] as $_poly) {
        if ($_poly['role'] != 'outer' && $_poly['role'] != 'inner') continue;
        if ($_poly['role'] == 'outer') {
            foreach ($_poly['geometry'] as $latlon) $poly['outer'][]=array($latlon['lon'], $latlon['lat']);
        } else {
            $poly['inner'][]=array();
            foreach ($_poly['geometry'] as $latlon) $poly['inner'][count($poly['inner'])-1][]=array($latlon['lon'], $latlon['lat']);
        }
}
if ($poly['outer'][0] != $poly['outer'][count($poly['outer'])-1]) $poly['outer'][]=$poly['outer'][0];
$out['polygons']=$poly;

После этого этот массив отправляется в javascript, где я его обрабатываю и пытаюсь добавить объект Polygon на карту OpenLayers 3. Это код JavaScript, который я использую. (Это завернуто в прототип JS, сделанный мной)

Map.prototype.addPolygon = function(name, data) {

    var _coordinates=[], i;

    for (i=0; i<data.outer.length; i++ ) {
        console.log(data.outer[i]);
        _coordinates.push(ol.proj.transform(data.outer[i], 'EPSG:4326', 'EPSG:3857'));
    }

    console.log("Creating polygon", _coordinates);
    var Polygon = new ol.geom.Polygon([_coordinates]);
    var feature = new ol.Feature({
        name: name+"-outer",
        geometry: Polygon
    });
    this.polygons[name]=Polygon;

  var polyStyle = new ol.style.Style({
    fill: new ol.style.Fill({
      color: [121, 115, 251, .2]
    }),
    stroke: new ol.style.Stroke({
      color: '#051165',
      width: 2
    })
  });

  this.vectorSource.addFeature(feature);
  feature.setStyle(polyStyle);

  this.map.getView().fit(Polygon, this.map.getSize()); 

}

Ниже вы найдете два изображения: первое - это конечный результат, который я получаю, а второе - это конечный результат, который получает Номинтим (мой желаемый результат). Если вы заметите, вы увидите, что границы моего многоугольника запутаны, и в моем многоугольнике есть дополнительные линии.

Мой конечный результат

Номинатим результат - желаемый результат

Что я делаю неправильно? Если я делаю то же самое с границами, которые представлены одним WAYвсе работает как положено.

0 ответов

Другие вопросы по тегам