Question

当我在OL中将缩放级别设置为0时，我可以看到多个世界。对我来说，似乎只有一个世界是具有正确坐标的“正确”世界。当我在左侧的第一个世界上绘制点要素时，我无法平移它，并且坐标不是真实世界的坐标。我只能在从左侧在第三世界中绘制点时才能平移该点。这对我来说似乎很奇怪。为什么只有一个是正确的，OL才能显示多个世界？你能做的每个世界的坐标都一样吗？

这里是一个小提琴，您可以在其中测试行为：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);
}

多个世界的功能越界

1 个答案: