leaflet加载聚合图
时间: 2023-10-15 08:05:55 浏览: 48
使用 Leaflet 加载聚合图需要依赖 Leaflet.markercluster 插件。以下是一个简单的示例:
1. 在 HTML 中引入 Leaflet 和 Leaflet.markercluster 的 CSS 和 JS 文件:
```
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.css" />
<!-- Leaflet.markercluster CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
<!-- Leaflet JS -->
<script src="https://cdn.jsdelivr.net/leaflet/1.3.1/leaflet.js"></script>
<!-- Leaflet.markercluster JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
```
2. 创建 Leaflet 地图:
```
var map = L.map('map').setView([51.505, -0.09], 13);
```
3. 添加一个 Leaflet.markercluster 图层:
```
var markers = L.markerClusterGroup();
```
4. 创建一组标记,并将它们添加到 Leaflet.markercluster 图层:
```
var marker1 = L.marker([51.5, -0.09]);
var marker2 = L.marker([51.52, -0.07]);
var marker3 = L.marker([51.49, -0.1]);
markers.addLayers([marker1, marker2, marker3]);
```
5. 将 Leaflet.markercluster 图层添加到地图上:
```
map.addLayer(markers);
```
这样就可以在 Leaflet 地图上加载聚合图了。你可以通过 Leaflet.markercluster 插件的配置选项来自定义聚合图的外观和行为。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)