diff --git a/lerna.json b/lerna.json index af812533c1..298f89b45d 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.0.22", + "version": "2.0.23-alpha.0", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 0a2375926f..63f74b6536 100644 --- a/packages/component/package.json +++ b/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", diff --git a/packages/core/package.json b/packages/core/package.json index b252155799..2e5ff0ee42 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/l7/package.json b/packages/l7/package.json index 444de0b8ec..22c3501de7 100644 --- a/packages/l7/package.json +++ b/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", diff --git a/packages/layers/package.json b/packages/layers/package.json index 37a7edb359..9f53da5f5d 100644 --- a/packages/layers/package.json +++ b/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", diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 5e9de88420..ad621168a3 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -749,7 +749,7 @@ export default class BaseLayer 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) { diff --git a/packages/maps/package.json b/packages/maps/package.json index f9e15b5ad4..394c244ec9 100644 --- a/packages/maps/package.json +++ b/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", diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index e3523fd2bd..5cd103d55e 100644 --- a/packages/maps/src/amap/map.ts +++ b/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 diff --git a/packages/react/package.json b/packages/react/package.json index dc1c030166..89edb13bf7 100644 --- a/packages/react/package.json +++ b/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": { diff --git a/packages/react/src/component/AMapScene.tsx b/packages/react/src/component/AMapScene.tsx index dd7bc3c710..26048bd750 100644 --- a/packages/react/src/component/AMapScene.tsx +++ b/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; diff --git a/packages/react/src/component/CustomControl.tsx b/packages/react/src/component/CustomControl.tsx new file mode 100644 index 0000000000..08f73e0193 --- /dev/null +++ b/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; +} + +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); +} diff --git a/packages/react/src/component/Layer.ts b/packages/react/src/component/Layer.ts index 4deebbc545..fced1febd4 100644 --- a/packages/react/src/component/Layer.ts +++ b/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); }); diff --git a/packages/react/src/component/LayerAttribute/Active.tsx b/packages/react/src/component/LayerAttribute/Active.tsx new file mode 100644 index 0000000000..92aafb75e8 --- /dev/null +++ b/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; +}); diff --git a/packages/react/src/component/LayerAttribute/Filter.tsx b/packages/react/src/component/LayerAttribute/Filter.tsx new file mode 100644 index 0000000000..92285b8f36 --- /dev/null +++ b/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; +} +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; +}); diff --git a/packages/react/src/component/LayerAttribute/Layer.tsx b/packages/react/src/component/LayerAttribute/Layer.tsx index 599fa0c740..c64ef9ee80 100644 --- a/packages/react/src/component/LayerAttribute/Layer.tsx +++ b/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 ( - <> + {scale && } {size && } {style &&