在用户与map交互时获取openlayers的map数据

Question

我正在使用openlayers(7.2版)创建一个web应用程序，我正试图弄清楚如何有当前中心的实时输出，缩放&旋转。我发现了"movestart"one_answers"moveend"事件，但这两个事件都只在用户交互的开始或结束时触发一次。我试图找到一种方法，不断更新的信息，而用户进行交互。如有任何帮助，不胜感激。

这是我使用'moveend'，谁能帮助我有这个更新，而用户仍在拖动/重新定位地图?

这是我当前的代码以及到JSFiddle的链接。谢谢。

HTML
<div id="map" class="map"></div>
<div id="output">
<h2>Map Information</h2>
Center Position: <span id="center" class="info"></span><br>
Current Zoom: <span id="zoom" class="info"></span><br>
Current Rotation: <span id="rotation" class="info"></span>
</div>


CSS
#map{
width: 300px;
height: 300px;
}
#output{
position: absolute;
top: 8px;
right: 8px;
width: calc(100% - 340px);
height: 150px;
padding: 0 8px;
background-color: lightgray;
border: 1px dashed black;
}
#output h2{
font-size: small;
text-decoration:underline;
}
.info{
font-size: smaller;
}
JS
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
source: new ol.source.Vector({
url: 'data/geojson/countries.geojson',
format: new ol.format.GeoJSON()
})
})
],
target: 'map',

view: new ol.View({
center: ol.proj.fromLonLat([-63.5859487, 44.648618]), //halifax
zoom: 14
})
});
map.on("moveend", function() {
var view = map.getView();
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
var zoom = view.getZoom();
var zoomInfo = 'Zoom level = ' + zoom;
var rotation = view.getRotation();
document.getElementById('center').innerHTML = center;
document.getElementById('zoom').innerHTML = zoom;
document.getElementById('rotation').innerHTML = rotation;

});

https://jsfiddle.net/chudnovskym/d9cjzb03/21/

Answer 1

您可以在视图上使用更改事件

map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {
var view = map.getView();
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
var zoom = view.getZoom();
var zoomInfo = 'Zoom level = ' + zoom;
var rotation = view.getRotation();
document.getElementById('center').innerHTML = center;
document.getElementById('zoom').innerHTML = zoom;
document.getElementById('rotation').innerHTML = rotation;
});

https://jsfiddle.net/nvtf26h0/