vue.js - 如何在 Vue2Leaflet 中使用 Leaflet Fullscreen

Question

有没有人有如何整合Leaflet Fullscreen的例子？与 Vue2 Leaflet

我在一个组件中使用 Vue2Leaflet(通过 npm 加载)，并在 index.html 中添加了全屏 js 的 CDN 链接。但是当加载全屏 js 时，它找不到对 Leaflet 的引用，因为它尚未加载。所以我不确定如何按正确顺序使用它们。

Answer 1

您需要使用 this.$refs.mymap.mapObject 访问 map 对象并在 mounted 中添加控件钩子(Hook)。

先加一个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

如果你使用的是 webpack，那就有点不同了:

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());
}