Попытка показать отношение OSM/Nominatim на карте OpenLayers 3
Я пытаюсь показать границу отношения 4569(Брюгге, Западная Фландрия, Фландрия, Кнокке-Хейст) на карте типа OpenLayers 3, например http://nominatim.openstreetmap.org/. Но я не знаю, как поступить.
Вот что я делаю:
- Я запрашиваю 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
все работает как положено.