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

Author: Jungzl

src/mapbox/mapbox.ts

@@ -793,27 +793,32 @@ export default class Mapbox {
 
     if (shouldTrackHoveredFeatures) {
       const eventType = e.type;
-      const wasHovering = this._hoveredFeatures?.length > 0;
+      const hoveredFeaturesLen = this._hoveredFeatures?.length || 0
       let features;
       if (eventType === 'mousemove') {
         try {
-          features = this._map.queryRenderedFeatures(e.point, {
-            layers: props.interactiveLayerIds
-          });
+          features = this._map
+            .queryRenderedFeatures(e.point, {
+              layers: props.interactiveLayerIds
+            })
+            .filter(
+              (feature, index, array) =>
+                array.findIndex(f => f.layer.id === feature.layer.id) === index
+            );
         } catch {
           features = [];
         }
       } else {
         features = [];
       }
-      const isHovering = features.length > 0;
+      const hoveringFeatureLen = features.length
 
-      if (!isHovering && wasHovering) {
+      if (hoveringFeatureLen < hoveredFeaturesLen) {
         e.type = 'mouseleave';
         this._onPointerEvent(e);
       }
       this._hoveredFeatures = features;
-      if (isHovering && !wasHovering) {
+      if (hoveringFeatureLen > hoveredFeaturesLen) {
         e.type = 'mouseenter';
         this._onPointerEvent(e);
       }