leaflet 地图基础应用篇

放逐者-保持本心，方可放逐

已于 2024-11-01 23:12:03 修改

阅读量1.7k

点赞数 9

分类专栏：地图类文章标签：前端 javascript

于 2024-11-01 23:06:50 首次发布

本文链接：https://blog.csdn.net/m0_51244077/article/details/143442393

版权

文章目录

leaflet 基础应用
一、基础介绍
二、功能总结
三、注意要点
四、疑难点
- （一）地理数据处理
- （二）自定义地图样式和功能

leaflet 基础应用

一、基础介绍

Leaflet是一个流行的开源JavaScript库，用于构建交互式地图应用程序。它以简洁的API、轻量级和高性能著称，能够方便地在网页中集成地图功能，适用于各种地理信息展示场景，如地理数据可视化、位置追踪等。

二、功能总结

1. 地图加载

功能描述：能够加载多种类型的地图瓦片作为底图，包括开源地图（如OpenStreetMap）和商业地图（如Mapbox）等。
实例应用：例如，在一个旅游网站上，为用户展示目的地城市的地图。可以使用以下代码加载OpenStreetMap作为底图：

// 创建地图容器
var map = L.map('map').setView([51.505, -0.09], 13);
// 加载OpenStreetMap瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

这段代码首先创建了一个地图容器，设置了初始中心坐标（纬度为51.505，经度为 -0.09）和缩放级别为13。然后加载了OpenStreetMap的瓦片图层，并将其添加到地图中。

2. 打点

功能描述：通过简单的代码在地图上添加标记点（Marker），可以自定义标记的图标、位置、弹出信息等。
实例应用：在一个餐厅推荐网站中，为每个餐厅在地图上添加标记点。假设餐厅数据是一个包含名称、位置（经纬度）和简介的数组，代码如下：

var restaurants = [
    {
   name: "餐厅A", lat: 37.7749, lng: -122.4194, description: "提供美味的海鲜"},
    {
   name: "餐厅B", lat: 37.7907, lng: -122.4056, description: "特色是意大利面"}
];

restaurants.forEach(function(restaurant) {
   
    var marker = L.marker([restaurant.lat, restaurant.lng]).addTo(map);
    marker.bindPopup("<b>" + restaurant.name + "</b><br>" + restaurant.description);
});

这里遍历餐厅数据数组，为每个餐厅创建一个标记点，将其添加到地图上，并绑定一个弹出框。当用户点击标记点时，弹出框会显示餐厅的名称和简介。

3. 图层控制

功能描述：可以对地图上的多个图层进行管理，包括添加、移除、显示和隐藏图层等操作，方便用户根据需求查看不同的地理信息。
实例应用：在一个城市规划应用中，有基础地形图层、交通图层和建筑图层。可以这样控制图层：

// 加载基础地形图层
var baseLayer = L.tileLayer('https://{s}.tile.example.com/base/{z}/{x}/{y}.png', {
   
    attribution: 'Base Layer Attribution'
}).addTo(map);

// 加载交通图层
var trafficLayer = L.tileLayer('https://{s}.tile.example.com/traffic/{z}/{x}/{y}.png', {
   
    attribution: 'Traffic Layer Attribution'
});

// 加载建筑图层
var buildingLayer = L.tileLayer('https://{s}.tile.example.com/building/{z}/{x}/{y}.png', {
   
    attribution: 'Building Layer Attribution'
});

// 创建图层控制对象并添加图层
var layersControl = L.control.layers({
   
    "基础地形": baseLayer
}, {
   
    "交通": trafficLayer,
    "建筑": buildingLayer
}).addTo(map);

在这个例子中，创建了基础地形、交通和建筑三个图层。通过L.control.layers创建了图层控制对象，将交通和建筑图层添加到控制对象中。用户可以通过界面上的图层控制部件来选择显示或隐藏交通和建筑图层。

4. 绘制

功能描述：支持在地图上绘制各种几何图形，如点、线、多边形等，并且可以对绘制的图形进行编辑和属性设置。
实例应用：在一个土地测量应用中，用户可以在地图上绘制土地边界。代码如下：

// 启用绘制多边形功能
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
   
    edit: {
   
        featureGroup: drawnItems
    },
    draw: {
   
        polygon: true
    }
});
map.addControl(drawControl);

// 监听绘制完成事件
map.on('draw:created', function (e) {
   
    var layer = e.layer;
    drawnItems.addLayer(layer);
    // 可以在这里获取绘制的多边形的坐标等信息进行后续处理
});

这段代码启用了在地图上绘制多边形的功能，创建了一个FeatureGroup来存储绘制的图形。当用户绘制完成一个多边形后，将其添加到FeatureGroup中，并且可以获取多边形的坐标信息用于土地面积计算等后续处理。

5. 聚合

功能描述：对地图上的大量点数据进行聚合，以减少视觉混乱，通常根据一定的距离或区域规则将多个点合并为一个代表元素，并显示聚合后的信息。
实例应用：在一个人口密度展示应用中，有大量的人口分布点数据。可以按照一定的地理区域（如街区）进行聚合：

// 假设已经有一个包含人口分布点的数组points，每个点有位置（经纬度）和人口数量属性
var hexbin = L.hexbinLayer(points, {
   
    radius: 100, // 聚合半径（单位根据地图投影而定）
    valueFn: function(d) {
    return d.population; }, // 聚合点的人口数量作为聚合值
    tooltipFn: function(d) {
    return "人口数量: " + d.length; } // 聚合后的提示信息
}).addTo(map);

这里使用L.hexbinLayer函数对人口分布点进行聚合，将半径范围内的点聚合为一个六边形，以人口数量作为聚合值，并设置了一个提示信息，当用户鼠标悬停在聚合后的六边形上时，会显示人口数量相关的提示。

6. 特效

功能描述：为地图或地图元素添加各种特效，如阴影、发光、动画等，增强地图的视觉效果和交互性。
实例应用：在一个夜景地图应用中，为城市建筑图层添加发光特效，使建筑看起来更有立体感。假设建筑图层是一个自定义的矢量图层buildingVectorLayer：

// 为建筑图层添加发光特效（可能需要使用第三方插件或自定义CSS样式）
buildingVectorLayer.setStyle({
   
    'fill-opacity': 0.8,
    'stroke': 'white',
    'stroke-width': 2,
    'box-shadow': '0 0 10px white' // 添加发光特效的CSS样式
});

通过设置建筑图层的样式，为建筑添加了发光特效，使其在地图上更加醒目，营造出夜景的视觉效果。同时，可以根据不同的场景和需求，添加其他类型的特效，如地图缩放时的平滑过渡动画等。

实例应用

以下是一些关于 Leaflet 地图加载功能的应用示例：

1. 加载多个不同来源的地图图层并切换

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Multiple Map Layers Example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        #map {
     
            height: 500px;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([37.7749, -122.4194], 12);

        // OpenStreetMap图层
        var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenS

最低0.47元/天解锁文章