资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

基础网络地图

创作时间:

作者:

@小白创作中心

基础网络地图

引用

CSDN

https://blog.csdn.net/weixin_54685571/article/details/139772301

本文将介绍如何使用Leaflet创建一个基本的网络地图。通过本文，你将学习到如何添加标记点、线段、多边形等地图元素，以及如何处理地图点击事件。

预览效果：基本网络地图

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>基础网络地图</title>
    <!-- More content will go here -->
    <link rel="stylesheet" href="css/leaflet.css">
    <script src="js/leaflet.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
        }
        .legend {
            font-size: 16px;
            line-height: 24px;
            color: #333333;
            font-family: 'Open Sans', Helvetica, sans-serif;
            padding: 10px 14px;
            background-color: rgba(245, 245, 220, 0.8);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            max-width: 250px;
            border: 1px solid grey;
        }
        .legend p {
            font-size: 16px;
            line-height: 24px;
        }
        .legend img {
            max-width: 200px;
            margin: auto;
            display: block;
        }
    </style>
</head>
<body>
    <!-- More content will go here -->
    <div id="map"></div>
    <script>
        var map = L.map("map", { center: [30.2489634, 120.2052342], zoom: 17 });
        L.tileLayer(
            "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            { attribution: "&copy; OpenStreetMap" }
        ).addTo(map);
        // 添加标记点
        L.circleMarker(
            [30.2489634, 120.2052342 - 0.001],
            { radius: 50, color: "black", fillColor: "red" }
        ).addTo(map);
        // 设置线段
        var line = L.polyline(
            [[30.2480698, 120.2079876], [30.2485086, 120.2070000]],
            { color: "red", weight: 10 }
        ).addTo(map);
        // 设置多边形
        var pol = L.polygon(
            [
                [30.2480634, 120.2050078],
                [30.2481569, 120.2058555],
                [30.2482589, 120.2065236],
                [30.2488098, 120.2053874]
            ],
            { color: "red", fillColor: "yellow", weight: 4 }
        ).addTo(map);
        // 添加长方形
        //定义一个Bounds 左上角和右下角的坐标
        var bounds = [[30.2480634, 120.2050078], [30.2488098, 120.2053874]]
        //创建Rectangle
        L.rectangle(bounds, { color: '#ff7800', weight: 1 }).addTo(map);
        // 设置弹窗
        line.bindPopup(
            "这是我随意设置的经纬度形成的线段。"
        );
        // 添加描述
        var legend = L.control({ position: "bottomleft" });
        legend.onAdd = function (map) {
            var div = L.DomUtil.create("div", "legend");
            div.innerHTML =
                '<p><b>Simple shapes in Leaflet</b></p><hr>' +
                '<p>This map shows an example of adding shapes ' +
                'on a Leaflet map</p>' +
                'The following shapes were added:<br>' +
                '<p><ul>' +
                '<li>A marker</li>' +
                '<li>A line</li>' +
                '<li>A polygon</li>' +
                '</ul></p>' +
                'The line layer has a <b>popup</b>. ' +
                'Click on the line to see it!<hr>' +
                'Created with the Leaflet library<br>' +
                '<img src="images/leaflet.png">';
            return div;
        };
        legend.addTo(map);
        var popup = L.popup();
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent(
                    "你当前点击的地理位置是" +
                    "<b>经度:</b> " + e.latlng.lng + "<br>" +
                    "<b>纬度:</b> " + e.latlng.lat
                )
                .openOn(map);
        }
        map.on("click", onMapClick);
    </script>
</body>
</html>

基本概念理解

网络地图通常由一个或多个图层组成。网络地图图层通常可分为两类：

背景层或底图，由网格图像或矢量图块的集合组成，通常是通用的，不是专门为我们的地图准备的
前景层或覆盖层通常是矢量图层（点、线和多边形），通常针对显示的特定地图网络进行准备和/或微调

背景图层通常是静态的、非交互式的。相反，前景图层通常是动态的，与用户交互相关，例如通过单击要素来查询图层属性

什么是图块层

瓦片层是网络地图背后的一项基本技术。它们构成了大多数网络地图中的背景层，从而帮助查看者在地理空间中定位前景层。

栅格图块

图块层通常由 PNG 图像组成。传统上，每个 PNG 图像都是256×256256×256像素大小。

为了覆盖缩放级别为的世界
0
，我们只需要一个图块。当我们转到缩放级别11，该单个图块被分割为2×2=42×2=4单独的图块。当我们进一步缩放级别时22，四块瓷砖中的每一块也分成四块，这样我们就有了4×4=164×4=16单独的图块，等等。一般来说，在缩放级别上全局图块层是是包含2是×2是=4是2是×2是=4是图块。在 Leaflet 地图的默认最大缩放级别 (19) 下，我们需要 274,877,906,944 个图块来覆盖地球50！

所有所需图块的 PNG 图像均由图块服务器发送，该图块服务器只是一个静态服务器（第5.4.2节），其中所有图块图像都存储在特定的目录结构中。要加载特定图块，我们输入一个 URL，例如
http://.../Z/X/Y.png
，其中
http://.../
是常量前缀，
Z
是缩放级别，
X
是列（即 x 轴），
Y
是行（即 y 轴）如杭州人民政府：https://b.tile.openstreetmap.org/17/109301/53972.png

矢量瓦片

较新的瓦片层技术是将瓦片设为矢量图层，而不是 PNG 图像，称为矢量瓦片。矢量瓦片的特点是可以旋转地图，而标签保持水平方向，并且可以平滑放大或缩小，而不像栅格瓦片层那样严格划分为离散缩放级别。矢量瓦片的主要优点是尺寸较小，样式灵活。

Leaflet 库本身并不支持矢量图块，不过有一个名为Leaflet.VectorGrid的插件可以实现这一点
例如：Vector tiles (Mapbox GL JS)

添加矢量标记

请记住，在使用创建的圆形标记中
L.circleMarker
，
radius
属性以像素为单位（例如
50
），这意味着圆形标记在屏幕上保持恒定大小，而与缩放级别无关。在使用创建的圆形中
L.circle
，半径以米为单位设置，这意味着圆形大小保持恒定的空间范围，随着放大或缩小而扩大或缩小。

L.circleMarker(
  [31.262218, 34.801472 - 0.001], 
  {radius: 50, color: "black", fillColor: "red"}
).addTo(map);

添加线段

// 添加线段
var line = L.polyline(
    [[30.2480698, 120.2079876], [30.2485086, 120.2070000]],
    { color: "red", weight: 10 }
).addTo(map);

添加几何图形

// 添加几何图形
var pol = L.polygon(
    [
        [30.2480634, 120.2050078],
        [30.2481569, 120.2058555],
        [30.2482589, 120.2065236],
        [30.2488098, 120.2053874]
    ],
    { color: "red", fillColor: "yellow", weight: 4 }
).addTo(map);

添加长方形

// 添加长方形
//定义一个Bounds 左上角和右下角的坐标
var bounds = [[30.2480634, 120.2050078], [30.2488098, 120.2053874]]
//创建Rectangle
L.rectangle(bounds, { color: '#ff7800', weight: 1 }).addTo(map);

添加弹出窗口

line.bindPopup(
    "这是我随意设置的经纬度线段。"
);

添加描述

// 添加描述
var legend = L.control({ position: "bottomleft" });
legend.onAdd = function (map) {
    var div = L.DomUtil.create("div", "legend");
    div.innerHTML =
        '<p><b>Simple shapes in Leaflet</b></p><hr>' +
        '<p>This map shows an example of adding shapes ' +
        'on a Leaflet map</p>' +
        'The following shapes were added:<br>' +
        '<p><ul>' +
        '<li>A marker</li>' +
        '<li>A line</li>' +
        '<li>A polygon</li>' +
        '</ul></p>' +
        'The line layer has a <b>popup</b>. ' +
        'Click on the line to see it!<hr>' +
        'Created with the Leaflet library<br>' +
        '<img src="images/leaflet.png">';
    return div;
};
legend.addTo(map);

添加地图点击事件

// 添加点击事件
var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent(
            "你当前点击的地理位置是" +
            "<b>经度:</b> " + e.latlng.lng + "<br>" +
            "<b>纬度:</b> " + e.latlng.lat
        )
        .openOn(map);
}
map.on("click", onMapClick);

学习文档

Chapter 6 Leaflet | Introduction to Web Mapping
Plugins - Leaflet - a JavaScript library for interactive maps
https://www.openstreetmap.org/