OpenLayers查看旋转中心 [英] OpenLayers View center of rotation
问题描述
我正在使用OpenLayers准备地图应用程序.我的客户希望将其位置显示在屏幕底部，并且希望地图围绕他旋转.据我所知，使用
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)
并使用
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?
推荐答案
最简单的方法是使用CSS并溢出，因此地图中心在div的可见部分内偏移.此设置将在距左下角1/3的宽度和高度处创建一个明显的中心
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>
这篇关于OpenLayers查看旋转中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
