Merge pull request #202 from antvis/react

feat: L7 React 2.0

gatsby-node.js

@@ -19,5 +19,6 @@ exports.onCreateWebpackConfig = ({ getConfig }) => {
     '@antv/l7-scene': path.resolve(__dirname, 'packages/scene/src'),
     '@antv/l7-source': path.resolve(__dirname, 'packages/source/src'),
     '@antv/l7-utils': path.resolve(__dirname, 'packages/utils/src'),
+    '@antv/l7-react': path.resolve(__dirname, 'packages/react/src')
   };
 };

packages/component/src/marker.ts

@@ -252,32 +252,32 @@ export default class Marker extends EventEmitter {
     element.addEventListener('click', (e: MouseEvent) => {
       this.onMapClick(e);
     });
-    element.addEventListener('click', this.eventHander);
+    element.addEventListener('click', this.eventHandle);
     applyAnchorClass(element, anchor, 'marker');
   }
   private registerMarkerEvent(element: HTMLElement) {
-    element.addEventListener('mousemove', this.eventHander);
+    element.addEventListener('mousemove', this.eventHandle);
-    element.addEventListener('click', this.eventHander);
+    element.addEventListener('click', this.eventHandle);
-    element.addEventListener('mousedown', this.eventHander);
+    element.addEventListener('mousedown', this.eventHandle);
-    element.addEventListener('mouseup', this.eventHander);
+    element.addEventListener('mouseup', this.eventHandle);
-    element.addEventListener('dblclick', this.eventHander);
+    element.addEventListener('dblclick', this.eventHandle);
-    element.addEventListener('contextmenu', this.eventHander);
+    element.addEventListener('contextmenu', this.eventHandle);
-    element.addEventListener('mouseover', this.eventHander);
+    element.addEventListener('mouseover', this.eventHandle);
-    element.addEventListener('mouseout', this.eventHander);
+    element.addEventListener('mouseout', this.eventHandle);
   }
   private unRegisterMarkerEvent() {
     const element = this.getElement();
-    element.removeEventListener('mousemove', this.eventHander);
+    element.removeEventListener('mousemove', this.eventHandle);
-    element.removeEventListener('click', this.eventHander);
+    element.removeEventListener('click', this.eventHandle);
-    element.removeEventListener('mousedown', this.eventHander);
+    element.removeEventListener('mousedown', this.eventHandle);
-    element.removeEventListener('mouseup', this.eventHander);
+    element.removeEventListener('mouseup', this.eventHandle);
-    element.removeEventListener('dblclick', this.eventHander);
+    element.removeEventListener('dblclick', this.eventHandle);
-    element.removeEventListener('contextmenu', this.eventHander);
+    element.removeEventListener('contextmenu', this.eventHandle);
-    element.removeEventListener('mouseover', this.eventHander);
+    element.removeEventListener('mouseover', this.eventHandle);
-    element.removeEventListener('mouseout', this.eventHander);
+    element.removeEventListener('mouseout', this.eventHandle);
   }
 
-  private eventHander = (e: MouseEvent) => {
+  private eventHandle = (e: MouseEvent) => {
     this.emit(e.type, {
       target: e,
       data: this.markerOption.extData,

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

@@ -104,6 +104,7 @@ export interface ILayer {
     options?: ISourceCFG;
   };
   multiPassRenderer: IMultiPassRenderer;
+  needPick(): boolean;
   getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
   getContainer(): Container;
   setContainer(container: Container): void;
@@ -116,7 +117,7 @@ export interface ILayer {
       Partial<IModelInitializationOptions>,
   ): IModel;
   init(): ILayer;
-  scale(field: string | IScaleOptions, cfg: IScale): ILayer;
+  scale(field: string | IScaleOptions, cfg?: IScale): ILayer;
   size(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   color(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
   shape(field: StyleAttrField, value?: StyleAttributeOption): ILayer;
@@ -165,10 +166,10 @@ export interface ILayer {
   /**
    * 事件
    */
-  on(type: string, hander: (...args: any[]) => void): void;
+  on(type: string, handler: (...args: any[]) => void): void;
-  off(type: string, hander: (...args: any[]) => void): void;
+  off(type: string, handler: (...args: any[]) => void): void;
-  emit(type: string, hander: unknown): void;
+  emit(type: string, handler: unknown): void;
-  once(type: string, hander: (...args: any[]) => void): void;
+  once(type: string, handler: (...args: any[]) => void): void;
   /**
    * JSON Schema 用于校验配置项
    */

packages/core/src/services/map/IMapService.ts

@@ -121,6 +121,8 @@ export interface IMapConfig<RawMap = {}> {
   maxZoom?: number;
 
   attributionControl?: boolean;
+
+  [key: string]: any;
 }
 
 /**

packages/core/src/services/renderer/passes/PixelPickingPass.ts

@@ -75,11 +75,11 @@ export default class PixelPickingPass<
     this.interactionService.on(InteractionEvent.Hover, this.pickFromPickingFBO);
     this.interactionService.on(
       InteractionEvent.Select,
-      this.selectFeatureHander.bind(this),
+      this.selectFeatureHandle.bind(this),
     );
     this.interactionService.on(
       InteractionEvent.Active,
-      this.highlightFeatureHander.bind(this),
+      this.highlightFeatureHandle.bind(this),
     );
   }
 
@@ -131,7 +131,7 @@ export default class PixelPickingPass<
    * TODO：支持区域拾取
    */
   private pickFromPickingFBO = ({ x, y, lngLat, type }: IInteractionTarget) => {
-    if (!this.layer.isVisible()) {
+    if (!this.layer.isVisible() || !this.layer.needPick()) {
       return;
     }
     const {
@@ -259,12 +259,12 @@ export default class PixelPickingPass<
     this.layerService.renderLayers();
   }
 
-  private selectFeatureHander({ featureId }: Partial<IInteractionTarget>) {
+  private selectFeatureHandle({ featureId }: Partial<IInteractionTarget>) {
     const pickedColors = encodePickingColor(featureId as number);
     this.selectFeature(new Uint8Array(pickedColors));
   }
 
-  private highlightFeatureHander({ featureId }: Partial<IInteractionTarget>) {
+  private highlightFeatureHandle({ featureId }: Partial<IInteractionTarget>) {
     const pickedColors = encodePickingColor(featureId as number);
     this.highlightPickedFeature(new Uint8Array(pickedColors));
   }

packages/core/src/services/scene/ISceneService.ts

@@ -3,8 +3,8 @@ import { IMapConfig } from '../map/IMapService';
 import { IRenderConfig } from '../renderer/IRendererService';
 
 export interface ISceneService {
-  on(type: string, hander: (...args: any[]) => void): void;
+  on(type: string, handle: (...args: any[]) => void): void;
-  off(type: string, hander: (...args: any[]) => void): void;
+  off(type: string, handle: (...args: any[]) => void): void;
   removeAllListeners(event?: string): this;
   init(config: IMapConfig & IRenderConfig): void;
   addLayer(layer: ILayer): void;

packages/layers/src/core/BaseLayer.ts

@@ -789,6 +789,17 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     return this.layerService.clock.getElapsedTime() - this.animateStartTime;
   }
 
+  public needPick(): boolean {
+    const {
+      enableHighlight = true,
+      enableSelect = true,
+    } = this.getLayerConfig();
+    const eventNames = this.eventNames().filter((name) => {
+      return name !== 'inited' && name !== 'add' && name !== 'remove';
+    });
+    return eventNames.length > 0 || enableHighlight || enableSelect;
+  }
+
   public buildModels() {
     throw new Error('Method not implemented.');
   }

packages/react/README.md

@@ -0,0 +1,11 @@
+# `react`
+
+> TODO: description
+
+## Usage
+
+```
+const react = require('react');
+
+// TODO: DEMONSTRATE API
+```

packages/react/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@antv/l7-react",
+  "version": "2.0.18",
+  "description": "",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "sideEffects": true,
+  "files": [
+    "lib",
+    "es",
+    "README.md"
+  ],
+  "scripts": {
+    "tsc": "tsc --project tsconfig.build.json",
+    "clean": "rimraf dist; rimraf es; rimraf lib;",
+    "build": "run-p build:*",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:esm": "BABEL_ENV=esm babel src --root-mode upward --out-dir es --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "watch": "BABEL_ENV=cjs babel src --watch --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "lint:ts": "run-p -c lint:ts-*",
+    "test": "jest"
+  },
+  "author": "lzxue",
+  "license": "ISC",
+  "dependencies": {
+    "@antv/l7": "^2.0.18",
+    "@antv/l7-maps": "^2.0.18",
+    "react": "^16.8.6",
+    "@babel/runtime": "^7.7.7"
+  },
+  "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/react/src/component/Layer.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ILayerProps } from './LayerAttribute';
+import BaseLayer from './LayerAttribute/Layer';
+
+const PolygonLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('polygonLayer', props);
+});
+
+const LineLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('polygonLayer', props);
+});
+
+const PointLayer = React.memo(function Layer(props: ILayerProps) {
+  return BaseLayer('pointLayer', props);
+});
+
+export { PolygonLayer, LineLayer, PointLayer };

packages/react/src/component/LayerAttribute/Color.tsx

@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  color: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, color } = props;
+  useEffect(() => {
+    color.field
+      ? layer.color(color.field as StyleAttrField, color.values)
+      : layer.color(color.value as StyleAttrField);
+  }, [color.value, color.field, JSON.stringify(color.values)]);
+  return null;
+});

packages/react/src/component/LayerAttribute/Layer.tsx

@@ -0,0 +1,51 @@
+import { ILayer, LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
+import * as React from 'react';
+import { useSceneValue } from '../SceneContext';
+import { Color, ILayerProps, Scales, Shape, Size, Source, Style } from './';
+
+const { useEffect, useState } = React;
+
+export default function BaseLayer(type: string, props: ILayerProps) {
+  const { source, color, shape, style, size, scales, options } = props;
+  const mapScene = (useSceneValue() as unknown) as Scene;
+  const [layer, setLayer] = useState();
+  if (!layer) {
+    let l: ILayer;
+    switch (type) {
+      case 'polygonLayer':
+        l = new PolygonLayer(options);
+        break;
+      case 'lineLayer':
+        l = new LineLayer(options);
+        break;
+      case 'pointLayer':
+        l = new PointLayer(options);
+        break;
+      default:
+        l = new PolygonLayer(options);
+    }
+    setLayer(l);
+  }
+
+  useEffect(() => {
+    mapScene.addLayer(layer);
+    return () => {
+      mapScene.removeLayer(layer);
+    };
+  }, []);
+  useEffect(() => {
+    if (layer) {
+      mapScene.render();
+    }
+  });
+  return (
+    <>
+      <Source layer={layer} source={source} />
+      {scales && <Scales layer={layer} scales={scales} />}
+      <Color layer={layer} color={color} />
+      {size && <Size layer={layer} size={size} />}
+      <Shape layer={layer} shape={shape} />
+      {style && <Style layer={layer} style={style} />}
+    </>
+  );
+}

packages/react/src/component/LayerAttribute/Scales.tsx

@@ -0,0 +1,18 @@
+import { ILayer, IScale, IScaleOptions } from '@antv/l7';
+import * as React from 'react';
+import { IScaleAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  scales: Partial<IScaleAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, scales } = props;
+  useEffect(() => {
+    scales.field
+      ? layer.scale(scales.field as string, scales.value as IScale)
+      : layer.scale(scales.values as IScaleOptions);
+  }, [scales.value, scales.field, JSON.stringify(scales.values)]);
+  return null;
+});

packages/react/src/component/LayerAttribute/Shape.tsx

@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  shape: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, shape } = props;
+  useEffect(() => {
+    shape.field
+      ? layer.shape(shape.field, shape.values)
+      : layer.shape(shape.value as StyleAttrField);
+  }, [shape.field, shape.value, JSON.stringify(shape.values)]);
+  return null;
+});

packages/react/src/component/LayerAttribute/Size.tsx

@@ -0,0 +1,18 @@
+import { ILayer, StyleAttrField } from '@antv/l7';
+import * as React from 'react';
+import { IAttributeOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  size: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, size } = props;
+  useEffect(() => {
+    size.field
+      ? layer.size(size.field, size.values)
+      : layer.size(size.value as StyleAttrField);
+  }, [size.field, size.value, JSON.stringify(size.values)]);
+  return null;
+});

packages/react/src/component/LayerAttribute/Source.tsx

@@ -0,0 +1,19 @@
+import { ILayer } from '@antv/l7';
+import * as React from 'react';
+import { ISourceOptions } from './';
+
+const { useEffect } = React;
+interface ISourceProps {
+  layer: ILayer;
+  source: Partial<ISourceOptions>;
+}
+export default React.memo(function Chart(props: ISourceProps) {
+  const { layer, source } = props;
+  const { data, ...sourceOption } = source;
+
+  useEffect(() => {
+    // @ts-ignore
+    layer.source(data, sourceOption);
+  }, []);
+  return null;
+});

packages/react/src/component/LayerAttribute/Style.tsx

@@ -0,0 +1,19 @@
+import { ILayer } from '@antv/l7';
+import * as React from 'react';
+import { IStyleOptions } from './';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  style: Partial<IStyleOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, style } = props;
+  useEffect(
+    () => {
+      layer.style(style);
+    },
+    Object.keys(style).map((key) => style[key]),
+  );
+  return null;
+});

packages/react/src/component/LayerAttribute/index.ts

@@ -0,0 +1,38 @@
+import { IScale, IScaleOptions, ISourceCFG } from '@antv/l7';
+import Color from './Color';
+import Scales from './Scales';
+import Shape from './Shape';
+import Size from './Size';
+import Source from './Source';
+import Style from './Style';
+export interface IAttributeOptions {
+  field: string;
+  value: string | number;
+  values: string[] | number[] | string;
+}
+
+export interface IScaleAttributeOptions {
+  field: string;
+  value: IScale;
+  values: IScaleOptions;
+}
+export interface IStyleOptions {
+  opacity: number;
+  [key: string]: any;
+}
+export interface ISourceOptions extends ISourceCFG {
+  data: any;
+}
+export interface ILayerProps {
+  options?: {
+    [key: string]: any;
+  };
+  source: ISourceOptions;
+  color: Partial<IAttributeOptions>;
+  shape: Partial<IAttributeOptions>;
+  scales?: Partial<IScaleAttributeOptions>;
+  size?: Partial<IAttributeOptions>;
+  style?: Partial<IStyleOptions>;
+}
+
+export { Source, Size, Color, Shape, Style, Scales };

packages/react/src/component/Scene.tsx

@@ -0,0 +1,42 @@
+import { IMapWrapper, Scene } from '@antv/l7';
+import React, { createElement, createRef, useEffect, useState } from 'react';
+import SceneContext from './SceneContext';
+interface IMapSceneConig {
+  style?: React.CSSProperties;
+  className?: string;
+  map: IMapWrapper;
+  children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
+}
+const MapScene = React.memo((props: IMapSceneConig) => {
+  const { style, className, map } = props;
+  const container = createRef();
+  const [scene, setScene] = useState();
+  useEffect(() => {
+    const sceneInstance = new Scene({
+      id: container.current as HTMLDivElement,
+      map,
+    });
+    sceneInstance.on('loaded', () => {
+      setScene(sceneInstance);
+    });
+    return () => {
+      sceneInstance.destroy();
+    };
+  }, []);
+
+  return (
+    <SceneContext.Provider value={scene}>
+      {createElement(
+        'div',
+        {
+          ref: container,
+          style,
+          className,
+        },
+        scene && props.children,
+      )}
+    </SceneContext.Provider>
+  );
+});
+
+export default MapScene;

packages/react/src/component/SceneContext.tsx

@@ -0,0 +1,7 @@
+import { Scene } from '@antv/l7';
+import { createContext, useContext } from 'react';
+const SceneContext = createContext(null);
+export function useSceneValue(): Scene {
+  return (useContext(SceneContext) as unknown) as Scene;
+}
+export default SceneContext;

packages/react/src/index.ts

@@ -0,0 +1,3 @@
+export * from './component/SceneContext';
+export { default as Scene } from './component/Scene';
+export * from './component/Layer';

packages/react/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "declarationDir": "./es",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "target": "es6",
+  },
+  "include": ["./src"]
+}

stories/React/React.stories.tsx

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import GaodeMapScene from './components/Scene';
+
+// @ts-ignore
+storiesOf('React', module).add('高德地图', () => <GaodeMapScene />);

stories/React/components/Scene.tsx

@@ -0,0 +1,59 @@
+import { GaodeMap, Mapbox } from '@antv/l7-maps';
+import { LineLayer, Scene } from '@antv/l7-react';
+import * as React from 'react';
+
+export default React.memo(function Map() {
+  // @ts-ignore
+  const amap = new GaodeMap({
+    center: [110.19382669582967, 50.258134],
+    pitch: 0,
+    style: 'dark',
+    zoom: 3,
+  });
+  const [data, setData] = React.useState();
+  React.useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch(
+        'https://gw.alipayobjects.com/os/basement_prod/32e1f3ab-8588-46cb-8a47-75afb692117d.json',
+      );
+      const data = await response.json();
+      setData(data);
+    };
+    fetchData();
+  }, []);
+  return (
+    <>
+      <Scene
+        map={amap}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+      >
+        {data && (
+          <LineLayer
+            key={'2'}
+            source={{
+              data,
+            }}
+            size={{
+              value: 1,
+            }}
+            color={{
+              value: '#fff',
+            }}
+            shape={{
+              value: 'line',
+            }}
+            style={{
+              opacity: 1,
+            }}
+          />
+        )}
+      </Scene>
+    </>
+  );
+});