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

T0uken

于 2024-09-26 14:32:23 发布

阅读量1.3k

点赞数 30

分类专栏： GIS 文章标签：前端 js leaflet gis

本文链接：https://blog.csdn.net/2303_80346267/article/details/142555140

版权

GIS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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>');

交互控制

固定缩放比例

你可以通过在地图初始化时设置 minZoom 和 maxZoom 来限制地图的缩放范围。例如，如果你希望用户只能在层级 5 到 10 之间缩放地图，你可以这样设置：

// 初始化地图，并设置最小缩放级别为5，最大缩放级别为10
var map = L.map('map', {
    minZoom: 5,   // 最小缩放级别
    maxZoom: 10   // 最大缩放级别
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

固定视野范围

通过 maxBounds 限制地图的拖动范围，使用户无法拖动地图超出设定的边界。maxBounds 是由两个对角坐标点组成的矩形框，可以限制地图的可视区域。

例如，你想让地图视野只能在某个区域内移动：

// 设置地图的最大边界
var bounds = [[38, 116], [40, 118]]; 

// 初始化地图，并设置 maxBounds
var map = L.map('map', {
    maxBounds: bounds,    // 限制地图视野范围
    maxBoundsViscosity: 1.0 // 控制视图拖动时的粘性，1表示严格限制
}).setView([39.90, 116.40], 7);

minZoom 和 maxZoom：这两个参数分别设置了地图的最小和最大缩放级别，防止用户缩小得太多或放大得太多。
maxBounds：限制用户拖动地图的边界范围，参数为一个二维数组，定义了地图的地理边界。
maxBoundsViscosity：这是一个取值范围为 0 到 1 的值，用于控制视图边界的粘性，0 表示没有限制，1 表示严格限制。

禁止缩放

要禁止地图的缩放，可以在初始化时设置 scrollWheelZoom 和 doubleClickZoom 选项为 false，并将 zoomControl 设为 false，以禁用鼠标滚轮缩放、双击缩放和缩放控件。以下是示例代码：

// 初始化地图，禁止放缩
var map = L.map('map', {
    zoomControl: false,       // 禁止缩放控件
    scrollWheelZoom: false,   // 禁止滚轮缩放
    doubleClickZoom: false     // 禁止双击缩放
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

在这段代码中，通过将 scrollWheelZoom 和 doubleClickZoom 设置为 false，以及禁用 zoomControl，实现了禁止地图缩放的功能。这样，用户将无法通过滚轮、双击或缩放控件来改变地图的缩放级别。

禁止移动

要禁止地图移动，可以在初始化时设置 dragging 选项为 false。这样用户就无法通过拖动来移动地图。以下是示例代码：

// 初始化地图，禁止移动
var map = L.map('map', {
    dragging: false, // 禁止拖动
    scrollWheelZoom: false // 禁止滚轮缩放
}).setView([39.90, 116.40], 7); // 设置初始视图中心和缩放级别

在这段代码中，通过将 dragging 设置为 false，用户无法拖动地图。此外，将 scrollWheelZoom 设置为 false 可以禁止使用滚轮进行缩放。这样，地图将保持静止。

几何图形

点（Marker）

点通常用于标记地图上的具体位置，在Leaflet中通过L.marker()函数来实现。你可以设置标记的经纬度坐标，并为标记添加弹出信息（如点击时显示的提示信息）。

// 创建一个标记，并设置其位置为北京附近 (40.0, 116.5)
var marker = L.marker([40.0, 116.5]).addTo(map);

// 为标记添加弹出信息，当用户点击标记时会显示弹窗
marker.bindPopup("<b>你好，世界！</b><br>这是一个标记。").openPopup();

L.marker([经度, 纬度])：创建一个新的标记对象，传入的参数为点的地理坐标。
addTo(map)：将标记添加到指定的地图对象map中。
bindPopup()：绑定一个弹出信息，当用户点击该标记时，会显示相关信息。

线（Polyline）

线用于连接多个地理点，常见应用场景为路径、河流等。你可以通过L.polyline()绘制线段，并通过传入一组坐标点来定义线的形状。

// 创建一条线，连接三个坐标点
var polyline = L.polyline([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'blue' // 设置线的颜色为蓝色
}).addTo(map);

// 为线段绑定弹出信息
polyline.bindPopup("这是一个线段。");

L.polyline([点数组])：创建一条线，传入一个包含多个坐标点的数组，每个点都是一对经纬度坐标。
color：指定线段的颜色。
addTo(map)：将线段添加到地图上。
bindPopup()：为线段绑定弹出信息。

面（Polygon）

面是由多个点组成的封闭图形，如区域、多边形等。在Leaflet中，使用L.polygon()来创建面。

// 创建一个多边形，传入三个或以上的坐标点
var polygon = L.polygon([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'green',  // 设置边框颜色为绿色
    fillColor: '#f03',  // 填充颜色为红色
    fillOpacity: 0.5  // 设置填充透明度
}).addTo(map);

// 为多边形绑定弹出信息
polygon.bindPopup("这是一个多边形。");

L.polygon([点数组])：创建一个多边形，传入多个坐标点，最后的点会自动与第一个点相连形成闭合的图形。
fillColor：设置多边形内部的填充颜色。
fillOpacity：设置填充颜色的透明度，取值范围为0（完全透明）到1（完全不透明）。

圆（Circle）

圆在Leaflet中使用L.circle()来绘制。圆的中心位置由一个经纬度点决定，半径以米为单位。

// 创建一个圆，中心点为 [40, 116]，半径为500米
var circle = L.circle([40, 116], {
    color: 'red',  // 圆的边框颜色
    fillColor: '#f03',  // 填充颜色
    fillOpacity: 0.5,  // 填充透明度
    radius: 500  // 圆的半径（米）
}).addTo(map);

// 为圆形绑定弹出信息
circle.bindPopup("这是一个圆形。");

L.circle([经度, 纬度], {属性})：创建一个圆，传入圆心坐标和配置参数，如边框颜色、填充颜色、透明度及半径。
radius：圆的半径，单位是米。
color：设置圆的边框颜色。
bindPopup()：为圆形绑定弹出信息。

自定义样式

Leaflet允许你对这些几何图形进行自定义样式配置和交互事件。每个几何图形可以通过传递额外的样式属性来自定义外观。

// 自定义线的样式
var customLine = L.polyline([
    [40, 116],
    [40.1, 116],
    [40, 117]
], {
    color: 'purple', // 设置线的颜色为紫色
    weight: 5, // 设置线的宽度
    opacity: 0.7, // 设置线的透明度
    dashArray: '5, 10' // 设置虚线样式，表示5像素实线和10像素空白间隔
}).addTo(map);

// 自定义圆形样式
var customCircle = L.circle([51.508, -0.11], {
    color: 'yellow',
    fillColor: '#ff0',
    fillOpacity: 0.3,
    radius: 300
}).addTo(map);

交互事件

你可以为图形绑定事件，例如当鼠标悬停、点击时触发动作。

// 监听多边形的点击事件
polygon.on('click', function(e) {
    alert("你点击了多边形！");
});

// 当鼠标悬停在圆形上时，改变圆的颜色
circle.on('mouseover', function() {
    circle.setStyle({
        fillColor: 'blue' // 鼠标悬停时，改变填充颜色为蓝色
    });
});

dashArray：用于线条的虚线设置，参数为实线与空白的长度（单位为像素）。
weight：设置线条的宽度。
on('事件类型', 回调函数)：绑定一个事件监听器。例如，click事件会在用户点击该图形时触发

图层加载

Leaflet 支持加载多种图层，如瓦片地图、WMS图层（Web Map Service）和GeoJSON数据。

加载自定义瓦片图层

如果你有自己的瓦片服务器，可以加载自定义瓦片图层：

// 使用自定义瓦片服务器加载地图瓦片
L.tileLayer('https://{s}.yourtileserver.com/{z}/{x}/{y}.png', {
    maxZoom: 18 // 设置最大缩放级别
}).addTo(map);

加载WMS图层

WMS（Web Map Service）是地理信息系统中常见的标准地图服务协议。Leaflet可以通过WMS加载远程地图图层：

// 使用WMS加载地图图层
L.tileLayer.wms('https://ahocevar.com/geoserver/wms', {
    layers: 'topp:states', // 指定要加载的图层
    format: 'image/png',  // 返回图片格式
    transparent: true,  // 是否透明显示
    attribution: 'WMS 示例' // 添加版权信息
}).addTo(map);

加载GeoJSON数据

GeoJSON是一种用于表示地理空间数据的标准格式，Leaflet 支持直接加载并显示GeoJSON数据。

// 定义一个简单的GeoJSON对象
var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "地点名称",
        "amenity": "地点类型",
        "popupContent": "这里是弹窗信息。"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-0.09, 51.5] // 经纬度
    }
};

// 将GeoJSON数据添加到地图
L.geoJSON(geojsonFeature).addTo(map);

如果你有外部的GeoJSON文件，你也可以通过AJAX请求加载数据并显示：

// 使用fetch加载GeoJSON数据并显示
fetch('your-geojson-file.json')
    .then(response => response.json())
    .then(data => L.geoJSON(data).addTo(map)); // 将加载的数据添加到地图

图层控制

地图初始化

首先，我们需要初始化一个 Leaflet 地图，设置其中心点和缩放级别。

// 创建地图实例，设置中心点和缩放级别
var map = L.map('map').setView([39.90,116.40], 13); // 设置北京为中心点

创建图层

接下来，我们可以创建高德地图的基础图层。高德地图有多种样式可供选择，这里提供两个示例：

// 创建高德普通地图图层
var normalLayer = 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
});

// 创建高德卫星地图图层
var satelliteLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
    subdomains: ['1', '2', '3', '4'],
    minZoom: 1,
    maxZoom: 19
});

创建叠加图层

我们还可以添加一些叠加图层，比如标记。以下示例创建两个标记：

// 创建标记
var marker1 = L.marker([39.91,116.40]).bindPopup("天安门");
var marker2 = L.marker([31.98,120.91]).bindPopup("另一个位置");

// 创建叠加图层对象
var overlayMaps = {
    "南京": marker1,
    "另一个位置": marker2
};

添加图层控制

使用 L.control.layers 创建图层控制，并将基础图层和叠加图层添加到地图中：

// 创建基础图层对象
var baseMaps = {
    "高德普通地图": normalLayer,
    "高德卫星地图": satelliteLayer
};

// 添加图层控制到地图
L.control.layers(baseMaps, overlayMaps).addTo(map);

添加标记到地图

最后，确保将标记添加到地图，以便它们可以显示：

// 添加标记到地图
marker1.addTo(map);
marker2.addTo(map);

完整示例代码

以下是完整的 HTML 示例，展示如何实现高德地图的图层控制功能：

<!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>
    <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); // 设置北京为中心点

        // 创建高德普通地图图层
        var normalLayer = 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
        }).addTo(map);

        // 创建高德卫星地图图层
        var satelliteLayer = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: ['1', '2', '3', '4'],
            minZoom: 1,
            maxZoom: 19
        });

        // 创建标记
        var marker1 = L.marker([39.91,116.40]).bindPopup("天安门");
        var marker2 = L.marker([31.98,120.91]).bindPopup("另一个位置");

        // 创建叠加图层对象
        var overlayMaps = {
            "天安门": marker1,
            "另一个位置": marker2
        };

        // 创建基础图层对象
        var baseMaps = {
            "高德普通地图": normalLayer,
            "高德卫星地图": satelliteLayer
        };

        // 添加图层控制到地图
        L.control.layers(baseMaps, overlayMaps).addTo(map);

        // 添加标记到地图
        marker1.addTo(map);
        marker2.addTo(map);
    </script>
</body>
</html>