feat(source render): source transfrom, layer event

antvis · Dec 11, 2019 · 27a09a7 · 27a09a7
1 parent a8619ce
commit 27a09a7
Show file tree

Hide file tree

Showing 21 changed files with 302 additions and 173 deletions.
diff --git a/.gitignore b/.gitignore
@@ -78,3 +78,4 @@ git_log.sh
 node_modules/
 packages/l7/package_bak.json
 
+stories/Test
diff --git a/packages/core/src/services/config/ConfigService.ts b/packages/core/src/services/config/ConfigService.ts
@@ -47,9 +47,13 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
   minZoom: 0,
   maxZoom: 20,
   visible: true,
+  autoFit: false,
   zIndex: 0,
-  enableMultiPassRenderer: false,
-  enablePicking: false,
+  pickedFeatureID: -1,
+  enableMultiPassRenderer: true,
+  enablePicking: true,
+  active: false,
+  activeColor: 'red',
   enableHighlight: false,
   highlightColor: 'red',
   enableTAA: false,

diff --git a/packages/core/src/services/interaction/IInteractionService.ts b/packages/core/src/services/interaction/IInteractionService.ts
@@ -8,7 +8,7 @@ export interface IInteractionService {
   destroy(): void;
   on(
     eventName: InteractionEvent,
-    callback: (params: { x: number; y: number }) => void,
+    callback: (params: { x: number; y: number; type: string }) => void,
   ): void;
-  triggerHover({ x, y }: { x: number; y: number }): void;
+  triggerHover({ x, y, type }: { x: number; y: number; type?: string }): void;
 }
diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts
@@ -5,7 +5,6 @@ import { TYPES } from '../../types';
 import { ILogService } from '../log/ILogService';
 import { IMapService } from '../map/IMapService';
 import { IInteractionService, InteractionEvent } from './IInteractionService';
-
 /**
  * 由于目前 L7 与地图结合的方案为双 canvas 而非共享 WebGL Context，事件监听注册在地图底图上。
  * 除此之外，后续如果支持非地图场景，事件监听就需要注册在 L7 canvas 上。
@@ -49,8 +48,13 @@ export default class InteractionService extends EventEmitter
       // hammertime.on('panmove', this.onPanmove);
       // hammertime.on('panend', this.onPanend);
       // hammertime.on('pinch', this.onPinch);
-
       $containter.addEventListener('mousemove', this.onHover);
+      $containter.addEventListener('click', this.onHover);
+      $containter.addEventListener('mousedown', this.onHover);
+      $containter.addEventListener('mouseup', this.onHover);
+      $containter.addEventListener('dblclick', this.onHover);
+      $containter.addEventListener('contextmenu', this.onHover);
+
       this.hammertime = hammertime;
 
       // TODO: 根据场景注册事件到 L7 canvas 上
@@ -62,16 +66,21 @@ export default class InteractionService extends EventEmitter
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
       $containter.removeEventListener('mousemove', this.onHover);
+      $containter.removeEventListener('click', this.onHover);
+      $containter.removeEventListener('mousedown', this.onHover);
+      $containter.removeEventListener('mouseup', this.onHover);
+      $containter.removeEventListener('dblclick', this.onHover);
+      $containter.removeEventListener('contextmenu', this.onHover);
     }
   }
 
-  private onHover = ({ x, y }: MouseEvent) => {
+  private onHover = ({ x, y, type }: MouseEvent) => {
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
       const { top, left } = $containter.getBoundingClientRect();
       x -= left;
       y -= top;
     }
-    this.emit(InteractionEvent.Hover, { x, y });
+    this.emit(InteractionEvent.Hover, { x, y, type });
   };
 }
diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts
@@ -22,7 +22,13 @@ import {
   StyleAttributeOption,
   Triangulation,
 } from './IStyleAttributeService';
-
+export interface IDataState {
+  dataSourceNeedUpdate: boolean;
+  dataMappingNeedUpdate: boolean;
+  filterNeedUpdate: boolean;
+  featureScaleNeedUpdate: boolean;
+  StyleAttrNeedUpdate: boolean;
+}
 export interface ILayerModelInitializationOptions {
   moduleName: string;
   vertexShader: string;
@@ -44,6 +50,10 @@ export interface IPickedFeature {
   lnglat?: { lng: number; lat: number };
   feature?: unknown;
 }
+// 交互样式
+export interface IActiveOption {
+  color: string | number[];
+}
 
 export interface ILayer {
   id: string; // 一个场景中同一类型 Layer 可能存在多个
@@ -52,9 +62,11 @@ export interface ILayer {
   zIndex: number;
   plugins: ILayerPlugin[];
   layerModelNeedUpdate: boolean;
-  dataPluginsState: { [key: string]: boolean };
+  dataState: IDataState; // 数据流状态
+  pickedFeatureID: number;
   hooks: {
     init: SyncBailHook<void, boolean | void>;
+    afterInit: SyncBailHook<void, boolean | void>;
     beforeRenderData: SyncWaterfallHook<boolean | void>;
     beforeRender: SyncBailHook<void, boolean | void>;
     afterRender: SyncHook<void>;
@@ -87,7 +99,16 @@ export interface ILayer {
   animate(option: IAnimateOption): ILayer;
   // pattern(field: string, value: StyleAttributeOption): ILayer;
   filter(field: string, value: StyleAttributeOption): ILayer;
-  // active(option: ActiveOption): ILayer;
+  active(option: IActiveOption | boolean): ILayer;
+  setActive(
+    id: number | { x: number; y: number },
+    option?: IActiveOption,
+  ): void;
+  select(option: IActiveOption | false): ILayer;
+  setSelect(
+    id: number | { x: number; y: number },
+    option?: IActiveOption,
+  ): void;
   style(options: unknown): ILayer;
   hide(): ILayer;
   show(): ILayer;
@@ -100,6 +121,7 @@ export interface ILayer {
   destroy(): void;
   source(data: any, option?: ISourceCFG): ILayer;
   setData(data: any, option?: ISourceCFG): ILayer;
+  fitBounds(): ILayer;
   /**
    * 向当前图层注册插件
    * @param plugin 插件实例
@@ -110,11 +132,13 @@ export interface ILayer {
   setEncodedData(encodedData: IEncodeFeature[]): void;
   getEncodedData(): IEncodeFeature[];
   getScaleOptions(): IScaleOptions;
+
   /**
    * 事件
    */
   on(type: string, hander: (...args: any[]) => void): void;
   off(type: string, hander: (...args: any[]) => void): void;
+  emit(type: string, hander: unknown): void;
   once(type: string, hander: (...args: any[]) => void): void;
   /**
    * JSON Schema 用于校验配置项
@@ -125,6 +149,8 @@ export interface ILayer {
    * 直接调用拾取方法，在非鼠标交互场景中使用
    */
   pick(query: { x: number; y: number }): void;
+
+  updateLayerConfig(configToUpdate: Partial<ILayerConfig | unknown>): void;
 }
 
 /**
@@ -159,6 +185,8 @@ export interface ILayerConfig {
   maxZoom: number;
   visible: boolean;
   zIndex: number;
+  autoFit: boolean;
+  pickedFeatureID: number;
   enableMultiPassRenderer: boolean;
   passes: Array<string | [string, { [key: string]: unknown }]>;
 
@@ -174,6 +202,8 @@ export interface ILayerConfig {
    * 高亮颜色
    */
   highlightColor: string | number[];
+  active: boolean;
+  activeColor: string | number[];
   /**
    * 开启 TAA
    */

diff --git a/packages/core/src/services/renderer/passes/PixelPickingPass.ts b/packages/core/src/services/renderer/passes/PixelPickingPass.ts
@@ -112,7 +112,18 @@ export default class PixelPickingPass<
    * 拾取视口指定坐标属于的要素
    * TODO：支持区域拾取
    */
-  private pickFromPickingFBO = ({ x, y }: { x: number; y: number }) => {
+  private pickFromPickingFBO = ({
+    x,
+    y,
+    type,
+  }: {
+    x: number;
+    y: number;
+    type: string;
+  }) => {
+    if (!this.layer.isVisible()) {
+      return;
+    }
     const {
       getViewportSize,
       readPixels,
@@ -152,17 +163,17 @@ export default class PixelPickingPass<
       ) {
         this.logger.debug('picked');
         const pickedFeatureIdx = decodePickingColor(pickedColors);
-        const rawFeature = this.layer.getSource()?.data?.dataArray[
-          pickedFeatureIdx
-        ];
+        const rawFeature = this.layer
+          .getSource()
+          .getFeatureById(pickedFeatureIdx);
 
         if (!rawFeature) {
           // this.logger.error(
           //   '未找到颜色编码解码后的原始 feature，请检查 fragment shader 中末尾是否添加了 `gl_FragColor = filterColor(gl_FragColor);`',
           // );
         } else {
           // trigger onHover/Click callback on layer
-          this.triggerHoverOnLayer({ x, y, feature: rawFeature });
+          this.triggerHoverOnLayer({ x, y, type, feature: rawFeature });
         }
       }
     });
@@ -175,10 +186,12 @@ export default class PixelPickingPass<
   private triggerHoverOnLayer({
     x,
     y,
+    type,
     feature,
   }: {
     x: number;
     y: number;
+    type: string;
     feature: unknown;
   }) {
     const { onHover, onClick } = this.layer.getLayerConfig();
@@ -196,6 +209,11 @@ export default class PixelPickingPass<
         feature,
       });
     }
+    this.layer.emit(type, {
+      x,
+      y,
+      feature,
+    });
   }
 
   /**

diff --git a/packages/core/src/services/source/ISourceService.ts b/packages/core/src/services/source/ISourceService.ts
@@ -62,6 +62,7 @@ export interface ISource {
   cluster: boolean;
   clusterOptions: Partial<IClusterOptions>;
   updateClusterData(zoom: number): void;
+  getFeatureById(id: number): unknown;
 }
 export interface IRasterCfg {
   extent: [number, number, number, number];