Можно ли определить эффективную область видового экрана для вида в OpenLayers 5? - PullRequest
Новая
       52

Можно ли определить эффективную область видового экрана для вида в OpenLayers 5?

0 голосов
/ 23 января 2019

Пример OpenLayers «Расширенное позиционирование вида» (https://openlayers.org/en/latest/examples/center.html) показывает, как создать «вид внутри вида».

enter image description here

Если вы изучите пример, он использует заполнение, переданное view.fit(). Проблема, которую я вижу, состоит в том, что только эта функция принимает заполнение, поэтому репозиция не может быть анимирована.

Кроме того, если вы посмотрите наснимок экрана, поместите операции по центру карты в точку B, но при нажатии на кнопки масштабирования используйте точку A.

Мой вопрос: есть ли способ указать это подпредставление при создании представления, чтобы все операции (анимация, увеличение,подгонка и т. д.) всегда будет использовать точку B?

Еще одна проблема заключается в том, что взаимодействия по умолчанию, такие как Map Rotate (Alt + Shift + мышь), вращаются вокруг A, а не B. Поэтому было бы очень полезно определить это подпредставление.для автоматического воздействия на все операции просмотра, например, при открытии боковой панели, например.

1 Ответ

0 голосов
/ 24 января 2019

fit имеет параметры продолжительности и замедления, а animate имеет параметр привязки. Однако есть только одно представление, это просто элементы управления, которые были перемещены с помощью CSS, поэтому любые другие взаимодействия будут применяться к полному представлению. Но вы можете основать решение на примере общих представлений https://openlayers.org/en/v4.6.5/examples/side-by-side.html и иметь две синхронизированные карты, использовать CSS для переполнения внешней карты (созданной без элементов управления), чтобы сместить ее центр и наложить ее на другую карту, расположенную так, чтобы центры совпадали , Этот код установит центр в направлении нижнего правого угла на 2/3 ширины и высоты, увеличив внешнюю карту на 4/3, при этом внутренняя карта будет иметь 45% ширины и высоты полной внешней карты http://mikenunn.16mb.com/demo/view-on-view-br.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 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .map1 {
        position: absolute;
        width: calc(100% *4/3);
        height: calc(100% *4/3);
    }
    .map2 {
        position: absolute;
        left: calc((100% - 45%)/2);
        top: calc((100% - 45%)/2);
        width: 45%;
        height: 45%;
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>OpenLayers View on View example</title>
</head>

<body>
  <div id="map1" class="map1"><div id="map2" class="map2"></div></div>
  <script type="text/javascript">

    var source = new ol.source.OSM();

    var map2 = new ol.Map({
        target: 'map2',
        layers: [new ol.layer.Tile({ source: source })],
        view: new ol.View({
            center: ol.proj.fromLonLat([2.3442, 48.8635]),
            zoom: 10
        })
    });

    var map1 = new ol.Map({
        target: 'map1',
        controls: [],
        layers:  [new ol.layer.Tile({ source: source, opacity: 0.6 })],
        view: map2.getView()
    });

    var map1div = document.getElementById("map1");
    var map2div = document.getElementById("map2");
    var map1ov = map1div.getElementsByClassName("ol-overlaycontainer")[1];
    map1ov.appendChild(map2div);

  </script>
</body>

</html>

Этот CSS будет располагать центр к верхнему левому углу на 1/3 ширины и высоты, расширяя внешнюю карту влево и вверх вместо вправо и вниз http://mikenunn.16mb.com/demo/view-on-view-tl.html

.map1 {
    position: absolute;
    width: calc(100% *4/3);
    height: calc(100% *4/3);
    left: calc(100% - 100% *4/3);
    top: calc(100% - 100% *4/3);
}
...