leaflet.js 地图添加全屏的功能2种方法

IT博客技术分享

已于 2022-11-16 11:32:20 修改

阅读量881

点赞数

分类专栏： vue-leaflet 文章标签： Fullscreen

于 2022-11-04 11:09:31 首次发布

本文链接：https://blog.csdn.net/qq_41646249/article/details/127672490

版权

leaflet.js 地图添加全屏的功能2种方法：

这里推荐几个类似功能的GitHub地址：

地图导航条、全屏控件

https://github.com/turbo87/sidebar-v2/

https://github.com/kartena/Leaflet.Pancontrol

https://github.com/kartena/Leaflet.zoomslider

https://github.com/Leaflet/Leaflet.fullscreen

https://github.com/brunob/leaflet.fullscreen

第一种：是原生的写法，引入很多js，css的方法，第二种：是vue直接一个依赖引入，一个标签搞定。

一、原生方法实现：

老规矩先上图：

实现步骤：

    <!--leaflet样式文件-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <!--leaflet核心JS文件-->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <link href='./leaflet.fullscreen.css' rel='stylesheet'/>
    <script src='Leaflet.fullscreen.js'></script>

  var map = L.map('map', {
    fullscreenControl: {
        pseudoFullscreen: false
    }
  }).setView([37.8, -96], 4);

核心的2个引入的文件：leaflet.fullscreen.css 和 Leaflet.fullscreen.js

Leaflet.fullscreen.js：

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['leaflet'], factory);
    } else if (typeof module !== 'undefined') {
        // Node/CommonJS
        module.exports = factory(require('leaflet'));
    } else {
        // Browser globals
        if (typeof window.L === 'undefined') {
            throw new Error('Leafl