leaflet将{"y":123.2885100,"x":42.7373900,"label":8}格式的json文件绘制成聚类图
时间: 2023-09-14 13:09:03 浏览: 75
clusterdemo:使用Leaflet进行聚类的演示
首先,需要将所有的坐标点读取并存储到一个数组中。然后,可以使用leaflet.markercluster插件来创建聚类图。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Marker Cluster Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.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" />
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
<script>
var data = [{"y":123.2885100,"x":42.7373900,"label":8}, {"y":123.2920400,"x":42.7402400,"label":3}, {"y":123.2923300,"x":42.7412700,"label":5}, {"y":123.2930800,"x":42.7423500,"label":2}, {"y":123.2920800,"x":42.7428800,"label":6}, {"y":123.2915900,"x":42.7437400,"label":4}, {"y":123.2902600,"x":42.7444200,"label":9}, {"y":123.2888600,"x":42.7441600,"label":1}, {"y":123.2877900,"x":42.7434600,"label":7}];
var map = L.map('map').setView([42.7373900, 123.2885100], 13); //设置初始视图和缩放级别
// 添加OpenStreetMap地图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
// 创建标记聚类图层
var markers = L.markerClusterGroup();
// 遍历所有数据点并添加到聚类图层中
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].x, data[i].y);
var marker = L.marker(location);
marker.bindPopup("Label: " + data[i].label); // 添加弹出窗口
markers.addLayer(marker);
}
map.addLayer(markers); // 显示聚类图层
</script>
</body>
</html>
```
在以上示例代码中,我们首先定义了一个包含所有坐标点的数组data。然后,我们创建了一个地图实例,并添加了OpenStreetMap地图。接着,我们使用L.markerClusterGroup()方法创建了一个标记聚类图层,并遍历了所有数据点,并将其添加到聚类图层中。最后,我们将聚类图层添加到地图实例中。
在这个示例中,我们使用了Leaflet和leaflet.markercluster插件来创建聚类图。Leaflet是一个轻量级的JavaScript库,用于创建交互式的地图。leaflet.markercluster是一个Leaflet插件,用于将大量标记聚集在一起,以提高地图性能和可读性。
阅读全文