Как использовать Leaflet Fullscreen в Vue2Leaflet - PullRequest
Новая
       8

Как использовать Leaflet Fullscreen в Vue2Leaflet

0 голосов
/ 05 июня 2018

У кого-нибудь есть пример того, как интегрировать Leaflet Fullscreen с Vue2 Leaflet

Я использую Vue2Leaflet в компоненте (загружается через npm) и добавляю CDNссылка на полноэкранный js в index.html.Но когда полноэкранный js загружен, он не может найти ссылку на Leaflet, поскольку он еще не загружен.Поэтому я не уверен, как использовать их в правильном порядке.

1 Ответ

0 голосов
/ 05 июня 2018

Вам необходимо получить доступ к объекту карты с помощью this.$refs.mymap.mapObject и добавить элемент управления в хук mounted.

Сначала добавьте атрибут ref к элементу <l-map />: 

<l-map :zoom="zoom" :center="center" ref="mymap">
  ...
</l-map>

Затем добавьте элемент управления в mounted hook: 

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new L.Control.Fullscreen());
}

См. Это Fiddle

Если вы используете веб-пакет, он немного другой:

1) Установить с npm install leaflet-fullscreen --save

2) Импортировать файлы js и css в файл main.js (точка входа в приложение) или использовать <script> в index.html: 

import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet-fullscreen/dist/Leaflet.fullscreen';

3) В вашем компоненте используйте window.L вместо L: 

mounted() {
  const map = this.$refs.mymap.mapObject;
  map.addControl(new window.L.Control.Fullscreen());
}
...