1

我试图在 OpenLayers 3 类型地图上显示关系4569（布鲁日、西佛兰德斯、佛兰德斯、克诺克海斯特）的边界，例如http://nominatim.openstreetmap.org。但我不知道如何进行。

这些是我正在做的事情：

  1. 我正在使用以下参数查询 Overpass API：

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

这个查询从 OpenStreetMaps 中返回了关于 id 为 4569 的关系的信息。

此查询的结果集是多种方式，它们的角色设置为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 得到的最终结果（我想要的结果）。如果你观察，你会看到我的多边形的边界都是乱七八糟的，而且我的多边形中还有额外的线条。

我的最终结果

提名结果 - 期望的结果

我究竟做错了什么？如果我对由单个 表示的边界做同样的事情，那么一切WAY都会按预期工作。

4

0 回答 0