OpenLayers Посмотреть центр вращения - PullRequest
Новая
       16

OpenLayers Посмотреть центр вращения

0 голосов
/ 25 февраля 2019

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

ol.View.setCenter(coordinates)

, а поворот выполняется с использованием 

ol.view.setRotation(radians)

Итак, есть ли способ, как установить исходный пиксель центра / поворотаили расчет мистера Пифагора должен быть сделан в любое время, когда карту нужно переместить / повернуть?

1 Ответ

0 голосов
/ 25 февраля 2019

Самый простой способ - использовать CSS и переполнение, чтобы центр карты был смещен внутри видимой части div.Эта установка создаст видимый центр на 1/3 ширины и высоты слева внизу 

<!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;
    }
    .map {
        position: absolute;
        width: calc(100% *4/3);
        height: calc(100% *4/3);
        left: calc(100% - 100% *4/3);
    }
    .map div.ol-zoom {
        left: calc(100%/4 + .5em);
    }
    .map div.ol-attribution {
        bottom: calc(100%/4 + .5em);
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

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

    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([2.3442, 48.8635]),
            zoom: 10
        })
    });

  </script>
</body>

</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;
    }
    .map {
        position: absolute;
        width: calc(100% *4/3);
        height: calc(100% *4/3);
        top: calc(100% - 100% *4/3);
    }
    .map div.ol-zoom {
        top: calc(100%/4 + .5em);
    }
    .map div.ol-rotate {
        top: calc(100%/4 + .5em);
        right: calc(100%/4 + .5em);
    }
    .map div.ol-attribution {
        right: calc(100%/4 + .5em);
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>

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

    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([2.3442, 48.8635]),
            zoom: 10
        })
    });

  </script>
</body>
...