英文:
Get openlayers map data live while user interacts with map
问题
I understand your request. Here's the translated code:
我正在使用OpenLayers（版本7.2）创建一个Web应用程序，我正在尝试找出如何实时输出当前中心、缩放和旋转。我找到了'movestart'和'moveend'事件，但这两者只在用户交互的开始或结束时触发一次。我正在寻找一种在用户交互时持续更新信息的方法。任何帮助将不胜感激。
这是我使用'moveend'的代码，是否有人可以帮助我在用户仍在拖动/重新定位地图时进行更新？
这是我的当前代码以及JSFiddle的链接。谢谢。
HTML
<div id="map" class="map"></div>
<div id="output">
<h2>地图信息</h2>
中心位置：<span id="center" class="info"></span><br>
当前缩放：<span id="zoom" class="info"></span><br>
当前旋转：<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]), //哈利法克斯
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;
var rotation = view.getRotation();
document.getElementById('center').innerHTML = center;
document.getElementById('zoom').innerHTML = zoom;
document.getElementById('rotation').innerHTML = rotation;
});
If you have any more code to be translated, please let me know.
英文:
I'm creating a webapp using openlayers (version 7.2) and I'm trying to figure out how to have a live output of the current center, zoom & rotation. I have found the 'movestart' and 'moveend' events however these both fire only once either at the beginning or end of the user interaction. I'm trying to find a way to continually update the information while the user is interacting. Any help would be appreciated.
Here is what I have using 'moveend' can anyone help me have this update while the user is still dragging/repositioning the map?
Here is my current code as well as alink to a JSFiddle.
Thanks.
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;
});
答案1
得分: 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/
英文:
You can use change events on the view
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;
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论