在前端 JS 文件中,使用 AJAX 技术从 /get_label_json 路由函数获取格式为{"y":115.9057200,"x":29.1660800,"label":0},的 JSON 数据,用leaflet绘制聚类图
时间: 2023-12-04 10:02:58 浏览: 56
以下是一个简单的示例代码,使用 jQuery 库实现 AJAX 请求以获取 JSON 数据,并使用 Leaflet 库绘制聚类图:
```javascript
// 创建 Leaflet 地图实例
var map = L.map('map').setView([29.1660800, 115.9057200], 10);
// 加载 Leaflet 瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
// 发送 AJAX 请求获取 JSON 数据
$.ajax({
url: '/get_label_json',
dataType: 'json',
success: function(data) {
// 将 JSON 数据转换为 Leaflet 图层
var markers = L.markerClusterGroup();
for (var i = 0; i < data.length; i++) {
var marker = L.marker([data[i].x, data[i].y]);
marker.bindPopup('Label: ' + data[i].label);
markers.addLayer(marker);
}
map.addLayer(markers);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error: ' + errorThrown);
}
});
```
需要注意的是,以上代码仅供参考,具体实现可能需要根据具体情况进行修改。例如,需要根据实际情况调整 Leaflet 地图的初始视图和瓦片图层,以及调整 AJAX 请求的 URL 和数据格式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)