第六章 Leaflet 高级应用：高德地图多图层切换与自定义控件开发

最新推荐文章于 2026-05-23 16:13:33 发布

原创最新推荐文章于 2026-05-23 16:13:33 发布 · 1.3k 阅读

26 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#leaflet #javascript #前端

leaflet 专栏收录该内容

16 篇文章

订阅专栏

本文基于 Leaflet 框架，结合高德地图瓦片服务，详细讲解如何实现多图层切换、集成实用控件及开发自定义交互组件，帮助开发者构建功能完善的地图应用。

末尾有完整代码哦

一、技术选型与优势

为什么选择 Leaflet + 高德地图组合？

Leaflet：轻量级开源地图库，提供灵活的图层管理和控件扩展机制
高德地图：提供多种风格瓦片图层（标准图、卫星图、交通图等），国内地理数据精准
组合优势：既保留 Leaflet 的灵活扩展能力，又能利用高德地图的优质本地化数据

开发环境准备

只需引入 Leaflet 核心库即可快速开发：

<!-- Leaflet样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
      crossorigin=""/>
<!-- Leaflet核心脚本 -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
        crossorigin=""></script>

二、核心功能实现

1. 基础地图容器与样式设计

首先创建地图容器并设置基础样式：

<div class="container">
    <h1>Leaflet+高德地图：图层与控件示例</h1>
    <div id="map"></div>
    <p>
        右上角：图层切换控件 - 可切换不同地图源和叠加层<br>
        右下角：比例尺控件 - 显示地图比例尺<br>
        左上角：自定义控件 - 显示当前坐标
    </p>
</div>

<style>
    #map {
        width: 100%;
        height: 600px;
    }
    .container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 0 20px;
    }
    /* 自定义控件样式 */
    .custom-control {
        background: white;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.2);
        font-size: 14px;
    }
</style>

2. 高德地图多图层定义

高德提供多种瓦片图层，我们实现标准图、卫星图和交通图三个常用图层：

// 初始化地图，以北京为中心
const map = L.map('map').setView([39.9042, 116.4074], 13);

// 1. 定义高德地图各种图层
// 高德标准地图
const amapStandard = L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    attribution: '© 高德地图',
    name: '标准图'
});

// 高德卫星地图
const amapSatellite = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    attribution: '© 高德地图',
    name: '卫星图'
});

// 高德交通地图（可叠加在其他图层上）
const amapTraffic = L.tileLayer('https://ts0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&type=traffic&style=8', {
    subdomains: ['1', '2', '3', '4'],
    attribution: '© 高德地图',
    name: '交通图'
});

// 默认添加标准图层
amapStandard.addTo(map);

图层 URL 参数说明：

style=8：表示高德标准地图样式
style=6：表示高德卫星地图样式
type=traffic：表示交通图层

3. 图层切换控件实现

使用 Leaflet 的L.control.layers实现基础图层和叠加图层的管理：

// 2. 创建图层切换控件
// 基础图层组（只能同时显示一个）
const baseLayers = {
    "高德标准地图": amapStandard,
    "高德卫星地图": amapSatellite
};

// 叠加图层组（可与基础图层同时显示）
const overlayLayers = {
    "显示实时交通": amapTraffic
};

// 添加图层切换控件到地图（默认位置：右上角）
L.control.layers(baseLayers, overlayLayers).addTo(map);

图层切换原理：

基础图层（baseLayers）：互斥关系，一次只能显示一个
叠加图层（overlayLayers）：可与基础图层共存，支持多选
控件自动处理图层的显示 / 隐藏逻辑，无需手动编写切换代码

4. 内置比例尺控件

添加比例尺控件显示地图上的实际距离：

// 3. 添加比例尺控件（默认位置：右下角）
L.control.scale({
    imperial: false,  // 不显示英制单位（英里）
    metric: true,     // 显示公制单位（米/千米）
    maxWidth: 200     // 比例尺最大宽度（像素）
}).addTo(map);

比例尺会根据地图缩放级别自动调整显示比例，帮助用户直观了解地图上两点的实际距离。

5. 自定义坐标显示控件

开发一个显示鼠标当前位置坐标的自定义控件：

// 4. 创建自定义控件 - 显示当前鼠标坐标
const coordsControl = L.control({
    position: 'topleft'  // 控件位置：左上角
});

// 定义控件内容
coordsControl.onAdd = function(map) {
    // 创建控件DOM元素
    const div = L.DomUtil.create('div', 'custom-control');
    div.innerHTML = '<p>坐标: 等待鼠标移动...</p>';
    // 防止控件内点击事件冒泡到地图
    L.DomEvent.disableClickPropagation(div);
    return div;
};

// 添加自定义控件到地图
coordsControl.addTo(map);

// 监听鼠标移动事件，更新坐标显示
map.on('mousemove', function(e) {
    const coordsElement = document.querySelector('.custom-control p');
    coordsElement.innerHTML = `
        坐标: <br>
        纬度: ${e.latlng.lat.toFixed(6)}<br>
        经度: ${e.latlng.lng.toFixed(6)}
    `;
});

自定义控件开发要点：

通过L.control()创建控件实例，指定显示位置
实现onAdd方法，返回控件的 DOM 元素
使用L.DomUtil.create创建元素，避免直接操作 DOM
调用disableClickPropagation防止事件冒泡
通过地图事件更新控件内容

三、完整代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet+高德地图：图层与控件</title>
    <!-- 引入Leaflet资源 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" 
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" 
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" 
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" 
            crossorigin=""></script>
    <style>
        #map {
            width: 100%;
            height: 600px;
        }
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        /* 自定义控件样式 */
        .custom-control {
            background: white;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.2);
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Leaflet+高德地图：图层与控件示例</h1>
        <div id="map"></div>
        <p>
            右上角：图层切换控件 - 可切换不同地图源和叠加层<br>
            右下角：比例尺控件 - 显示地图比例尺<br>
            左上角：自定义控件 - 显示当前坐标
        </p>
    </div>

    <script>
        // 初始化地图
        const map = L.map('map').setView([39.9042, 116.4074], 13);

        // 1. 定义高德地图各种图层
        // 高德标准地图
        const amapStandard = L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            attribution: '© 高德地图',
            name: '标准图'
        });

        // 高德卫星地图
        const amapSatellite = L.tileLayer('https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            attribution: '© 高德地图',
            name: '卫星图'
        });

        // 高德交通地图（可以叠加在其他图层上）
        const amapTraffic = L.tileLayer('https://ts0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&type=traffic&style=8', {
            subdomains: ['1', '2', '3', '4'],
            attribution: '© 高德地图',
            name: '交通图'
        });

        // 默认添加标准图层
        amapStandard.addTo(map);

        // 2. 创建图层切换控件
        const baseLayers = {
            "高德标准地图": amapStandard,
            "高德卫星地图": amapSatellite
        };

        const overlayLayers = {
            "显示实时交通": amapTraffic
        };

        // 添加图层切换控件到地图
        L.control.layers(baseLayers, overlayLayers).addTo(map);

        // 3. 添加比例尺控件
        L.control.scale({
            imperial: false,  // 不显示英制单位
            maxWidth: 200     // 比例尺最大宽度
        }).addTo(map);

        // 4. 创建自定义控件 - 显示当前鼠标坐标
        const coordsControl = L.control({
            position: 'topleft'  // 控件位置：左上角
        });

        // 定义控件内容
        coordsControl.onAdd = function(map) {
            const div = L.DomUtil.create('div', 'custom-control');
            div.innerHTML = '<p>坐标: 等待鼠标移动...</p>';
            L.DomEvent.disableClickPropagation(div);
            return div;
        };

        // 添加自定义控件到地图
        coordsControl.addTo(map);

        // 监听鼠标移动事件，更新坐标显示
        map.on('mousemove', function(e) {
            const coordsElement = document.querySelector('.custom-control p');
            coordsElement.innerHTML = `
                坐标: <br>
                纬度: ${e.latlng.lat.toFixed(6)}<br>
                经度: ${e.latlng.lng.toFixed(6)}
            `;
        });
    </script>
</body>
</html>

四、进阶技巧与扩展应用

1. 控件位置定制

Leaflet 控件支持四个标准位置，也可通过 CSS 自定义：

// 四个标准位置
L.control({position: 'topleft'});   // 左上角
L.control({position: 'topright'});  // 右上角
L.control({position: 'bottomleft'}); // 左下角
L.control({position: 'bottomright'}); // 右下角

2. 自定义图层切换控件样式

通过 CSS 覆盖默认样式，美化图层切换控件：

/* 自定义图层切换控件样式 */
.leaflet-control-layers {
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
}

.leaflet-control-layers-toggle {
    background-image: url(https://blog.csdn.net/'layers-icon.png');
    width: 36px;
    height: 36px;
}

3. 动态添加 / 移除图层

除了通过控件切换，也可通过代码动态管理图层：

// 添加图层
map.addLayer(amapTraffic);

// 移除图层
map.removeLayer(amapTraffic);

// 检查图层是否已添加
if (map.hasLayer(amapTraffic)) {
    // 执行相应操作
}

4. 高德地图其他图层扩展

可根据需求添加更多高德地图图层：

高德夜景图：style=9
高德三维地图：需结合特定 API
高德路况图：实时交通信息

5. 商业使用注意事项

非商业用途可直接使用本文中的瓦片地址
商业用途需前往高德开放平台注册并申请开发者密钥
大规模商业应用需联系高德获取授权，遵守其服务条款

五、总结

本文详细介绍了 Leaflet 结合高德地图实现图层管理和控件开发的核心技术，包括：

高德地图多类型图层的接入与配置
基础图层与叠加图层的切换控制
内置比例尺控件的使用
自定义坐标显示控件的开发方法
图层与控件的高级扩展技巧

通过这些技术，开发者可以构建出功能丰富、交互友好的地图应用。建议在实际项目中根据用户需求合理设计图层组合和控件布局，平衡功能完整性与界面简洁性。

后续可进一步探索 Leaflet 的插件生态，如添加测量工具、距离计算、地理编码等功能，不断丰富地图应用的业务价值。

宝子们加加关注后续持续更新