页面上有几个按钮来控制图层的展示,例如
这些区域可能会相互覆盖导致无法进行点击事件,通过拖拽可以修改图层的层级,可以达到将图层移到最上层来触发点击事件的效果。
遇到的bug:这段代码初看没有问题,但是可能是因为zindex和其他的冲突了,导致事件消失,此处暴力处理,将每一层的层级都*100处理
layers[data.value]?.reSetIndex(i + 1);
// store.js
export const useLayerBoxStore = defineStore('layerBox', {
state: () => ({
// 存储所有展示的地图图层
layerBox: []
}),
actions: {
setLayerIndex() {
this.layerBox.forEach((data, i) => {
// 注释的代码为错误代码
// layers[data.value]?.reSetIndex(i + 1);
layers[data.value]?.reSetIndex((i + 1) * 100);
});
}
}
});
重设该层级下所有多边形的zindex
//层级组件
reSetIndex(index) {
this.polygonList.forEach(polygon => {
polygon.setOptions({
zIndex: index
});
});
}