Question

使用leaflet框架的new L.supermap.TiledMapLayer方法加载发布的地图服务时，加载的图层怎样在地图容器居中，图形刚好能铺满地图容器，之前自己的做法是map.setView([lat,lng],level)方法实现当这种需要手动设置图层中心点和缩放级别,leaflet框架中有没有相关方法实现。

Answer 1

【解决办法】 Leaflet 的 fitBounds() 方法来实现图层的自动居中铺满，无需手动计算中心点和缩放级别

// 1. 初始化地图（先给一个临时视图）
var map = L.map(‘map’).setView([0, 0], 1);

// 2. 创建超图图层
var tiledLayer = L.supermap.tiledMapLayer(“您的超图地图服务地址”);

// 3. 将图层添加到要素组中（用于后续获取边界）
var layerGroup = L.featureGroup([tiledLayer]).addTo(map);

// 4. 监听图层加载完成事件
tiledLayer.on(‘load’, function() {
    // 获取图层组的边界范围
    var bounds = layerGroup.getBounds();
    // 让地图自动适配这个边界，实现居中铺满
    map.fitBounds(bounds, { 
        padding: [20, 20]  // 可选：与容器边缘保留20px间距
    });
});

Comments

执行layerGroup.getBounds()方法时程序报错

   let layer = new L.supermap.TiledMapLayer(options.url, {
                noWrap: true,
                transparent: true,
            }).addTo(this.map);
    // 3. 将图层添加到要素组中（用于后续获取边界）
            var layerGroup = L.featureGroup([layer]).addTo(this.map);
            // 4. 监听图层加载完成事件
            layer.on('load', () => {
                // 获取图层组的边界范围
                var bounds = layerGroup.getBounds();
                // 让地图自动适配这个边界，实现居中铺满
                this.map.fitBounds(bounds, {
                    padding: [20, 20]  // 可选：与容器边缘保留20px间距
                });
            });

---

【解决办法】L.supermap.TiledMapLayer 属于瓦片图层（TileLayer），并没有 getLatLng() 或 getBounds() 方法

// 1 创建地图
let map = L.map('map').setView([0,0],1);

// 2 创建瓦片图层
let layer = new L.supermap.TiledMapLayer(options.url,{
    noWrap:true,
    transparent:true
}).addTo(map);

// 3 读取地图服务信息
new L.supermap.MapService(options.url).getMapInfo(function(serviceResult){

    let mapInfo = serviceResult.result;

    // iServer 返回的 bounds
    let bounds = mapInfo.bounds;

    // 转成 Leaflet Bounds
    let leafletBounds = L.latLngBounds(
        [bounds.bottom, bounds.left],
        [bounds.top, bounds.right]
    );

    // 自动居中并铺满
    map.fitBounds(leafletBounds,{
        padding:[20,20]
    });

});