【GIS】Leaflet：Web地图快速上手

最新推荐文章于 2025-02-24 10:57:08 发布

m0_74824845

最新推荐文章于 2025-02-24 10:57:08 发布

阅读量860

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/m0_74824845/article/details/144705850

版权

Leaflet 是一个轻量级的开源 JavaScript 库，专为构建交互式地图而设计。它功能丰富，支持常见的地图操作，如缩放、平移、标记和多种地图图层。通过灵活的插件系统，Leaflet 也能实现高级功能。本文旨在指导你如何从基础开始，逐步构建复杂的Web地图应用。

环境搭建

Leaflet非常容易上手。你只需要一个基本的HTML文件，就能在网页中显示地图。

首先，创建一个基础的index.html文件，并在文件中加载Leaflet的CSS和JavaScript文件。我们可以通过CDN直接引用这些资源：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 示例</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 1000px; }  /* 设置地图高度 */
    </style>
</head>

<body>
    <div id="map"></div>  <!-- 地图容器 -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // 初始化地图，设置中心和缩放级别
        var map = L.map('map').setView([39.90, 116.40], 10);

        // 创建高德地图图层
        L.tileLayer('http://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'],  // 子域名
            minZoom: 1,  // 最小缩放
            maxZoom: 19, // 最大缩放
            attribution: '高德地图'  // 版权信息
        }).addTo(map);  // 添加图层到地图
    </script>
</body>

</html>

L.map('map')：创建一个Leaflet地图对象，并将地图加载到页面中id为map的div元素内。
L.tileLayer()：添加一个瓦片图层，瓦片地图是分块加载的图像，可以像拼图一样显示大面积区域。我们使用OpenStreetMap的公共瓦片服务。
缩放级别：Leaflet的缩放级别从0到最大（取决于地图数据）。0是世界级别，较大的数字表示更详细的视图。

在Leaflet中，几何图形是指地图上绘制的基本图形，如点、线、面、圆等。这些图形广泛应用于表示各种地理信息。下面我们详细讲述如何使用Leaflet绘制点、线、面、圆等几何图形，并逐步解释每一个图形的实现方式和相关代码。

标识操作

移除版权标识

要移除地图右下角的默认版权标识，只需在初始化地图时将 attributionControl 设置为 false：

var map = L.map('map', {
    attributionControl: false // 关闭版权控制
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

自定义 Logo 和版权信息

要对 Logo 和版权信息进行自定义，可以在创建地图对象时配置 attributionControl。以下是示例代码：

var map = L.map('map', {
    attributionControl: true, // 启用版权控制
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

// 获取版权控制对象
var attribution = map.attributionControl;

// 自定义版权前缀，包含 Logo 和链接
attribution.setPrefix('<img src="logo.png" alt="Logo">');

// 添加其他版权信息
attribution.addAttribution('地图数据 &copy; <a href="https://www.amap.com/">高德地图</a>');

最低0.47元/天解锁文章