如何在openlayers上显示缩放级别(仅限js/html文件)

How to show zoom level on openlayers (js/html file only)?

本文关键字：js 仅限 html 文件 openlayers 缩放 显示      更新时间：2023-09-26

寻求帮助。我知道它是类似

的东西
new OpenLayers.Control.ZoomStatus({
  autoActivate: true
})

希望为缩放状态添加一个div:或者最好的方法是什么?

如果有人能提供一些见解，我将不胜感激。在文档中找不到答案。

我不相信当前版本的openlayers已经实现了这个控件。

最好的方法可能是在地图上添加自己的元素来显示缩放级别，并使用

map.getZoom()

计算出显示它的缩放级别。有两种方法。我们可以扩展OpenLayers.Control.Zoom类，并在drawonzoomclick函数中添加自己的函数。然后在Normal OpenLayers.Control.zoom

中添加控件到地图中

第二种方法是向映射添加事件以捕获缩放事件并更新元素以在那里显示缩放级别。要做到这一点，你可以在地图上使用map.events.register()调用。

执行更新的代码应该看起来像这样

 var zoomLevel = map.getZoom();
  document.getElementById('ZoomElement').innerHTML =  'Current Zoom: ' + zoomlevel + 'of ' + (map.numZoomLevels + 1);

为OL6更新@ darkcycle。getZoom现在作用于View

我添加了缩放到十分之一。我只显示了数字，但这是一个很小的变化

map.on('rendercomplete',function(e) {
  var zoomLevel = map.getView().getZoom();
  var zoomRounded = Math.round(zoomLevel*10)/10;
  document.getElementById('ZoomElement').innerHTML = zoomRounded;
})
相关文章：