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

This commit is contained in:
thinkinggis 2020-02-19 16:45:58 +08:00
commit 3129de4afe
30 changed files with 292 additions and 61 deletions

View File

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

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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) {

View File

@ -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",

View File

@ -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

View File

@ -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": {

View File

@ -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;

View File

@ -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);
}

View File

@ -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);
});

View File

@ -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;
});

View File

@ -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;
});

View File

@ -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>
);
}

View File

@ -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;
});

View File

@ -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 };

View File

@ -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;
}

View File

@ -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;
});

View File

@ -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>
);
});

View File

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

View File

@ -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;

View File

@ -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 };

View File

@ -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;

View File

@ -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';

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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>
</>
);
});