Проблема при добавлении нового элемента управления на карту с использованием OpenLayers и Vue.js

Question

Я пытаюсь добавить пользовательский элемент управления на карту, используя OpenLayers с Vue.js.

У меня есть компонент Explore.vue, который создает мою «карту» (olmap) с использованием OL, и я передаю ее через привязку к дочернему компоненту 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
  }
}

Answer 1

Поскольку этот ответ объясняет, mounted хуки вызываются для дочерних компонентов перед их родителями, что означает, что LeftSidebar2.vue будет вызывать this.olmap.addControl(sidebar), когда olmap все еще является пустым объектом по умолчанию, объявленным в data метод Explore.vue.

Существует множество способов обойти это:

Вы можете инициализировать olmap в created хуке Explore.vue вместо mounted хука.

или

Вы можете использовать v-if для исключения LeftSidebar2.vue до тех пор, пока olmap не будет инициализирован.

Answer 2

Похоже, вы связали Объект olmap={} с компонентом, который в результате вызывает функцию this.olmap.addControls(), которая не существует на объекте, который вы передаете в качестве реквизита.Я думаю, что вы вместо этого пытаетесь сделать, это вызвать addControls () для экземпляра OpenLayers.Map.