leaflet中引入geojson鼠标无法触发事件

const linelayer = L.geoJSON((ress as any), {
      style: (feature:any) => {
            return {
                weight:3,
                color:
                   feature.properties?.color || feature.geometry.properties?.color,

                }
            },
}).on('click', ()=>{console.log(11111)}).addTo(map);

鼠标移入一直是小手形状,点击事件也无法触发,

打印出来的linelayer的events里也有已绑定好的事件

同样方法加入的L.marker的点击事件不受影响

Leaflet中为图层添加鼠标事件的方式与常规的HTML元素略有不同。您可以使用图层对象的on()方法来添加鼠标事件,例如:

javascript
linelayer.on('mouseover', function (e) {
  this.setStyle({
    color: 'red'
  });
});

linelayer.on('mouseout', function (e) {
  this.setStyle({
    color: 'blue'
  });
});

linelayer.on('click', function (e) {
  console.log('clicked on layer');
});
注意,在这里,我们将事件处理程序附加到了linelayer对象,而不是在geoJSON函数中直接添加事件监听器。

关于小手形状问题,您可以通过设置css样式来更改图层的鼠标指针样式。例如,在CSS文件中添加以下样式:

css
/* 将鼠标指针样式设置为默认箭头 */
.leaflet-container .leaflet-overlay-pane svg path,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
  cursor: default !important;
}
然后你需要将上述样式表附加到HTML页面中,例如:

html
<head>
  <link rel="stylesheet" href="path/to/your/css/file.css">
</head>

这应该会解决您遇到的小手形状的问题。