maptalks获取所有图层并把图层按照zIndex排序

maptalks获取所有图层并把图层按照zIndex排序

获取所有图层

通过调用 map.getLayers() 可以返回当前地图上所有的图层集合。此方法会返回一个数组形式的结果，其中包含了地图上的每一个图层层级对象。

图层属性中的 ZINDEX

每种图层类型（如矢量图层、瓦片图层等）都具有自身的 zIndex 属性用于控制渲染顺序。可以通过访问这些图层实例的 .getZIndex() 来读取它们各自的层级值。

// 假设 map 已经初始化好
function sortLayersByZIndex(map) {
    const layers = map.getLayers(); // 获取所有图层
    
    // 使用 Array.prototype.sort() 对图层按 zIndex 升序排序
    return layers.slice().sort((a, b) => a.getZIndex() - b.getZIndex());
}

const sortedLayers = sortLayersByZIndex(map);

sortedLayers.forEach(layer => {
    console.log(`Layer Name: ${layer.options.name}, zIndex: ${layer.getZIndex()}`);
});

上述代码中：

调用了 map.getLayers() 方法获取到所有图层；
利用 Array.prototype.sort() 函数实现了基于 zIndex 的排序逻辑；
输出了每一层的名字及其对应的 zIndex 值以便验证结果。
注意这里使用了 slice() 复制了一份原数组再做修改，这样不会影响原始数据结构。

关于动态调整 zIndex
如果需要手动更改某个特定图层的位置，则可通过如下方式设置新的 zIndex 并重新刷新视图效果:

let targetLayer = map.getLayer('target-layer-id'); // 替换为目标图层ID
if (targetLayer) {
    targetLayer.setZIndex(newZIndexValue);         // 设定新数值
}
map.render();                                      // 强制重绘整个画布区域