OpenLayers 3：在日期线上绘制多边形特征答案

【问题标题】：OpenLayers 3 : Drawing a polygon feature over the datelineOpenLayers 3：在日期线上绘制多边形特征
【发布时间】：2015-08-27 21:49:35
【问题描述】：

我正在尝试绘制一个与国际日期变更线重叠的简单矩形多边形。目前在创建多边形时，它会以相反的方向缠绕。

完整示例：http://jsfiddle.net/mcroteau/dkk2yu3L/

期望的输出：

实际输出：

Javascript：

var wgs84Proj = new ol.proj.Projection({ code : "EPSG:4326" });
var origProj = new ol.proj.Projection({ code : "EPSG:900913" });

var mapTile = new ol.layer.Tile({
    source: new ol.source.OSM()
});


var convertedCoordinates = [];            
var unformattedCoordinates = [[175, 70], [175, 60], [-160, 60], [-160, 70]];


$(unformattedCoordinates).each(function(index, coordinate){
    var lat = coordinate[0];
    var lon = coordinate[1];

    var circle = new ol.geom.Circle([lat, lon])
    circle.transform(wgs84Proj, origProj);

    convertedCoordinates.push(circle.getCenter());
});

var polygonGeometry = new ol.geom.Polygon([convertedCoordinates])
var polygonFeature = new ol.Feature({ geometry : polygonGeometry });

var vectorSource = new ol.source.Vector();
vectorSource.addFeature(polygonFeature);

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
}); 


var mapView = new ol.View({
    center: [-19000000, 9500000],
    zoom: 3
})

var map = new ol.Map({
    layers : [mapTile],
    target : 'map',
    view   : mapView
});

map.addLayer(vectorLayer);

我不确定是否存在我在 OpenLayers 3 API 中遗漏的配置设置或必须对数据点进行的转换。任何指导将不胜感激。

更新的工作示例

http://jsfiddle.net/mcroteau/edt92p23/

【问题讨论】：

我不确定您尝试做什么，但请看一下带有坐标的地图 - 您绘制的矩形正是属于您的坐标的那个。你有参考图片来展示你想要达到的目标吗？
无需创建 Circle 对象，只需使用“var xy = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857')” 然后 push(xy)。此外，您还颠倒了经纬度名称，但这没关系，只是名称错误。

标签： javascript openlayers-3

【解决方案1】：

只需将 360 度（或所用投影的总宽度）添加到您的 X 坐标，使它们位于世界右侧。将[[175, 70], [175, 60], [-160, 60], [-160, 70]] 更改为[[175, 70], [175, 60], [200, 60], [200, 70]]。

OpenLayers 使用投影坐标。 [-160, 70] 位于[175, 70] 的左侧/西部，因此在这些点之间绘制的任何线都会向左移动（如您的示例所示）。要让它向右/向东移动，您必须确保 X 坐标更高。

http://jsfiddle.net/dkk2yu3L/4/

【讨论】：

您好，Alvin，我发现调整无法完全解决问题的情况。 jsfiddle.net/mcroteau/edt92p23/5。有什么想法我可能需要做的吗？
在您的链接示例中，您修改的坐标在其他坐标以东约 340 度。加上 360 度使其向东 700 度（这就是您所做的），而减去 360 度使其在其他位置以西 20 度。您必须调整算法以查看是否需要添加或删除 360 度以更接近其他度。
谢谢，但老实说，我不确定我是否完全理解。你愿意举个例子吗？

【解决方案2】：

不确定是否可能，Openlayer 不能在世界的两个实例之间绘制！

如果您停用 wrapX 功能，您可以看到他看到的内容： http://jsfiddle.net/davidhequet/dkk2yu3L/3/

var vectorSource = new ol.source.Vector({wrapX:false});
vectorSource.addFeature(polygonFeature);

var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

【讨论】：