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

【问题标题】：Problem when add a new control on map using OpenLayers and Vue.js使用 OpenLayers 和 Vue.js 在地图上添加新控件时出现问题
【发布时间】：2019-08-05 20:28:31
【问题描述】：

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

我有组件 Explore.vue，它使用 OL 创建我的“地图”（olmap），我通过绑定将它传递给子组件 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

【解决方案1】：

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

您可以通过多种方式解决此问题：

您可以在Explore.vue 的created 挂钩中初始化olmap，而不是在mounted 挂钩中。

或

您可以使用v-if 来排除LeftSidebar2.vue，直到olmap 被初始化。

【讨论】：

【解决方案2】：

看起来您已经将一个对象olmap={}绑定到一个组件，该组件返回调用一个函数this.olmap.addControls()，该函数在您作为道具传递的对象上不存在。我认为您正在尝试做的是在 OpenLayers.Map 实例上调用 addControls()。

【讨论】：