我正在使用OpenLayers准备一个地图应用程序。我的客户希望将他的位置显示在屏幕底部，他希望地图围绕他旋转。据我所知，定位地图是使用
ol.View.setCenter(coordinates)
和旋转完成使用
ol.view.setRotation(radians)
那么，有没有办法，如何设置中心/旋转原点像素或毕达哥拉斯先生计算必须在地图移动/旋转时进行？
最简单的方法是使用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>