OpenLayers View center of rotation

问题

I am preparing a map application using OpenLayers. My customer wants to have his position displayed at bottom of the screen and he wants the map to rotate around him. As far as I know, positioning the map is done using

ol.View.setCenter(coordinates)

and rotation is done using

ol.view.setRotation(radians)

So, is there a way, how to set center / rotation origin pixel or Mr. Pythagoras calculation has to be done any time the map should be moved / rotated?

回答1:

The easiest way would be to use CSS and overflow so the map center is offset inside the visible part of the div. This setup would create an apparent center at 1/3 width and height from bottom left

<!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>

Settings for an apparent center towards the top right:

<!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>

来源：https://stackoverflow.com/questions/54863550/openlayers-view-center-of-rotation

标签

rotation

OpenLayers

center