PointLayer在GroupGlLayer中鼠标事件失效

[BEIYIHUB]

PointLayer 设置markerallowoverlap=false，添加到GroupGlLayer后，鼠标事件失效，重现代码如下：

<script setup>
import { onMounted, ref } from "vue";
import {
  Map,
  TileLayer,
  PointLayer,
  GeoJSON,
  WMSTileLayer,
  VectorTileLayer,
  GroupGLLayer,
} from "maptalks-gl";
import { postAxiosData } from "../../request/index"
import geobuf from 'geobuf'
import Pbf from 'pbf'
let map;
const init = () => {
  map = new Map("map", {
    center: [116.95, 40.5],
    zoom: 14,
    baseLayer: new TileLayer("base", {
      urlTemplate:
        "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    }),
  });
  const data = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [116.85, 40.52],
        },
        properties: {
          name: "1",
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [116.86, 40.52],
        },
        properties: {
          name: "2",
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [116.87, 40.52],
        },
        properties: {
          name: "3",
        },
      },
      {
        type: "Feature",
        geometry: {
          type: "Point",
          coordinates: [116.89, 40.52],
        },
        properties: {
          name: "4",
        },
      },
    ],
  };
  let options = {
    id: "point",
    data: data,
    style: {
      markerFile: "/images/sqz.png",
      markerWidth: 24,
      markerHeight: 24,
      markerAllowOverlap: false,
      textFaceName: "sans-serif",
      textName: "{name}",
      textSize: 14,
      textDy: 24,
      textAllowOverlap: true,
    },
    clickHandler: (e) => {
      console.log(e);
    },
    mouseenterHandler: (e) => {
      console.log(e);
    },
    mouseoutHandler: (e) => {
      console.log(e);
    },
  };
  const markers = GeoJSON.toGeometry(options.data);
  for (let index = 0; index < markers.length; index++) {
    const element = markers[index];
    element.id = options.id + "-" + index;
    element.setSymbol(options.style);
    if (options.clickHandler) {
      element.on("click", (e) => {
        options.clickHandler(e.target);
      });
    }

    element.on("mouseenter", (e) => {
      if (options.mouseenterHandler) {
        options.mouseenterHandler(e.target);
      }
    });
    element.on("mouseout", (e) => {
      if (options.mouseoutHandler) {
        options.mouseoutHandler(e.target);
      }
    });
  }
  
  let pointLayer = new PointLayer("pointOverlay", {
    collision: true,
    collisionScope: "map",
  });
  pointLayer.addGeometry(markers);
  let groupLayer = new GroupGLLayer("group", [pointLayer], {
    sceneConfig: {
      environment: {
        enable: true,
        mode: 1,
        level: 0,
        brightness: 0,
      },
      shadow: {
        enable: false,
      },
      postProcess: {
        enable: true,
        bloom: {
          enable: true,
          threshold: 0,
          factor: 0.1,
          radius: 0.1,
        },
        ssr: {
          enable: true,
        },
      },
    },
  }).addTo(map);
};

const phr = (t)=> {
    let e = window.atob(t)
      , n = e.length
      , r = new Uint8Array(n);
    for (; n--; )
        r[n] = e.charCodeAt(n);
    return r
}

onMounted(() => {




  init();
});
</script>

<template>
  <div id="map"></div>
</template>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>