如何为通过Ajax加载的GeoJSON设置地图视野范围？

问题原因 #

Leaflet-ajax是异步加载GeoJSON数据的，你当前的代码在调用map_of_route.fitBounds(geojsonLayer.getBounds())时，GeoJSON文件还没加载完成，此时geojsonLayer的边界（bounds）是无效的空值，所以会抛出Uncaught Error: Bounds are not valid.错误。

解决方案 #

监听Leaflet-ajax的data:loaded事件，等GeoJSON数据完全加载并渲染到图层后，再设置地图视野：

L.tileLayer(' ... ', { ... }).addTo(map_of_route);
var geojsonLayer = new L.GeoJSON.AJAX("my_json.json");
geojsonLayer.addTo(map_of_route);

// 监听数据加载完成事件，再设置视野范围
geojsonLayer.on('data:loaded', function() {
  map_of_route.fitBounds(geojsonLayer.getBounds());
});

额外注意事项 #

• 确保my_json.json文件路径正确，且返回的GeoJSON格式合法（比如是有效的LineString或其他带坐标的几何类型）
• 如果加载的GeoJSON包含多个要素，getBounds()会自动计算所有要素的整体边界

内容的提问来源于stack exchange，提问作者the_meter413