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查看旋转中心

1 个答案: