Leaflet 中创建一个二维地图

要在 Leaflet 中创建一个二维地图,需要以下步骤:

1. 引入 Leaflet 库

首先,你需要在 HTML 文件中引入 Leaflet 库的 CSS 和 JavaScript 文件。你可以从官方网站下载 Leaflet,或者通过 CDN 引入。

html 复制代码
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<!-- Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

2. 创建地图容器

在 HTML 文件中创建一个 <div> 元素作为地图容器,指定一个唯一的 ID 用于在 JavaScript 中引用该地图。

html 复制代码
<div id="map" style="width: 100%; height: 400px;"></div>

3. 初始化地图

在 JavaScript 文件中使用 Leaflet 创建地图,并设置地图的中心位置和缩放级别。

javascript 复制代码
var map = L.map('map').setView([51.505, -0.09], 13); // 设置地图中心和缩放级别

4. 添加地图图层

Leaflet 支持添加不同类型的图层,比如瓦片图层(Tile Layer)、标记图层(Marker Layer)等。你可以从不同的服务提供商获取地图瓦片图层,比如 OpenStreetMap、Google Maps 等。

javascript 复制代码
// 添加 OpenStreetMap 图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

5. 可选:添加标记

如果需要,在地图上添加标记点。

javascript 复制代码
var marker = L.marker([51.5, -0.09]).addTo(map);

6. 完整示例

下面是一个完整的示例代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var marker = L.marker([51.5, -0.09]).addTo(map);
    </script>
</body>
</html>

以上代码创建了一个基本的 Leaflet 地图,并在地图上添加了一个标记点。你可以根据自己的需求对地图进行进一步定制和添加其他图层。

相关推荐
敲敲敲-敲代码10 小时前
【ArcGIS】ArcGIS10.6彻底卸载和ArcGIS10.2安装全过程
arcgis
星火19131413 小时前
arcgis jsapi 4.31 调用geoserver 发布的wms服务
arcgis·geoserver
规划GIS会2 天前
ima知识库第二弹,Python for ArcGIS Pro | 简简单单写个脚本工具
开发语言·python·arcgis
小艳加油2 天前
MaxEnt物种分布建模全流程;R+ArcGIS+MaxEnt模型物种分布模拟、参数优化方法、结果分析制图与论文写作
arcgis·r语言·物种分布模拟·maxent模型
生信学习小达人3 天前
在ArcGIS中导入气候tif文件出现 “输入与输出之间的基准面冲突” 警告
arcgis
敲敲敲-敲代码3 天前
【ArcGIS操作】ArcGIS 进行空间聚类分析
arcgis
xa138508694 天前
ARCGIS PRO SDK VB2022 图层要素类类型判断
arcgis
weixin_贾6 天前
AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用
arcgis·swat模型·面源污染
xa138508696 天前
ARCGIS PRO SDK ProWindow自定义窗口DataGrid控件的应用
arcgis
赵钰老师7 天前
【Nature顶刊级科研绘图】DeepSeek、ChatGPT等大语言模型绘图(如何画图、如何标注、如何改图、如何美化、如何组合、如何排序)
人工智能·arcgis·信息可视化·语言模型·r语言