Question

我正在尝试使用带有VUE的openLayer API来复制地图应用程序，并且此setCenter（）函数在我第二次调用时不起作用。在以下代码段中，地图将以[60,60]的随机中心初始化，然后当我输入数字以更新其纬度时，它可以正常工作，但是当我尝试通过重复此步骤再次更改中心时使用不同的输入，地图根本不会更新视图。

但是，在浏览器控制台中， window.map.getView().getCenter() 会给出我想要的最新坐标。

以setTimeout()方式初始化地图的原因是我如何在index.html文件中使用<script>标记导入openLayer。因此，为什么map实例必须绑定到window。

代码如下：

<template>
    <div id="map" class="map">
    <input type="text" @keyup.enter="changeCenter" v-model="center">
  </div>
</template>

<script>
  export default {
    name: "Olmap",
    props: ["InitCenter"], //[60,60]
    data(){
      return{
        center: ""
      }
    },
    components:{
      topInfoBar
    },
    methods:{
      changeCenter: function(){
        window.changeCenter([parseInt(this.center), 40])
      }
    },
    created(){
      setTimeout(()=>{
        var map = new window.ol.Map({
          target: 'map',
          layers: [
            new window.ol.layer.Tile({
              source: new window.ol.source.OSM()
            })
          ],
          view: new window.ol.View({
            center: window.ol.proj.fromLonLat(this.InitCenter),
            zoom: 4
          })
        });
        window.map = map;
      },50);

      var changeCenter = function(center){
        window.map.getView().setCenter(center);
      }
      window.changeCenter = changeCenter;
    },
  }
</script>

有人可以帮我吗？

OpenLayer setCenter（）第二次不起作用

0 个答案: