使用OpenLayers和Vue.js在地图上添加新控件时出现问题

问题描述 投票:0回答:2

我正在尝试使用带有Vue.js的OpenLayers在我的地图上添加自定义控件。

我有使用OL创建我的“map”(olmap)的组件Explore.vue,我通过绑定到子组件LeftSideBar2.vue传递它。

当我尝试在地图中添加新控件时,Vue显示以下错误:

[Vue warn]: Error in mounted hook: "TypeError: this.olmap.addControl is not a function"

有人知道发生了什么吗?

我的文件是:

Explore.vue:

模板:

<explore-left-side-bar2 v-bind:olmap="olmap"/>

脚本:

export default {
  name: 'Explore',
  data () {
    return {
      olmap: {}
    }
  },
  methods: {
    initComponent: function () {
      // eslint-disable-next-line
      this.olmap = new Map({
        target: 'map',
        layers: [
          baseLayerGroup
        ],
        view: new View({
          projection: 'EPSG:4326',
          center: [0, 0],
          zoom: 5
        })
      })
    }
  },
  mounted: function () {
    this.initComponent()
  },
  components: {
    ExploreLeftSideBar2
  }
}

LeftSidebar2.vue:

脚本:

export default {
  name: 'LeftSideBar2',
  props: ['olmap'],
  data () {
    return {
    }
  },
  methods: {
    initComponent: function () {
      var sidebar = new Sidebar({ element: 'ol-sb-sidebar', position: 'left' })
      this.olmap.addControl(sidebar)      
    }
  },
  mounted: function () {
    this.initComponent()
  },
  components: {
    LeftSideBarLayerTree
  }
}
javascript vue.js openlayers
2个回答
0
投票

看起来你已经绑定了一个对象olmap={}to一个组件,它在返回时调用一个函数this.olmap.addControls(),它在你作为prop传递的对象上不存在。我认为你试图改为,在OpenLayers.Map实例上调用addControls()。


0
投票

正如this answer解释的那样,mounted钩子在他们的父母之前被称为子组件,这意味着当LeftSidebar2.vue仍然是this.olmap.addControl(sidebar)olmap方法中声明的默认空对象时,data将调用Explore.vue

有几种方法可以解决这个问题:

你可以在olmapcreated钩子而不是Explore.vue钩子初始化mounted

要么

v-if初始化之后,您可以使用LeftSidebar2.vue排除olmap

热门问题
推荐问题
最新问题