如何更改 Openlayer 中的缩放级别文本？

Question

我正在尝试在屏幕上显示当前的缩放级别。

我可以获得初始缩放值，但我想在地图更改时更改此值。

Vue.component('zoomlevel', {
    data:function(){
        return this.setDefault();
    },
    methods:{
        setDefault:function(){
            return {
                lang:lang.signin,
                onoff:true,
                zoom:GeoName.map.getView().getZoom(),
                scale:"Scale"
            }
        },
        open:function(){
            this.zoom=GeoName.map.getView().getZoom();
        },
        close:function(){
            this.onoff=false;
        }
    },
    template:
      '<div v-if="onoff" class="digitalScale2">Zoom Level: {{zoom}}</div>'
});
var zoomlevel = new Vue({ el: '#zoomlevel' });

我该怎么做？

Answer 1

您可以订阅地图的 moveend 事件。

 this.map.on('moveend', this.setScaleValue)

Answer 2

当我看到@Anatoly 的答案时，我正要发布答案。我将再添加一个替代方案，您可以订阅地图的 moveend 事件，或者您可以订阅视图的 change:resolution。看看我给你做的例子，

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
   #a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Click Pixel Coord</title>
  </head>
  <body>
    <h2>Zoom Level On Change</h2>
    <p id="p"></p>
    <div id="map" class="map"></div>
  <script type="text/javascript">
  var currentZoom = 4;
    var view = new ol.View({
      center: ol.proj.fromLonLat([37.41, 8.82]),
      zoom: currentZoom
    });
    var map = new ol.Map({
   target: 'map',
   layers: [
    new ol.layer.Tile({
     source: new ol.source.OSM()
    })
   ],
   view
  });
    document.getElementById('p').innerHTML = `Level:${currentZoom}`;
    map.on('moveend', function(evt) {
      var zoom = view.getZoom();
      console.log(`map->moveend->zoom ${zoom}`);
      if (zoom !== currentZoom) {
        currentZoom = zoom;
        document.getElementById('p').innerHTML = `Level:${currentZoom}`;
      }
    });
    view.on('change:resolution', function(evt) {
      var zoom = view.getZoom();
      console.log(`view->resolution->zoom ${zoom}`);
    });
    </script>
  </body>
</html>

如何更改 Openlayer 中的缩放级别文本？

How to change zoom level text in Openlayer?

openlayers

openlayers-3