OpenLayers 查看旋转中心

Question

我正在使用 OpenLayers 准备地图应用程序。我的客户希望在屏幕底部显示他的位置，并且他希望地图围绕他旋转。据我所知，定位地图是使用

ol.View.setCenter(coordinates)

并使用

完成旋转

ol.view.setRotation(radians)

那么，有没有办法，如何设置中心/旋转原点像素或必须在任何时候移动/旋转地图时进行毕达哥拉斯先生的计算？

Answer 1

最简单的方法是使用 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>

OpenLayers 查看旋转中心

OpenLayers View center of rotation

center

rotation

openlayers