5

我需要在地图上画几个大多边形。必须在日期变更线的所有边复制多边形。它们的绘制方式应与我的示例中的谷歌地图相同。

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);
    }
4

2 回答 2

1

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

于 2013-01-31T12:02:10.443 回答
-1

我找到了解决这个问题的方法。它被称为Arc.js，用于计算大圆路线。不仅如此，它还会分割日期线上的线，并为您提供在日期线上相交的两条线串，OpenLayers 可以轻松映射

在此处输入图像描述 在此处输入图像描述

于 2014-01-21T21:01:00.370 回答