feat: merge react lib & 新增自定义control

lerna.json

@@ -14,7 +14,7 @@
       "message": "chore: publish"
     }
   },
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publishConfig": {

packages/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-component",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "eventemitter3": "^4.0.0",
     "inversify": "^5.0.1",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-core",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "@mapbox/tiny-sdf": "^1.1.1",
     "ajv": "^6.10.2",

packages/l7/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "A Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,11 +24,11 @@
   "author": "antv",
   "license": "MIT",
   "dependencies": {
-    "@antv/l7-component": "^2.0.22",
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-layers": "^2.0.22",
-    "@antv/l7-maps": "^2.0.22",
-    "@antv/l7-scene": "^2.0.22",
+    "@antv/l7-component": "^2.0.23-alpha.0",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-layers": "^2.0.23-alpha.0",
+    "@antv/l7-maps": "^2.0.23-alpha.0",
+    "@antv/l7-scene": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7"
   },
   "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",

packages/layers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-layers",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "L7's collection of built-in layers",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,9 +22,9 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-source": "^2.0.22",
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-source": "^2.0.23-alpha.0",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "@mapbox/martini": "^0.1.0",
     "@turf/meta": "^6.0.2",

packages/layers/src/core/BaseLayer.ts

@@ -749,7 +749,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
     }
     return this.configSchema;
   }
-  public getLegendItems(name: string) {
+  public getLegendItems(name: string): any {
     const scale = this.styleAttributeService.getLayerAttributeScale(name);
     if (scale) {
       if (scale.ticks) {

packages/maps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-maps",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,8 +23,8 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "gl-matrix": "^3.1.0",
     "inversify": "^5.0.1",

packages/maps/src/amap/map.ts

@@ -256,7 +256,10 @@ export default class AMapService
             viewMode: '3D',
             ...rest,
           });
-          this.removeLogoControl();
+          map.on('complete', () => {
+            this.removeLogoControl();
+          });
+
           // 监听地图相机事件
           map.on('camerachange', this.handleCameraChanged);
           // @ts-ignore

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-react",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,10 +24,12 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7": "^2.0.22",
-    "@antv/l7-maps": "^2.0.22",
+    "@antv/l7": "^2.0.23-alpha.0",
+    "@antv/l7-maps": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
-    "react": "^16.8.6"
+    "react": "^16.8.6",
+    "react-dom": "^16.10.2",
+    "load-styles": "^2.0.0"
   },
   "gitHead": "f2bd3c6473df79d815467b1677c6f985cf68800e",
   "publishConfig": {

packages/react/src/component/AMapScene.tsx

@@ -3,7 +3,7 @@ import { IMapConfig, Scene } from '@antv/l7';
 // tslint:disable-next-line:no-submodule-imports
 import GaodeMap from '@antv/l7-maps/lib/amap';
 import React, { createElement, createRef, useEffect, useState } from 'react';
-import SceneContext from './SceneContext';
+import { SceneContext } from './SceneContext';
 interface IMapSceneConig {
   style?: React.CSSProperties;
   className?: string;

packages/react/src/component/CustomControl.tsx

@@ -0,0 +1,44 @@
+import { Control, PositionName, Scene } from '@antv/l7';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { useSceneValue } from './SceneContext';
+const { useEffect, useState } = React;
+
+interface IColorLegendProps {
+  position: PositionName;
+  className?: string;
+  style?: React.CSSProperties;
+  children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
+}
+
+export default function CustoonConrol(props: IColorLegendProps) {
+  const { className, style, children, position } = props;
+  const mapScene = (useSceneValue() as unknown) as Scene;
+  const el = document.createElement('div');
+  useEffect(() => {
+    const custom = new Control({
+      position,
+    });
+    custom.onAdd = () => {
+      if (className) {
+        el.className = className;
+      }
+      if (style) {
+        const cssText = Object.keys(style)
+          .map((key: string) => {
+            // @ts-ignore
+            return `${key}:${style[key]}`;
+          })
+          .join(';');
+        el.style.cssText = cssText;
+      }
+
+      return el;
+    };
+    mapScene.addControl(custom);
+    return () => {
+      mapScene.removeControl(custom);
+    };
+  }, []);
+  return createPortal(children, el);
+}

packages/react/src/component/Layer.ts

@@ -2,7 +2,9 @@ import * as React from 'react';
 import { ILayerProps } from './LayerAttribute';
 import BaseLayer from './LayerAttribute/Layer';
 
-const PolygonLayer = React.memo(function Layer(props: ILayerProps) {
+const PolygonLayer = React.memo(function Layer(
+  props: ILayerProps & { children?: any },
+) {
   return BaseLayer('polygonLayer', props);
 });
 
@@ -10,7 +12,9 @@ const LineLayer = React.memo(function Layer(props: ILayerProps) {
   return BaseLayer('polygonLayer', props);
 });
 
-const PointLayer = React.memo(function Layer(props: ILayerProps) {
+const PointLayer = React.memo(function Layer(
+  props: ILayerProps & { children?: any },
+) {
   return BaseLayer('pointLayer', props);
 });
 

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

@@ -0,0 +1,17 @@
+import { IActiveOption, ILayer } from '@antv/l7';
+import * as React from 'react';
+
+const { useEffect } = React;
+interface ILayerProps {
+  layer: ILayer;
+  active: {
+    option: IActiveOption | boolean;
+  };
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, active } = props;
+  useEffect(() => {
+    layer.active(active.option);
+  }, [active, layer]);
+  return null;
+});

packages/react/src/component/LayerAttribute/Filter.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;
+  filter: Partial<IAttributeOptions>;
+}
+export default React.memo(function Chart(props: ILayerProps) {
+  const { layer, filter } = props;
+  useEffect(() => {
+    if (filter.field) {
+      layer.filter(filter.field as string, filter.values as StyleAttrField);
+    }
+  }, [filter.field, JSON.stringify(filter.values), filter.values]);
+  return null;
+});

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

@@ -1,12 +1,33 @@
 import { ILayer, LineLayer, PointLayer, PolygonLayer, Scene } from '@antv/l7';
 import * as React from 'react';
+import { LayerContext } from '../LayerContext';
 import { useSceneValue } from '../SceneContext';
-import { Color, ILayerProps, Scale, Shape, Size, Source, Style } from './';
+import {
+  Active,
+  Color,
+  Filter,
+  ILayerProps,
+  Scale,
+  Shape,
+  Size,
+  Source,
+  Style,
+} from './';
 
 const { useEffect, useState } = React;
 
 export default function BaseLayer(type: string, props: ILayerProps) {
-  const { source, color, shape, style, size, scale, options } = props;
+  const {
+    source,
+    color,
+    shape,
+    style,
+    size,
+    scale,
+    active,
+    filter,
+    options,
+  } = props;
   const mapScene = (useSceneValue() as unknown) as Scene;
   const [layer, setLayer] = useState();
   if (!layer) {
@@ -39,13 +60,17 @@ export default function BaseLayer(type: string, props: ILayerProps) {
     }
   });
   return (
-    <>
+    <LayerContext.Provider value={layer}>
       <Source layer={layer} source={source} />
       {scale && <Scale layer={layer} scale={scale} />}
       <Color layer={layer} color={color} />
       {size && <Size layer={layer} size={size} />}
       <Shape layer={layer} shape={shape} />
       {style && <Style layer={layer} style={style} />}
-    </>
+      {active && <Active layer={layer} active={active} />}
+      {filter && <Filter layer={layer} filter={filter} />}
+      {/* LayerContext主要传入LayerEvent组件 */}
+      {props.children}
+    </LayerContext.Provider>
   );
 }

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

@@ -13,6 +13,6 @@ export default React.memo(function Chart(props: ILayerProps) {
     shape.field
       ? layer.shape(shape.field, shape.values)
       : layer.shape(shape.value as StyleAttrField);
-  }, [shape.field, shape.value, JSON.stringify(shape.values)]);
+  }, [shape.field, shape.value, JSON.stringify(shape.values), shape.values]);
   return null;
 });

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

@@ -1,15 +1,15 @@
-import {
-  IScale,
-  IScaleOptions,
-  ISourceCFG,
-  ScaleAttributeType,
-} from '@antv/l7';
+import { IActiveOption, IScale, IScaleOptions, ISourceCFG } from '@antv/l7';
+import Active from './Active';
 import Color from './Color';
+import Filter from './Filter';
 import Scale from './Scale';
 import Shape from './Shape';
 import Size from './Size';
 import Source from './Source';
 import Style from './Style';
+
+type CallBack = (...args: any[]) => any;
+
 export interface IAttributeOptions {
   field: string;
   value: string | number;
@@ -30,9 +30,14 @@ export interface IStyleOptions {
   opacity: number;
   [key: string]: any;
 }
+
 export interface ISourceOptions extends ISourceCFG {
   data: any;
 }
+
+export interface IActiveOptions {
+  option: IActiveOption | boolean;
+}
 export interface ILayerProps {
   options?: {
     [key: string]: any;
@@ -43,6 +48,9 @@ export interface ILayerProps {
   scale?: Partial<IScaleAttributeOptions>;
   size?: Partial<IAttributeOptions>;
   style?: Partial<IStyleOptions>;
+  active?: IActiveOptions;
+  filter?: Partial<IAttributeOptions>;
+  children?: JSX.Element | JSX.Element[] | Array<JSX.Element | undefined>;
 }
 
-export { Source, Size, Color, Shape, Style, Scale };
+export { Active, Color, Filter, Source, Size, Shape, Style, Scale };

packages/react/src/component/LayerContext.tsx

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

packages/react/src/component/LayerEvent.tsx

@@ -0,0 +1,18 @@
+import { ILayer } from '@antv/l7';
+import * as React from 'react';
+import { useLayerValue } from './LayerContext';
+
+const { useEffect } = React;
+interface ILayerProps {
+  type: string;
+  handler: (...args: any[]) => void;
+}
+export const LayerEvent = React.memo((props: ILayerProps) => {
+  const { type, handler } = props;
+  const layer = (useLayerValue() as unknown) as ILayer;
+
+  useEffect(() => {
+    layer.on(type, handler);
+  }, [type]);
+  return null;
+});

packages/react/src/component/Legend/color.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+interface IColorLegendProps {
+  items?: any[];
+  title: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+import './style.css';
+export const ColorComponent = React.memo((props: IColorLegendProps) => {
+  const { className, style, title } = props;
+  const items = [
+    { title: '1', color: 'rgb(239,243,255)' },
+    { title: '10', color: 'rgb(198,219,239)' },
+    { title: '30', color: 'rgb(158,202,225)' },
+    { title: '50', color: 'rgb(107,174,214)' },
+    { title: '60', color: 'rgb(49,130,189)' },
+    { title: '100', color: 'rgb(8,81,156)' },
+  ];
+
+  return (
+    <div>
+      <div>
+        {items.map((c, i) => {
+          return (
+            <div
+              key={i.toString()}
+              style={{
+                background: c.color,
+                height: '100%',
+                display: 'inline-block',
+                cursor: 'pointer',
+                width: '' + (100.0 - items.length) / items.length + '%',
+                marginRight: '1%',
+                padding: 5,
+              }}
+            />
+          );
+        })}
+      </div>
+      <div>
+        {items.map((c, i) => {
+          return (
+            <div
+              key={i.toString() + '122'}
+              style={{
+                background: '#fff',
+                height: '100%',
+                display: 'inline-block',
+                textAlign: 'left',
+                cursor: 'pointer',
+                width: '' + (100.0 - items.length) / items.length + '%',
+                marginRight: '1%',
+              }}
+            >
+              {c.title}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});

packages/react/src/component/Legend/style.css

@@ -0,0 +1,3 @@
+.color {
+ color:'red';
+}

packages/react/src/component/MapboxScene.tsx

@@ -3,7 +3,7 @@ import { IMapConfig, Scene } from '@antv/l7';
 // tslint:disable-next-line:no-submodule-imports
 import Mapbox from '@antv/l7-maps/lib/mapbox';
 import React, { createElement, createRef, useEffect, useState } from 'react';
-import SceneContext from './SceneContext';
+import { SceneContext } from './SceneContext';
 interface IMapSceneConig {
   style?: React.CSSProperties;
   className?: string;

packages/react/src/component/Scene.tsx

@@ -1,14 +1,19 @@
 import { IMapWrapper, Scene } from '@antv/l7';
 import React, { createElement, createRef, useEffect, useState } from 'react';
-import SceneContext from './SceneContext';
+import { SceneContext } from './SceneContext';
+
 interface IMapSceneConig {
   style?: React.CSSProperties;
+  // 配置项，比如是否禁止鼠标缩放地图
+  options?: {
+    [key: string]: any;
+  };
   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 { style, className, map, options } = props;
   const container = createRef();
   const [scene, setScene] = useState();
   useEffect(() => {
@@ -18,6 +23,14 @@ const MapScene = React.memo((props: IMapSceneConig) => {
     });
     sceneInstance.on('loaded', () => {
       setScene(sceneInstance);
+      // 禁止鼠标滚轮缩放地图
+      if (options && !options.enableMouseZoom) {
+        const mapsService = sceneInstance.getMapService();
+        if (mapsService && mapsService.getType() === 'mapbox') {
+          (mapsService.map as any).scrollZoom.disable();
+        }
+        // TODO高德地图的禁止待补充
+      }
     });
     return () => {
       sceneInstance.destroy();
@@ -45,4 +58,4 @@ const MapScene = React.memo((props: IMapSceneConig) => {
   );
 });
 
-export default MapScene;
+export { MapScene };

packages/react/src/component/SceneContext.tsx

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

packages/react/src/index.ts

@@ -4,3 +4,10 @@ export { default as AMapScene } from './component/AMapScene';
 export { default as MapboxScene } from './component/MapboxScene';
 export * from './component/Layer';
 export { default as Control } from './component/Control';
+export { default as CustomControl } from './component/CustomControl';
+export { MapScene } from './component/Scene';
+export { PolygonLayer, LineLayer, PointLayer } from './component/Layer';
+export { LayerEvent } from './component/LayerEvent';
+export { useSceneValue, SceneContext } from './component/SceneContext';
+export { useLayerValue, LayerContext } from './component/LayerContext';
+export { ColorComponent } from './component/Legend/color';

packages/renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-renderer",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,7 +25,7 @@
     "gl": "^4.4.0"
   },
   "dependencies": {
-    "@antv/l7-core": "^2.0.22",
+    "@antv/l7-core": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "lodash": "^4.17.15",

packages/scene/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-scene",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,11 +22,11 @@
   "author": "xiaoiver",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-component": "^2.0.22",
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-maps": "^2.0.22",
-    "@antv/l7-renderer": "^2.0.22",
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-component": "^2.0.23-alpha.0",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-maps": "^2.0.23-alpha.0",
+    "@antv/l7-renderer": "^2.0.23-alpha.0",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "inversify": "^5.0.1",
     "mapbox-gl": "^1.2.1",

packages/source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-source",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,8 +24,8 @@
   "author": "lzxue",
   "license": "ISC",
   "dependencies": {
-    "@antv/l7-core": "^2.0.22",
-    "@antv/l7-utils": "^2.0.22",
+    "@antv/l7-core": "^2.0.23-alpha.0",
+    "@antv/l7-utils": "^2.0.23-alpha.0",
     "@babel/runtime": "^7.7.7",
     "@mapbox/geojson-rewind": "^0.4.0",
     "@turf/helpers": "^6.1.4",

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7-utils",
-  "version": "2.0.22",
+  "version": "2.0.23-alpha.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",

stories/React/components/Scene.tsx

@@ -1,5 +1,5 @@
 import { GaodeMap, Mapbox } from '@antv/l7-maps';
-import { LineLayer, Scene } from '@antv/l7-react';
+import { LineLayer, MapScene } from '@antv/l7-react';
 import * as React from 'react';
 
 export default React.memo(function Map() {
@@ -23,7 +23,7 @@ export default React.memo(function Map() {
   }, []);
   return (
     <>
-      <Scene
+      <MapScene
         map={amap}
         style={{
           position: 'absolute',
@@ -53,7 +53,7 @@ export default React.memo(function Map() {
             }}
           />
         )}
-      </Scene>
+      </MapScene>
     </>
   );
 });