maptalks / maptalks/maptalks.js

PointLayer在GroupGlLayer中鼠标事件失效

Open
#2,547 0 comments 0 reactions 1 assignee View on GitHub

@fuzhenn is already working on this.

Since Sep 19, 2025.

bug
Dominant language
HTML
Stars
4.5k
Forks
511
Avg merge
3d 58m
Merged PRs (30d)
1

Description

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

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();
});

#map {
width: 100%;
height: 100%;
}

```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.