Панорамирование и масштабирование нескольких карт одновременно при взаимодействии только с одной картой

У меня есть две карты Openlayers, отображающие два изображения (файлы png) области неба на двух разных (радио) частотах.

Я хотел бы знать, можно ли воспроизвести результат панорамирования или масштабирования одной карты на другую карту и наоборот. Другими словами, я хотел бы иметь эффект одного взаимодействия (Pan-Zoom) с одновременным воспроизведением одного окна на другой карте.

заранее спасибо


interaction maps openlayers zooming panning
person Michel Caillat    schedule 28.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Да, вы можете сделать это, прослушивая события одного ol.View и применить их на второй карте.

С помощью change:resolution вы можете поймать масштабирование, а с помощью change:center панорамирование.

var view = new ol.View({
  center: [0, 0], zoom: 2
});
var view2 = new ol.View({
  center: [0, 0], zoom: 2
});
var source = new ol.source.OSM();

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: source
    })
  ],
  target: 'map',
  view: view
});
var map2 = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map2',
  view: view2
});

function updateView(event, viewRef){
  let newValue = event.target.get(event.key);

  if(event.key === 'center') {
    // we need to transform the value, it comes in an other projection
    newValue = ol.proj.transform(newValue , source.getProjection(), 'EPSG:3857');
    // offset the value somehow here
  }
  viewRef.set(event.key, newValue);
}

view.on('change:resolution', function(event){
  updateView(event, view2);
});

view.on('change:center', function(event){
  updateView(event, view2);
});
.map{
    max-height: 100px;
  }
<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map" class="map"></div>
<div id="map2" class="map"></div>

person dube    schedule 28.01.2018
comment
Уважаемый дуб. Большое спасибо. Он работает в совершенстве для моего варианта использования. На самом деле мне не нужен был оператор: newValue = ol.proj.transform(newValue , source.getProjection(), 'EPSG:3857'); - person Michel Caillat; 31.01.2018
comment
Хороший! Я думаю это зависит от типа вашей базовой карты - person dube; 31.01.2018