Множество миров вне границ - PullRequest
0 голосов
/ 23 декабря 2018

Когда у меня уровень масштабирования 0 в OL, я вижу несколько миров.Мне кажется, что только один из миров является «правильным» миром с правильными координатами.Когда я рисую точечный объект в первом мире слева, я не могу перевести его, и координаты не являются координатами реального мира.Я могу перевести точку, только когда рисую ее в третьем мире слева.Это кажется странным для меня.Почему 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>

1 Ответ

0 голосов
/ 23 декабря 2018

Кажется, это конструктивная особенность 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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...