leaflet学习笔记-leaflet-ajax获取数据

在Leaflet中，我们可以使用AJAX请求从服务器获取数据，并将其作为图层添加到地图上。以下是一个使用Leaflet和AJAX从服务器获取GeoJSON数据并将其添加到地图上的示例代码：

// 创建地图实例
var map = L.map('mapid').setView([51.505, -0.09], 13);
 
// 添加地图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
 
// 使用AJAX获取GeoJSON数据
$.ajax({
    url: 'path/to/your/geojson', // 你的GeoJSON数据的URL
    dataType: 'json',
    success: function(data) {
        // 将GeoJSON数据添加到地图上
        L.geoJSON(data).addTo(map);
    },
    error: function(error) {
        console.error('Error loading GeoJSON data:', error);
    }
});

在这个例子中，我们首先创建了一个地图实例，并设置了一个视图中心和缩放级别。然后，我们添加了一个使用OpenStreetMap瓦片的基本图层。接下来，我们使用$.ajax()函数从服务器获取GeoJSON数据。在请求成功完成时，我们使用L.geoJSON()函数将获取的数据转换为Leaflet图层，并将其添加到地图上。如果请求失败，我们在控制台中记录错误信息。

请注意，你需要有一个有效的GeoJSON数据URL，并且确保你的服务器允许跨域请求（CORS），否则AJAX请求可能会失败。