fix: 拾取操作 (#1405)

dev-demos/tile/district/chinamap.tsx

@@ -67,6 +67,7 @@ export default () => {
       stencil: true,
       map: new Map({
         center: [112, 30],
+
         // zoom: 12,
         zoom: 3,
       }),

dev-demos/tile/district/rasterData.tsx

@@ -75,8 +75,8 @@ export default () => {
         .then((res) => res.json())
         .then((maskData) => {
           const layer = new RasterLayer({
-            // mask: true,
-            // maskfence: maskData,
+            mask: true,
+            maskfence: maskData,
           });
 
           const tileSource = new Source(

dev-demos/tile/district/worldmap.tsx

@@ -21,6 +21,7 @@ export default () => {
       map: new Map({
         center: [60, 30],
         // zoom: 12,
+        minZoom: 0,
         zoom: 1,
       }),
     });
@@ -51,6 +52,7 @@ export default () => {
         zIndex: 1,
       })
         .source(source)
+        .select(true)
         .shape('fill')
         .color('NAME_CHN', (NAME_CHN) => {
           const namestr = unicode2Char(NAME_CHN);

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

@@ -281,15 +281,16 @@ export default class PickingService implements IPickingService {
       type === 'click' &&
       pickedColors?.toString() !== [0, 0, 0, 0].toString()
     ) {
+
       const selectedId = decodePickingColor(pickedColors);
       if (
         layer.getCurrentSelectedId() === null ||
         selectedId !== layer.getCurrentSelectedId()
       ) {
-        this.selectFeature(layer, pickedColors);
+        this.layerService.selectFeature(layer, pickedColors);
         layer.setCurrentSelectedId(selectedId);
       } else {
-        this.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
+        this.layerService.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
         layer.setCurrentSelectedId(null);
       }
       // if (!layer.isVector) {

packages/core/src/services/layer/ILayerService.ts

@@ -237,18 +237,19 @@ export interface ITileLayerManager extends IBaseTileLayerManager{
 
 export interface IBaseTileLayer {
   sourceLayer: string;
-  pickRender(target: IInteractionTarget):void;
   parent: ILayer;
-  tileLayerManager: IBaseTileLayerManager;
+  tileLayerManager: ITileLayerManager;
   tilesetManager: TilesetManager | undefined;
+  pickRender(target: IInteractionTarget):void;
+  selectFeature(pickedColors: Uint8Array | undefined):void;
+  highlightPickedFeature(pickedColors: Uint8Array | undefined):void;
   children: ILayer[];
   scaleField: any;
   render(isPicking?: boolean): void;
   destroy(): void;
 }
 export interface ITileLayer extends IBaseTileLayer{
-
-  tileLayerManager: ITileLayerManager;
+  pickRender(target: IInteractionTarget):void;
   pickLayers(target: IInteractionTarget): boolean;
   clearPick(type: string): void;
   clearPickState(): void;
@@ -667,6 +668,8 @@ export interface ILayerService {
   setEnableRender(flag: boolean): void;
   getOESTextureFloat(): boolean;
   pickRender(layer: ILayer,target?: IInteractionTarget):void
+  selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined):void;
+  highlightPickedFeature(layer: ILayer, pickedColors: Uint8Array | undefined):void;
 
   destroy(): void;
 }

packages/core/src/services/layer/LayerService.ts

@@ -185,6 +185,7 @@ export default class LayerService implements ILayerService {
       .forEach((layer) => {
         this.layerList.push(layer);
       });
+
   }
 
   public destroy() {
@@ -226,6 +227,9 @@ export default class LayerService implements ILayerService {
   public getShaderPickStat() {
     return this.shaderPicking;
   }
+  
+  // For Pick
+
   // 拾取绘制
   public pickRender(layer: ILayer,target: IInteractionTarget) {
     if(layer.tileLayer) {
@@ -248,6 +252,22 @@ export default class LayerService implements ILayerService {
 
   }
 
+  public selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined) {
+     
+    if(layer.tileLayer) {
+      return layer.tileLayer.selectFeature(pickedColors)
+     }
+    // @ts-ignore
+    const [r, g, b] = pickedColors;
+    layer.hooks.beforeSelect.call([r, g, b]);
+  }
+
+  public highlightPickedFeature(layer: ILayer,pickedColors: Uint8Array | undefined): void {
+    if(layer.tileLayer) {
+      return layer.tileLayer.highlightPickedFeature(pickedColors)
+     }
+  }
+
   public clear() {
     const color = rgb2arr(this.mapService.bgColor) as [
       number,

packages/layers/src/core/BaseLayer.ts

@@ -1302,8 +1302,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
     ) {
       isPick = true;
     }
-    if (type === 'click')
-      console.log('enableSelect', type, this.isVisible(), enableSelect, isPick);
     return this.isVisible() && isPick;
   }
 

packages/layers/src/tile/service/TileLayerService.ts

@@ -19,7 +19,7 @@ export class TileLayerService {
     this.parent = parent;
   }
   get tiles():Tile[] {
-    return this.tiles;
+    return this._tiles;
   }
 
   hasTile(tileKey: string): boolean {

packages/layers/src/tile/service/TilePickService.ts

@@ -1,6 +1,6 @@
 import { ILayerService } from '@antv/l7-core';
 import { TileLayerService } from './TileLayerService';
-import { ILayer, IInteractionTarget } from '@antv/l7-core';
+import { IInteractionTarget } from '@antv/l7-core';
 import Tile from '../tileFactory/Tile';
 export interface ITilePickServiceOptions {
   layerService: ILayerService;
@@ -20,10 +20,9 @@ export class TilePickService {
       this.layerService.pickRender(pickLayer);
     }
   }
-  selectFeature(layer: ILayer, pickedColors: Uint8Array | undefined) {
+  selectFeature(pickedColors: Uint8Array | undefined) {
     // @ts-ignore
     const [r, g, b] = pickedColors;
-    layer.hooks.beforeSelect.call([r, g, b]);
     this.tileLayerService.tiles.map((tile: Tile) => {
       const layers = tile.getLayers();
       layers.forEach((layer) => {
@@ -31,10 +30,9 @@ export class TilePickService {
       });
     });
   }
-  highlightPickedFeature(layer: ILayer, pickedColors: Uint8Array | undefined) {
+  highlightPickedFeature(pickedColors: Uint8Array | undefined) {
     // @ts-ignore
     const [r, g, b] = pickedColors;
-    layer.hooks.beforeSelect.call([r, g, b]);
     this.tileLayerService.tiles.map((tile: Tile) => {
       const layers = tile.getLayers();
       layers.forEach((layer) => {

packages/layers/src/tile/tileFactory/layers/TileDebugLayer.ts

@@ -4,6 +4,7 @@ import TileModel from '../../models/tileModel';
 
 export default class TileDebugLayer extends BaseLayer<IBaseLayerStyleOptions> {
   public type: string = 'TileDebugLayer';
+  public zIndex:number = 10000;
   public defaultSourceConfig = {
     data: [],
     options: {

packages/layers/src/tile/tileLayer/MapTileLayer.ts

@@ -1,14 +1,14 @@
 import {
   IBaseTileLayer,
   ITileLayerOPtions,
-  IBaseTileLayerManager,
+  // IBaseTileLayerManager,
 } from '@antv/l7-core';
 import { BaseMapTileLayerManager } from '../manager/mapLayerManager';
 
 import { Base } from './base';
 
 export class MapTileLayer extends Base implements IBaseTileLayer {
-  public tileLayerManager: IBaseTileLayerManager;
+  // public tileLayerManager: IBaseTileLayerManager;
   constructor({
     parent,
     rendererService,

packages/layers/src/tile/tileLayer/base.ts

@@ -184,6 +184,13 @@ export class Base {
   public pickRender(target: IInteractionTarget) {
     this.tilePickService.pickRender(target);
   }
+  public selectFeature(pickedColors: Uint8Array | undefined) {
+    this.tilePickService.selectFeature(pickedColors)
+  }
+
+  public highlightPickedFeature(pickedColors: Uint8Array | undefined) {
+    this.tilePickService.highlightPickedFeature(pickedColors)
+  }
 
 
 }