我正在尝试在屏幕上显示当前的缩放级别。
我可以获得初始缩放值，但是我想在更改地图时更改此值。
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' });
我该怎么做？
当我看到@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>您可以订阅地图的moveend事件。
this.map.on('moveend', this.setScaleValue)