如何在 Vue2Leaflet 中使用 Leaflet Fullscreen

Question

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

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

Answer 1

您需要使用 this.$refs.mymap.mapObject 访问地图对象并在 mounted 挂钩中添加控件。

先给<l-map />元素添加一个ref属性：

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

然后在mounted钩子中添加控件：

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 文件（应用程序入口点）或在 index.html 中使用 <script>：

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

Answer 2

对于那些使用带有 vue2-leaflet 的 Nuxt 的人（并且不想使用插件而是出于性能原因将其导入本地），您可以这样做：

npm 安装传单全屏

需要所需的文件，创建一个在地图加载时运行的方法。

         <l-map
                @ready="LoadFullscreen()"
                ref="myMap"
              >
        
        <script>
let LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LIcon,
  LControlAttribution,
  LControlZoom,
if (process.client) {
  require("leaflet");
  ({
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LIcon,
    LControlAttribution,
    LControlZoom,
  } = require("vue2-leaflet/dist/vue2-leaflet.min"));
  require("leaflet-fullscreen/dist/leaflet.fullscreen.css");
  require("leaflet-fullscreen/dist/Leaflet.fullscreen");
}
import "leaflet/dist/leaflet.css";

...导出默认值等 ... 设置你的组件

methods: {
LoadFullscreen() {
  if (!process.server) {
    const map = this.$refs.listingsMap.mapObject;
    map.addControl(
      new window.L.Control.Fullscreen({
        position: "topright",
      })
    );
  }
},

},

如何在 Vue2Leaflet 中使用 Leaflet Fullscreen

How to use Leaflet Fullscreen in Vue2Leaflet

vue.js

leaflet

fullscreen