Leaflet中使用NavBar插件实现导航(前进后退)效果

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面实现加载地图显示的基础上。

导航组件主要用于恢复地图的视图状态，通过插件Leaflet.NavBar插件实现导航控件的加载显示。

控件中的左箭头表示返回上一次的视图状态

右箭头表示返回下一次的视图状态

home键表示直接返回最初的视图状态

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

https://github.com/davidchouse/Leaflet.NavBar

将插件代码下载，获取到css、js和img文件

2、页面中引入js、css并修改css中img路径

<link rel="stylesheet" href="./css/Leaflet.NavBar.css" />

<script type="text/javascript" src="./js/Leaflet.NavBar.js"></script>

修改css中img的路径，获取将img文件夹放在默认的路径下

3、控件使用

        //定义一个导航组件
        var navbar = L.control.navbar();
        //将导航组件添加进地图
        map.addControl(navbar);

4、完整代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet-NavBar实现导航控件</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="./css/Leaflet.NavBar.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
             100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/Leaflet.NavBar.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);
        //定义一个导航组件
        var navbar = L.control.navbar();
        //将导航组件添加进地图
        map.addControl(navbar);
    </script>
</body>

</html>

相关阅读:
flask 中的request
悲观锁、乐观锁、行级锁、表级锁
python标准库--functools.partial
Django Model._meta API
python中的urlencode与urldecode
Django模版语言inclusion_tag的用法。
Django的URL别名
Django之模板语言
django-request对象
Java 基础

原文地址：https://www.cnblogs.com/badaoliumangqizhi/p/16093060.html