多个世界功能越界

Question

当我在 OL 中缩放级别为 0 时，我可以看到多个世界。在我看来，似乎只有一个世界是坐标正确的'correct'世界。当我在左边的第一个世界上绘制一个点特征时，我无法平移它，坐标不是真实世界的坐标。我只能翻译当我在第三世界从左边画出来的时候。这对我来说似乎有点奇怪。为什么 OL 显示了多个世界，而只有一个世界是正确的？你能做点什么让每个世界的坐标都一样吗？

这是一个 fiddle，您可以在其中测试行为：https://jsfiddle.net/7cou2mLd/

代码片段：

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([37.41, 8.82]),
    zoom: 0
  })
});

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

map.addLayer(vectorLayer);

let drawPointInteraction = new ol.interaction.Draw({
  type: 'Point',
  source: vectorSource,
});
let translateInteraction = new ol.interaction.Translate();

map.addInteraction(drawPointInteraction);
map.addInteraction(translateInteraction);

drawPointInteraction.setActive(false);
translateInteraction.setActive(false);

function activateDraw() {
  drawPointInteraction.setActive(true);
  translateInteraction.setActive(false);
}

function activateTranslate() {
  drawPointInteraction.setActive(false);
  translateInteraction.setActive(true);
}

.map {
  height: 200px;
  width: 100%;
}

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>OpenLayers example</title>
</head>

<body>
  <h2>My Map</h2>
  <div id="map" class="map"></div>
  <button onclick="activateDraw()">Draw</button>
  <button onclick="activateTranslate()">Translate</button>
</body>

</html>

Answer 1

这似乎是一个设计特点https://github.com/openlayers/openlayers/issues/5128

但是，您可以在激活翻译交互之前将任何越界功能放入正确的世界

function activateTranslate() {
  drawPointInteraction.setActive(false);

  vectorSource.forEachFeature(function(feature){
    var lon = ol.proj.transformExtent(feature.getGeometry().getExtent(),'EPSG:3857','EPSG:4326')[0];
    var world = Math.floor((lon+180)/360);
    if (world != 0) {
      var geom = feature.getGeometry().clone().transform('EPSG:3857','EPSG:4326');
      geom.translate(-world*360, 0);
      feature.setGeometry(geom.transform('EPSG:4326','EPSG:3857'));
    }
  });

  translateInteraction.setActive(true);
}

或更高效

function activateTranslate() {
  drawPointInteraction.setActive(false);

  vectorSource.forEachFeature(function(feature){
    var lon = ol.proj.transformExtent(feature.getGeometry().getExtent(),'EPSG:3857','EPSG:4326')[0];
    var world = Math.floor((lon+180)/360);
    if (world != 0) {
      feature.getGeometry().translate(ol.proj.fromLonLat([-world*360, 0])[0],0);
    }
  });

  translateInteraction.setActive(true);
}

多个世界功能越界

Multiple Worlds feature out of bounds

openlayers