[fix]点选多次点击同一要素，不纳入计数 review by xiongjj

SuperMap · Nov 6, 2024 · 5fae139 · 5fae139
1 parent 0187e28
commit 5fae139
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 7 deletions.
diff --git a/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts b/src/mapboxgl/layer-highlight/LayerHighlightViewModel.ts
@@ -3,7 +3,7 @@ import CircleStyle from 'vue-iclient/src/mapboxgl/_types/CircleStyle';
 import LineStyle from 'vue-iclient/src/mapboxgl/_types/LineStyle';
 import FillStyle from 'vue-iclient/src/mapboxgl/_types/FillStyle';
 import { getFeatureCenter, getValueCaseInsensitive } from 'vue-iclient/src/common/_utils/util';
-
+import isEqual from 'lodash.isequal';
 interface HighlightStyle {
   circle: InstanceType<typeof CircleStyle>;
   line: InstanceType<typeof LineStyle>;
@@ -491,10 +491,12 @@ export default class HighlightLayer extends mapboxgl.Evented {
           break;
         case DataSelectorMode.MULTIPLE: {
           const id = matchTargetFeature.id || getValueCaseInsensitive(matchTargetFeature.properties, 'smid');
-          if (
-            !id ||
-            !this.resultFeatures.map(item => item.id || getValueCaseInsensitive(item.properties, 'smid')).includes(id)
-          ) {
+          const includesSameId = id
+            ? this.resultFeatures.map(item => item.id || getValueCaseInsensitive(item.properties, 'smid')).includes(id)
+            : false;
+          const isClickSameFeature =
+            includesSameId || this.resultFeatures.some(item => isEqual(item.geometry, matchTargetFeature.geometry));
+          if (!isClickSameFeature) {
             this.resultFeatures.push(matchTargetFeature);
           }
           break;

diff --git a/src/mapboxgl/layer-highlight/__tests__/LayerHighlightViewModel.spec.js b/src/mapboxgl/layer-highlight/__tests__/LayerHighlightViewModel.spec.js
@@ -124,7 +124,7 @@ describe('LayerHighlightViewModel', () => {
     keyboardEvents.keydown({ ctrlKey: 'Control' });
   });
 
-  it('map click same feature', done => {
+  it('map click same feature by smid', done => {
     viewModel.setTargetLayers(['layer1']);
     const keyboardEvents = {};
     jest.spyOn(window, 'addEventListener').mockImplementation((type, cb) => {
@@ -170,6 +170,101 @@ describe('LayerHighlightViewModel', () => {
     expect(keyboardEvents.keyup).not.toBeUndefined();
     keyboardEvents.keydown({ ctrlKey: 'Control' });
   });
+
+  it('map click same feature by geometry', done => {
+    viewModel.setTargetLayers(['layer1']);
+    const keyboardEvents = {};
+    jest.spyOn(window, 'addEventListener').mockImplementation((type, cb) => {
+      keyboardEvents[type] = cb;
+    });
+    jest.spyOn(map, 'queryRenderedFeatures').mockImplementation(() => {
+      return [
+        {
+          type: 'feature',
+          properties: {
+            index: 1
+          },
+          geometry: {
+            type: 'MultiPolygon',
+            coordinates: [
+              [
+                [
+                  [116.452409755349, 40.92656164358],
+                  [116.483357386004, 40.9069469918439],
+
+                  [116.442423257771, 40.9417511118507],
+                  [116.452409755349, 40.92656164358]
+                ]
+              ],
+              [
+                [
+                  [116.560117987415, 40.9749988417875],
+
+                  [116.547892153981, 40.9705907375336],
+                  [116.552270926448, 40.980672910927],
+                  [116.560117987415, 40.9749988417875]
+                ]
+              ]
+            ]
+          }
+        }
+      ];
+    });
+    viewModel.once('mapselectionchanged', ({ features, dataSelectorMode }) => {
+      expect(features.length).toBe(0);
+      expect(dataSelectorMode).toBe('SINGLE');
+      viewModel.once('mapselectionchanged', ({ features, dataSelectorMode }) => {
+        expect(dataSelectorMode).toBe('MULTIPLE');
+        expect(features.length).toBeGreaterThan(0);
+        viewModel.once('mapselectionchanged', ({ features: nextFeatures, dataSelectorMode }) => {
+          expect(dataSelectorMode).toBe('MULTIPLE');
+          expect(nextFeatures.length).toBe(features.length);
+          viewModel.once('mapselectionchanged', ({ features: nextFeatures, dataSelectorMode }) => {
+            expect(dataSelectorMode).toBe('MULTIPLE');
+            expect(nextFeatures.length).toBe(features.length);
+            done();
+          });
+          jest.spyOn(map, 'queryRenderedFeatures').mockImplementation(() => {
+            return [
+              {
+                type: 'feature',
+                properties: {
+                  index: 1
+                },
+                geometry: {
+                  type: 'MultiPolygon',
+                  coordinates: [
+                    [
+                      [
+                        [116.452409755349, 40.92656164358],
+                        [116.483357386004, 40.9069469918439],
+
+                        [116.442423257771, 40.9417511118507],
+                        [116.452409755349, 40.92656164358]
+                      ]
+                    ]
+                  ]
+                }
+              }
+            ];
+          });
+          Promise.resolve().then(() => {
+            viewModel.map.fire('click', { target: map, point: { x: 5, y: 5 } });
+          });
+        });
+        Promise.resolve().then(() => {
+          viewModel.map.fire('click', { target: map, point: { x: 10, y: 5 } });
+        });
+      });
+      Promise.resolve().then(() => {
+        viewModel.map.fire('click', { target: map, point: { x: 10, y: 5 } });
+      });
+    });
+    viewModel.setMultiSelection(true);
+    expect(keyboardEvents.keydown).not.toBeUndefined();
+    expect(keyboardEvents.keyup).not.toBeUndefined();
+    keyboardEvents.keydown({ ctrlKey: 'Control' });
+  });
 
   it('updateHighlightDatas', done => {
     const pointLayer = {
@@ -225,4 +320,3 @@ describe('LayerHighlightViewModel', () => {
     done();
   });
 });
-