使用leaflet 添加一个线
时间: 2024-05-05 17:15:39 浏览: 16
1. 首先,需要导入leaflet库和地图数据。
```
<!--leaflet库-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-4eMZ4nG8EeB9Mn+rA3vz3qhlW1iQK1xQZQ2oTgNtWdR9jpJb2ay7QKjPfRg7VpJxGS44C7Vl3jK3+7VXfRH0iw=="
crossorigin="" />
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-1zY5m5n5cLGn6PZU6wzv+1gj2n9XkN2y2QjD6PnozF+Jp6xhZV7q3Ki3+ZV1lXjK0sVlLJq3Wt1OJjxOc2Q64A=="
crossorigin=""></script>
<!--地图数据-->
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx/gpx.js"></script>
```
2. 创建一个地图容器。
```
<div id="map" style="height: 500px;"></div>
```
```
var map = L.map('map').setView([51.505, -0.09], 13); // 创建一个地图容器,并设置中心点和缩放级别
```
3. 添加一个线。
```
var polyline = L.polyline([
[51.505, -0.09],
[51.51, -0.1],
[51.51, -0.12]
], {color: 'red'}).addTo(map);
```
完整代码如下:
```
<!DOCTYPE html>
<html>
<head>
<title>添加线</title>
<meta charset="utf-8" />
<!--leaflet库-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-4eMZ4nG8EeB9Mn+rA3vz3qhlW1iQK1xQZQ2oTgNtWdR9jpJb2ay7QKjPfRg7VpJxGS44C7Vl3jK3+7VXfRH0iw=="
crossorigin="" />
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-1zY5m5n5cLGn6PZU6wzv+1gj2n9XkN2y2QjD6PnozF+Jp6xhZV7q3Ki3+ZV1lXjK0sVlLJq3Wt1OJjxOc2Q64A=="
crossorigin=""></script>
<!--地图数据-->
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx/gpx.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13); // 创建一个地图容器,并设置中心点和缩放级别
var polyline = L.polyline([
[51.505, -0.09],
[51.51, -0.1],
[51.51, -0.12]
], { color: 'red' }).addTo(map); // 添加一条线
</script>
</body>
</html>
```