leaflet绘制点线面
时间: 2023-09-13 14:09:04 浏览: 69
leaflet是一个基于JavaScript的开源地图库,可以用于绘制点、线和面。下面是一些基本的示例代码:
1. 绘制点:
```javascript
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
```
2. 绘制线:
```javascript
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var latlngs = [
[51.5, -0.09],
[51.51, -0.1],
[51.52, -0.12]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
```
3. 绘制面:
```javascript
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(map);
```
这些示例代码演示了如何在leaflet地图上绘制点、线和面。你可以根据自己的需求调整坐标和样式。