Question

我试图在OpenLayers 3类型地图上显示关系 4569（布鲁日，西弗兰德，法兰德斯，克诺克 - 海斯特）的边界，如http://nominatim.openstreetmap.org。但我不知道该怎么办。

这些是我正在做的事情：

我使用以下参数查询Overpass API：

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

此查询从OpenStreetMaps返回有关与4569的id关系的信息。

此查询的结果集有多种方式，其角色设置为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()); 

}

下面你会发现两张图片，第一张是我得到的最终结果，第二张是Nominatim得到的最终结果（我想要的结果）。如果你观察到，你会发现我的多边形的边框都很杂乱，而且我的多边形中还有其他线条。

My end result

Nominatim result - the desired result

我做错了什么？如果我使用单个WAY表示的边界做同样的事情，则每个都按预期工作。

试图在OpenLayers 3地图上显示OSM / Nominatim关系

0 个答案: