npm 包 leaflet-minimap 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

Leaflet-Minimap 是一个用于创建地图缩略图的 Leaflet 插件。它可以在地图上添加一个小型的可交互缩略图，让用户可以快速浏览整个地图并进行导航。本文将详细介绍如何使用该插件。

安装

可以通过 npm 安装 leaflet-minimap：

npm install leaflet-minimap --save

接下来，在项目中引入相应文件：

<!-- Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha384-0iEJoFmKv6h9XJIC1+z5ZlO6E5YR//xCUoCwN8jWc2C+SZgG9Ai3q3z4cLbkYf+c" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha384-a5Y6Dk22ssUGvgU6IRWXTd8+VnQ9zIlARfqcqMgP/dxAK++SoBbIVlI7+3qZdJ/7" crossorigin=""></script>

<!-- Leaflet-Minimap -->
<link rel="stylesheet" href="node_modules/leaflet-minimap/dist/Control.MiniMap.min.css">
<script src="node_modules/leaflet-minimap/dist/Control.MiniMap.min.js"></script>

使用

首先，需要创建一个 Leaflet 地图对象：

const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

接下来，在地图上添加一个缩略图控件：

const miniMap = new L.Control.MiniMap(
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    { toggleDisplay: true }
).addTo(map);

以上代码会在左下角添加一个缩略图控件，可以通过点击控件展开或收起缩略图。

除此之外，还可以通过选项参数进行更多自定义设置。例如，可以设置缩略图的位置、大小、缩放级别等：

-- -------------------- ---- -------
----- ------- - --- ------------------
    ------------------------------------------------------------------
    - 
        -------------- -----
        --------- -------------
        ------ ----
        ------- ----
        ---------------- ---
        --------------- -----
        ------------------ - ------ ---------- ------- -- -------- -- ------------ --- --
        ------------------ - ------ ---------- ------- -- -------- ---- ---------- ---------- ------------ --- -
    -
-------------

示例

以下是一个完整的 Leaflet-Minimap 示例：

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ---------------------- ----------

    ---- ------- ---
    ----- ---------------- ------------------------------------------------------- ----------------------------------------------------------------------------------- ----------------
    ------- ----------------------------------------------------- ----------------------------------------------------------------------------------- ------------------------

    ---- --------------- ---
    ----- ---------------- ------------------------------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------