Как изменить уровень масштабирования текста в Openlayer? - PullRequest
Новая
       30

Как изменить уровень масштабирования текста в Openlayer?

0 голосов
/ 27 февраля 2020

Я пытаюсь показать текущий уровень масштабирования на экране.

Я могу получить начальное значение масштабирования, но я хочу изменить это значение при изменении карты. 

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' });

Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Вы можете подписаться на moveend событие карты. 

 this.map.on('moveend', this.setScaleValue)
0 голосов
/ 27 февраля 2020

Я только что опубликовал ответ, когда увидел ответ @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>
...