Синхронизировать разные карты с разным центром и поворотом - PullRequest
Новая
       5

Синхронизировать разные карты с разным центром и поворотом

0 голосов
/ 11 мая 2019

Мой вариант использования состоит в том, что у меня есть две карты рядом, и тогда пользователь может перемещать обе независимо друг от друга в разные области на обеих и вращаться также при необходимости.Затем они нажимают кнопку, которая начнет синхронизацию на обеих картах с этой точки.

Я видел, как синхронизация может работать с одним и тем же объектом просмотра, но в моем случае, насколько я понимаю, мне нужны разные объекты просмотра, поскольку центр и поворот будут меняться.

Как разделить один вид между двумя картами, но с разным центром и поворотом?

Ответы [ 2 ]

0 голосов
/ 15 мая 2019

ol-ext имеет взаимодействие Synchronize, которое сделает эту работу за вас. Вы просто должны добавить его на карту, когда кнопка нажата.

См. Пример http://viglino.github.io/ol-ext/examples/misc/map.interaction.synchronize.html

0 голосов
/ 13 мая 2019

Синхронизация изменений в представлениях без синхронизации видов может быть выполнена путем прослушивания изменений, но необходимо предотвратить изменение одной карты, которая обновляет другую, вызывая дальнейшее обновление исходного и бесконечного цикла.К счастью, метод animate имеет опцию обратного вызова завершения, поэтому его использование позволяет отключать дальнейшие обновления до завершения первого.http://mikenunn.16mb.com/demo/sync-changes.html

<!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">
  <style>
    html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .map1 {
        width: 50%;
        height: 40%;
    }
    .map2 {
        width: 50%;
        height: 40%;
    }
  </style>
  <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>
  <div id="map1" class="map1"></div>
  <input type="submit" onclick="setSync()" value="Sync">
  <input type="submit" onclick="unsetSync()" value="Unsync">
  <div id="map2" class="map2"></div>
  <script type="text/javascript">

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

      var map1 = new ol.Map({
        target: 'map1',
        layers: [layer],
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });

      var map2 = new ol.Map({
        target: 'map2',
        layers: [layer],
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });

      var sync = false;
      var dx, dy, dz, dr;

      map1.getView().on(['change:center','change:resolution','change:rotation'], function() {
        if (sync) {
          var center = map1.getView().getCenter();
          var zoom = map1.getView().getZoom();
          var rotation = map1.getView().getRotation();
          sync = false;
          map2.getView().animate({
            center: [center[0] + dx, center[1] + dy],
            zoom: zoom + dz,
            rotation: rotation + dr,
            duration: 0
          }, function() { sync = true; });
        }
      });

      map2.getView().on(['change:center','change:resolution','change:rotation'], function() {
        if (sync) {
          var center = map2.getView().getCenter();
          var zoom = map2.getView().getZoom();
          var rotation = map2.getView().getRotation();
          sync = false;
          map1.getView().animate({
            center: [center[0] - dx, center[1] - dy],
            zoom: zoom - dz,
            rotation: rotation - dr,
            duration: 0
          }, function() { sync = true; });
        }
      });

      function setSync() {
        sync = true;
        var center1 = map1.getView().getCenter();
        var center2 = map2.getView().getCenter();
        dx = center2[0] - center1[0];
        dy = center2[1] - center1[1];
        var zoom1 = map1.getView().getZoom();
        var zoom2 = map2.getView().getZoom();
        dz = zoom2 - zoom1;
        var rotation1 = map1.getView().getRotation();
        var rotation2 = map2.getView().getRotation();
        dr = rotation2 - rotation1;
      }

      function unsetSync() {
        sync = false;
      }

  </script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...