如何在 openlayers 上显示缩放级别（仅限 js/html 文件）？答案

【问题标题】：How to show zoom level on openlayers (js/html file only)?如何在 openlayers 上显示缩放级别（仅限 js/html 文件）？
【发布时间】：2013-06-06 18:12:10
【问题描述】：

在这方面寻求帮助。我知道它类似于

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

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

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

【问题讨论】：

标签： javascript gis openlayers

【解决方案1】：

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

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

map.getZoom()

计算缩放级别以显示它。有两种方法可以接近它。一个 ios 用于扩展 OpenLayers.Control.Zoom 类并将您自己的函数添加到绘图 onZoomClick 函数中。然后将您的控件添加到地图中以代替 Normal OpenLayers.Control.zoom

第二种方法是向您的地图添加一个事件以捕获缩放事件并更新您的元素以在此处显示缩放级别。为此，您将在地图上使用 map.events.register() 调用。

进行更新的代码应如下所示

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：