Openlayers: общие взгляды рядом ........ как правильно их связать? - PullRequest
Новая
       9

Openlayers: общие взгляды рядом ........ как правильно их связать?

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

Я использовал скорректированную версию примера общих представлений с openlayers.org: https://openlayers.org/en/latest/examples/side-by-side.html

var layer = new TileLayer({
  source: new OSM()
  });

window['view1'] = new ol.View({
    center: [0, 0],
    zoom: 1
});

window['view2'] = new ol.View({
  center: [0, 0],
    zoom: 1
});

window['map1'] = new ol.Map ({
    target: 'map1',
    layers: [layer],
    view: window['view1']
});

window['map2'] = new ol.Map({
    target: 'map2',
    layers: [layer],
    view: window['view2']
});

window['map1'].addEventListener('change:resolution', function 
(evt) {
    window['view1'] = window['view2'];
    window['map1'].setView(window['view1']);
}, false);

window['map2'].addEventListener('change:resolution', function 
(evt) {
    window['view2'] = window['view1'];
    window['map2'].setView(window['view2']);
}, false);

Как мне впоследствии правильно отвязать эти «новые» равные виды?(возможно, ответ очень прост, но он сейчас вызывает у меня головную боль)

PS: я использую глобальную переменную (например, window ['map2']), потому что мне нужно иметь возможность связывать и отменять привязку несколькихКарты.

1 Ответ

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

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

Настройка вида одной карты на вид другой запустит синхронизацию.Предоставление одной из карт нового вида (первоначально основанного на состоянии общего вида) нарушит синхронизацию. 

<!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="sync1()" value="Sync with 1">
  <input type="submit" onclick="unsync()" value="Unsync">
  <input type="submit" onclick="sync2()" value="Sync with 2">
  <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
        })
      });

      function sync1() {
          map2.setView(map1.getView());
      }
      function sync2() {
          map1.setView(map2.getView());
      }
      function unsync() {
          map2.setView(new ol.View({
            projection: map2.getView().getProjection(),
            center: map2.getView().getCenter(),
            resolution: map2.getView().getResolution(),
            rotation: map2.getView().getRotation(),
            maxZoom: map2.getView().getMaxZoom(),
            minZoom: map2.getView().getMinZoom()
          }));
      }

  </script>
</body>

</html>
...