Leaflet中定位单个或多个实体图形视图

效果

代码

定位单个实体

const latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];

const polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// 将地图缩放到折线
map.fitBounds(polyline.getBounds());

定位多个实体

const polyline1 = L.polyline([
  [51.5, -0.1],
  [51.6, -0.2],
]);

const polyline2 = L.polyline([
  [51.7, -0.3],
  [51.8, -0.4],
]);

// 添加到地图
polyline1.addTo(map);
polyline2.addTo(map);

// 创建一个空的 LatLngBounds 对象，用于存储所有 polyline 的边界框
let bounds = new L.LatLngBounds(polyline1.getBounds()); // 获取 polyline1 的边界初始化

// 将每条 polyline 的边界框扩展到整体边界框中
bounds.extend(polyline1.getBounds());
bounds.extend(polyline2.getBounds());

// 定位视图到合并后的整体边界框
map.fitBounds(bounds);

注意

虽然获取了polyline1作为初始化，但依然需要extend添加扩展，否则无法定位到该实体