Не удается прочитать свойство '_layerAdd' из неопределенного (vue + leaflet)

Question

Получение этой ошибки при попытке добавить группу объектов на мою карту:

TypeError: Невозможно прочитать свойство '_layerAdd' из неопределенного

Фрагмент кода, который выбрасываетошибка:

<l-map
  id="mapid"
  :zoom="zoom"
  :center="center"
/>


var map = document.getElementById("mapid").__vue__;
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

Использование:

leaflet 1.5.1,
leaflet-draw 1.0.4,
vue 2.6.10,
vue2-leaflet 2.2.1

Answer 1

Метод addLayer не является частью общедоступного API для компонента l-map. Даже если бы «слой», переданный addLayer, должен был быть компонентом-оберткой Vue2Leaflet, а не нижележащим слоем Leaflet.

Чтобы увидеть это, рассмотрите код в LFeatureGroup.vue:

https://github.com/KoRiGaN/Vue2Leaflet/blob/940e17d8a3b19740a448dedf220d0f7ba9c61d31/src/components/LFeatureGroup.vue#L27

Обратите внимание, как он вызывает:

this.parentContainer.addLayer(this);

Здесь this относится к экземпляру компонента Vue l-feature-group, тогда как нижележащий Leaflet FeatureGroup находится всвойство this.mapObject.

Я предлагаю вам попробовать вместо этого использовать компонент l-feature-group. Что-то вроде:

<l-map
  id="mapid"
  :zoom="zoom"
  :center="center"
>
  <l-feature-group>
    <!-- relevant children -->
  </l-feature-group>
</l-map>

В документации есть хороший пример:

https://korigan.github.io/Vue2Leaflet/#/components/l-feature-group/

Я также настоятельно рекомендую избегать использования document.getElementById("mapid").__vue__ в качестве способазахватить экземпляр Vue. Вместо этого используйте ref и $refs.