如何在HEREmaps运行时以编程方式选择底图层？

问题背景 #

已实现通过自定义MapSettingsControl添加多底图层，代码示例：

const mapset = new H.ui.MapSettingsControl({
    alignment: 'bottom-right',
    baseLayers: [{
        label: 'Map view [day]',
        layer: defaultLayers.vector.normal.map,
    }, {
        label: 'Map view [night]',
        layer: defaultLayers.vector.normal.mapnight,
    }, {
        label: 'layers.satellite',
        layer: defaultLayers.raster.satellite.map,
    }],
});

ui.removeControl('mapsettings');
ui.addControl('mapsettings', mapset);

但遇到以下问题：

• 找不到selectLayer()方法实现编程切换图层
• 使用jQuery触发点击事件无响应
• 调用my_map.setBaseLayer()后图层菜单失效：用户点击其他图层会短暂显示后立刻切回设置图层，且该方法不支持通过MapSettingsControl列表索引值切换

正确解决方案 #

要同时保证编程切换和菜单正常工作，需操作MapSettingsControl实例自身的API，而非直接调用地图的setBaseLayer：

1. 通过图层对象切换 #

获取目标图层对象后，调用MapSettingsControl的setSelectedBaseLayer方法：

// 切换到夜间图层
mapset.setSelectedBaseLayer(defaultLayers.vector.normal.mapnight);

2. 通过索引值切换 #

若想通过MapSettingsControl中baseLayers数组的索引切换，先取出对应图层对象再调用上述方法：

// 切换到第三个图层（卫星层，索引为2）
const targetLayer = mapset.getBaseLayers()[2].layer;
mapset.setSelectedBaseLayer(targetLayer);

说明 #

直接调用地图的setBaseLayer会绕过MapSettingsControl的状态管理，导致控件内部状态与地图实际图层不一致，进而引发菜单失效问题。使用MapSettingsControl自身的setSelectedBaseLayer方法，会同步更新控件选中状态和地图底图层，保证两者状态一致，用户后续操作菜单也能正常切换。

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