Openlayers - 如何在日期线两侧绘制多边形

Question

我需要在地图上绘制几个大多边形。多边形必须在日期线的两侧重复绘制。它们应该与Google Maps上的示例中所绘制的相同。

1）请给出您的意见，如何在多边形跨越日期线时绘制多边形？我解决了与示例相同的问题，但是当多边形跨越日期线时，绘制起来很困难。这就是为什么我将经度加上360度的原因-这是正确的吗？

for (var i = 1; i < polygonPoints.length; i++) {
      var dY = polygonPoints[i][1] - polygonPoints[i-1][1];
      if(Math.abs(dY) > 180)
           polygonPoints[i][1] += 360;
}

2) 请指导一下，在日期变更线两侧绘制多边形的正确方法是什么？

您能否检查一下我的做法：

    var map;    // openlayers map

    // [[latitude, longitude], ...]
    var polygonPoints = [[10, -100],[30, -70],[38, -30],[40, 0],[38, 50 ],[20, 100],[50, 170],[55, 180],
                        [50, -170], [40, -160],[10, 170],[0, -170],[-10, -160],[-25, -170], [-30, 100 ],
                        [-45, 10 ],[-50, -20],[-55, 30],[-35, -160],[-40, -160],[-60, 30],  [-50, -30 ],
                        [-40, 10 ],[-25, 100], [-20, -175],[-10, -165],[0, -180 ],[10, 165],[50, -180],
                        [45, 170],[15, 100],[33, 50 ],[35, 0 ],[35, -30],[25, -70],[5, -100],[10, -100] ];
    function InitOL(){
        var wgs84Projection = new OpenLayers.Projection("EPSG:4326");
        var epsg900913 = new OpenLayers.Projection('EPSG:900913');

        var options = {
            div: "openLayersMap",
            projection: wgs84Projection,
            displayProjection: epsg900913,
            allOverlays: true,
            zoom: 1
        };

        map = new OpenLayers.Map(options);
        var mapserv = new OpenLayers.Layer.MapServer( "OpenLayers Basic",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'},
                    {wrapDateLine: true} );

        var polygonsLayer = new OpenLayers.Layer.Vector("PolygonsLayer", null, { wrapDateLine: true });

        map.addLayers([mapserv, polygonsLayer]);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());
        map.zoomToMaxExtent();
        map.setCenter(new OpenLayers.LonLat(-100, 0));

        for (var i = 1; i < polygonPoints.length; i++) {
            var dY = polygonPoints[i][1] - polygonPoints[i-1][1];
            if(Math.abs(dY) > 180)
                polygonPoints[i][1] += 360;
        }

        var olPoints = [];
        for (var j = 0; j < polygonPoints.length; j++) {
            olPoints.push(new OpenLayers.Geometry.Point(polygonPoints[j][1], polygonPoints[j][0]));
        }
        var linearRing = new OpenLayers.Geometry.LinearRing(olPoints);
        var bounds = new OpenLayers.Bounds([-180, -90, 180, 90]);
        linearRing.setBounds(bounds);

        var polygonStyle = {
                strokeColor: "#770077",
                strokeOpacity: 1,
                strokeWidth: 2,
                fillColor: "#770077",
                fillOpacity: 0.5
            };

        var olPolygon = new OpenLayers.Geometry.Polygon(linearRing);
        var polygonFeature = new OpenLayers.Feature.Vector(olPolygon);
        polygonFeature.style = polygonStyle;
        polygonsLayer.addFeatures(polygonFeature);
    }

- user2017648

---

你可能想要避免征求意见。这基本上会让你的问题陷入无休止的辩论/讨论中。 - ChiefTwoPencils

Answer 1

这似乎是OpenLayers目前绘制多边形的限制。 您可能需要提交错误报告并希望它会被修补或自行修补... 当检测到此情况时，您可以自己生成第二个多边形。

- Christophe Roussy

Answer 2

我找到了一个解决方案solution来解决这个问题。它被称为Arc.js，用于计算大圆路线。不仅如此，它还可以在日期变更线上拆分线，并为您提供两个 Linestrings，在日期变更线处相交，OpenLayers 可以轻松映射它们。

- capdragon