fix: 修复 source 模块 parser 为 Json geometry 情况数据拾取问题 (#1378)

dev-demos/bugs/index.md

@@ -1 +1 @@
-### 用于bug修复
+### 用于 BUG 修复

dev-demos/bugs/source/demos/source-geometry.tsx

@@ -0,0 +1,53 @@
+import {
+  Scene,
+  PolygonLayer,
+  // @ts-ignore
+} from '@antv/l7';
+// @ts-ignore
+import { GaodeMap } from '@antv/l7-maps';
+import React, { useEffect } from 'react';
+
+export default () => {
+  useEffect(() => {
+    fetch(
+      'https://gw.alipayobjects.com/os/antfincdn/pRl7S2quof/source-geometry.json',
+    )
+      .then((response) => response.json())
+      .then((data) => {
+        const scene = new Scene({
+          id: 'map',
+          map: new GaodeMap({
+            pitch: 0,
+            center: [113.8623046875, 30.031055426540206],
+            zoom: 3,
+          }),
+        });
+
+        const layer = new PolygonLayer({})
+          .source(data, {
+            parser: { type: 'json', geometry: '_geometry' },
+          })
+          .shape('fill')
+          .color('childrenNum', ['#0f9960', '#33a02c', '#377eb8'])
+          .active(true)
+          .style({});
+
+        layer.on('mousemove', (event) => {
+          console.log('event: ', event);
+        });
+
+        scene.on('loaded', () => {
+          scene.addLayer(layer);
+        });
+      });
+  }, []);
+  return (
+    <div
+      id="map"
+      style={{
+        height: '500px',
+        position: 'relative',
+      }}
+    />
+  );
+};

dev-demos/bugs/source/source.md

@@ -0,0 +1,3 @@
+### JSON - geometry
+
+<code src="./demos/source-geometry.tsx"></code>

packages/core/src/services/interaction/PickingService.ts

@@ -328,13 +328,13 @@ export default class PickingService implements IPickingService {
 
   private isPickingAllLayer() {
     // this.alreadyInPicking 避免多次重复拾取
-    if(this.alreadyInPicking) return false;
+    if (this.alreadyInPicking) return false;
     // this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
-    if(this.layerService.alreadyInRendering) return false;
+    if (this.layerService.alreadyInRendering) return false;
     // this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
-    if(this.interactionService.indragging) return false;
+    if (this.interactionService.indragging) return false;
     // 判断当前进行 shader pick 拾取判断
-    if(!this.layerService.getShaderPickStat()) return false;
+    if (!this.layerService.getShaderPickStat()) return false;
 
     // 进行拾取
     return true;
@@ -358,10 +358,7 @@ export default class PickingService implements IPickingService {
     }
   }
   private async pickingLayers(target: IInteractionTarget) {
-    const {
-      useFramebuffer,
-      clear,
-    } = this.rendererService;
+    const { useFramebuffer, clear } = this.rendererService;
     this.resizePickingFBO();
 
     useFramebuffer(this.pickingFBO, () => {

packages/source/src/parser/json.ts

@@ -20,30 +20,43 @@ export default function json(data: IJsonData, cfg: IParserCfg): IParserData {
     };
   }
 
+  // GeoJson geometry 数据
+  if (geometry) {
+    data
+      .filter((item: Record<string, any>) => {
+        return (
+          item[geometry] &&
+          item[geometry].type &&
+          item[geometry].coordinates &&
+          item[geometry].coordinates.length > 0
+        );
+      })
+      .forEach((col, index) => {
+        const _geometry = { ...col[geometry] };
+        const rewindGeometry = rewind(_geometry, true);
+        // multi feature 情况拆分
+        flattenEach(
+          rewindGeometry,
+          (currentFeature: Feature<Geometries, Properties>) => {
+            const coord = getCoords(currentFeature);
+            const dataItem = {
+              ...col,
+              _id: index,
+              coordinates: coord,
+            };
+
+            resultData.push(dataItem);
+          },
+        );
+      });
+
+    return {
+      dataArray: resultData,
+    };
+  }
+
   for (let featureIndex = 0; featureIndex < data.length; featureIndex++) {
     const col = data[featureIndex];
-
-    // GeoJson geometry 数据
-    if (geometry) {
-      const _geometry = { ...col[geometry] };
-      const rewindGeometry = rewind(_geometry, true);
-      // multi feature 情况拆分
-      flattenEach(
-        rewindGeometry,
-        (currentFeature: Feature<Geometries, Properties>) => {
-          const coord = getCoords(currentFeature);
-          const dataItem = {
-            ...col,
-            _id: featureIndex,
-            coordinates: coord,
-          };
-
-          resultData.push(dataItem);
-        },
-      );
-      continue;
-    }
-
     let coords = [];
 
     // GeoJson coordinates 数据

packages/source/src/source.ts

@@ -130,7 +130,7 @@ export default class Source extends EventEmitter implements ISource {
   }
 
   public getFeatureById(id: number): unknown {
-    const { type = 'geojson' } = this.parser;
+    const { type = 'geojson', geometry } = this.parser;
     if (type === 'geojson' && !this.cluster) {
       const feature =
         id < this.originData.features.length
@@ -138,7 +138,10 @@ export default class Source extends EventEmitter implements ISource {
           : 'null';
       const newFeature = cloneDeep(feature);
 
-      if (newFeature?.properties && (this.transforms.length !== 0 || this.dataArrayChanged)) {
+      if (
+        newFeature?.properties &&
+        (this.transforms.length !== 0 || this.dataArrayChanged)
+      ) {
         // 如果数据进行了transforms 属性会发生改变 或者数据dataArray发生更新
         const item = this.data.dataArray.find((dataItem: IParseDataItem) => {
           return dataItem._id === id;
@@ -146,6 +149,8 @@ export default class Source extends EventEmitter implements ISource {
         newFeature.properties = item;
       }
       return newFeature;
+    } else if (type === 'json' && geometry) {
+      return this.data.dataArray.find((dataItem) => dataItem._id === id);
     } else {
       return id < this.data.dataArray.length ? this.data.dataArray[id] : 'null';
     }
@@ -256,7 +261,7 @@ export default class Source extends EventEmitter implements ISource {
     this.tileset = this.initTileset();
 
     // 判断当前 source 是否需要计算范围
-    if(parser.cancelExtent) return;
+    if (parser.cancelExtent) return;
 
     // 计算范围
     this.extent = extent(this.data.dataArray);