fix: onMouseEnter & onMouseLeave trigger between joined layers (visgl#1671)

Author: Jungzl

src/mapbox/mapbox.ts

@@ -786,14 +786,23 @@ export default class Mapbox {
     }
   };
 
+  _uniqueLayersCount(features: MapboxGeoJSONFeature[] | null) {
+    if (!features) {
+      return 0;
+    }
+    return features.filter(
+      (feature, index) => features.findIndex(f => f.layer.id === feature.layer.id) === index
+    ).length;
+  }
+
   _updateHover(e: MapMouseEvent) {
     const {props} = this;
     const shouldTrackHoveredFeatures =
       props.interactiveLayerIds && (props.onMouseMove || props.onMouseEnter || props.onMouseLeave);
 
     if (shouldTrackHoveredFeatures) {
       const eventType = e.type;
-      const wasHovering = this._hoveredFeatures?.length > 0;
+      const hoveredLayersCount = this._uniqueLayersCount(this._hoveredFeatures);
       let features;
       if (eventType === 'mousemove') {
         try {
@@ -806,14 +815,14 @@ export default class Mapbox {
       } else {
         features = [];
       }
-      const isHovering = features.length > 0;
+      const hoveringLayersCount = this._uniqueLayersCount(features);
 
-      if (!isHovering && wasHovering) {
+      if (hoveringLayersCount < hoveredLayersCount) {
         e.type = 'mouseleave';
         this._onPointerEvent(e);
       }
       this._hoveredFeatures = features;
-      if (isHovering && !wasHovering) {
+      if (hoveringLayersCount > hoveredLayersCount) {
         e.type = 'mouseenter';
         this._onPointerEvent(e);
       }