Question

我正在将一个简单的ASP.NET应用程序从OpenLayers 2转换为 OpenLayers 3 。

此应用程序使用自定义的矢量图层 - 即我填充自定义多面体的Vector对象。我基本上调用了一个存储过程并填充了一个名为“polyline”的变量，根据该变量，我应该可以创建 ol.geom.LinearRing 对象。

问题是，通过创建LinearString对象，我收到以下错误：

AssertionError：失败：不支持的步幅：未定义

这是我的代码：

for (var i in polyline)
{
    var coord = polyline[i];
    var point = new ol.geom.Point([coord.x, coord.y]).transform("EPSG:4326", "EPSG:900913"); 
    sitePoints.push(point);
}
linearRing = new ol.geom.LinearRing(sitePoints);

我也尝试明确指定 GeometryLayout ，直到现在还没有结果。

linearRing = new ol.geom.LinearRing(sitePoints, ol.geom.GeometryLayout.XY);

通过手动检查代码并浏览网页，我发现问题可能出现在setCoordinates()库ol.js函数中的一个错误中（我目前正在使用ol-debug.js v.3.5.0）。但我不知道如何解决它/我可以使用哪种解决方法。

任何帮助都会受到热烈的赞赏。

g4lvuz

Answer 1

似乎linearRing构造函数需要一个坐标数组，而不是Points。

尝试更改

sitePoints.push(point);

到

sitePoints.push(point.flatCoordinates);

Answer 2

以下是您在评论部分提供的折线的jsFiddle。

你提到多边形？你想给我一个多字形的例子，或者你只使用jsFiddle。

您将从坐标对创建几何图形。

然后使用变换函数将变换应用于几何体，您可以从ol.proj.getTransform()获得。

tranformFn = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
featureGeometry = new ol.geom.Polygon(
    [[[16.37376206, 48.19958029],
    [16.37385355, 48.19959905],
    [16.35548841, 48.21036004],
    [16.35531591, 48.20966506],
    [16.35519314, 48.20921214],
    [16.37337628, 48.19965110],
    [16.37376206, 48.19958029]]]
);

featureGeometryTf = featureGeometry.applyTransform(tranformFn);

Answer 3

我最终设法使ASP.NET + Javascript代码与OpenLayers 3一起使用。这是一段代码片段：

tranformFn = ol.proj.getTransform('EPSG:4326', 'EPSG:900913'); // 'EPSG:3857'
var featureMultiGeometry = new ol.geom.MultiPolygon(null);
@{
    foreach (var item in modelGeographieMultiPolygon.Select(x => new { geoKennung = x.geoKennung, Bezeichnung = x.Bezeichnung, Vorfahren_geoKennung = x.Parent_geoKennung}).Distinct()) // for each region
    {
        <text>        
        @*
        siteStyle =
        {
            strokeColor: "#000000", // #770077
            strokeOpacity: 1,
            strokeWidth: 0.5,
            fillColor: getRandomColor(),
            fillOpacity: 0.5,
            pointRadius: 20,
            label: $("<div/>").html("</text>@item.Bezeichnung<text>").text(),
        };
        *@
        siteStyle = new ol.style.Style
        ({
            fill: new ol.style.Fill
            ({
                color: [255, 155, 255, 0.5]
            })
        });
        </text>

        foreach (var PolID in modelGeographieMultiPolygon.Where(x => x.geoKennung == @item.geoKennung).Select(x => x.Polygon_ID).Distinct()) // for each polygon
        {
            int count = 0;
            <text>featureGeometry = new ol.geom.Polygon([[</text>                   
            foreach (var punkt in modelGeographieMultiPolygon.Where(x => x.geoKennung == @item.geoKennung && x.Polygon_ID == PolID.Value)) // for each point in the polygon
            {
                if(count!=0)
                {
                    <text>, </text>;
                }
                <text>[</text>@punkt.Ecke_Longitude.ToString().Replace(",", ".")<text>, </text>@punkt.Ecke_Latitude.ToString().Replace(",", ".")<text>]</text>
                count++;
            }
            <text>]]);
            featureMultiGeometry.appendPolygon(featureGeometry);
            </text>;
        }
    }
}

featureMultiGeometryTf = featureMultiGeometry.applyTransform(tranformFn);

var multiPolygonFeature = new ol.Feature
({
    geometry: featureMultiGeometry
})
;
geometryMultiPolygonFeatureArray.push(multiPolygonFeature);
vectorLayer.getSource().addFeatures(geometryMultiPolygonFeatureArray);

感谢大家的帮助！你的答案对我来说真的很有用。

具有自定义多边形的OpenLayers：ol.geom.LinearRing

3 个答案: