使用高德地图和vue-draggable-plus拖拽修改图层的层级

70 阅读1分钟

页面上有几个按钮来控制图层的展示,例如

image.png

这些区域可能会相互覆盖导致无法进行点击事件,通过拖拽可以修改图层的层级,可以达到将图层移到最上层来触发点击事件的效果。

遇到的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
      });
    });
  }