Question

有没有人举例说明如何将Leaflet Fullscreen与Vue2 Leaflet

进行整合

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

Answer 1

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

首先向ref元素添加<l-map />属性：

<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文件，或使用<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());
}

Answer 2

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

npm install Leaflet-fullscreen

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

         <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

2 个答案: