p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/antvis/L7

This commit is contained in:
2912401452 2021-12-31 16:30:23 +08:00
parent 5e7e2931ea 7a588e4ecc
commit f32f40c2d0
26 changed files with 31945 additions and 645 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,6 +8,7 @@ logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
yarn.lock
# Runtime data
pids

27
docs/api/cityBuilding/cityBuilding.zh.md
View File

@ -54,14 +54,33 @@ layer.animatte({
time : 时间 毫秒
```js
import { CityBuildingLayer } from '@antv/l7';
import { CityBuildingLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Mapbox({
style: 'dark',
center: [121.507674, 31.223043],
pitch: 65.59312320916906,
zoom: 15.4,
minZoom: 15,
maxZoom: 18,
}),
});
const buildingLayer = new CityBuildingLayer();
buildingLayer.animate(false);
setInterval(() => {
buildingLayer.setLight(Date.now());
}, 2000);
let i = 0;
function step() {
pointLayer.setLight(i++);
scene.render();
requestAnimationFrame(step);
}
scene.on('loaded', () => {
step();
});
```
#### 完整代码

12
docs/api/earth/earth.zh.md
View File

@ -95,7 +95,7 @@ const scene = new Scene({
提供了简单的方法控制地球系统的旋转（实际上控制的是相机的旋转，需要传入一个对象
- force: `false` 判断是否强制生效，默认该方法的优先级比用户鼠标操作要低，当用户操作相机的时候，该方法会失效
- regScale: `0.01` 旋转的角度（视觉上地球的旋转角度）， `regScale` 表示的并不是实际的旋转角度，而是单位旋转角度的比例
- reg: `0.01` 旋转的角度（视觉上地球的旋转角度）， `reg` 表示的并不是实际的旋转角度，而是单位旋转角度的比例
🌟 单位旋转角度 = Math.min(this.earthCameraZoom \* this.earthCameraZoom, 1)
```js
@ -112,7 +112,7 @@ function step() {
mapService.rotateY({
option: {
force: true,
regScale: 350,
reg: 0.1,
},
});
requestAnimationFrame(step);
@ -120,7 +120,7 @@ function step() {
scene.on('loaded', () => {
scene.addLayer(earthlayer);
requestAnimationFrame(step);
step();
});
```
@ -171,7 +171,7 @@ const earthlayer = new EarthLayer()
});
```
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层" width="300" height="300">
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*i_TBRZRLSuYAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层" width="300" height="300">
### 地球内发光/大气图层 atomLayer
@ -187,7 +187,7 @@ const atomLayer = new EarthLayer()
});
```
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层大气效果" width="300" height="300" >
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*1MU_RZQyFTkAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层大气效果" width="300" height="300" >
### 地球内外发光/辉光图层 bloomLayer
@ -202,4 +202,4 @@ const bloomLayer = new EarthLayer()
});
```
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" alt="L7 地球图层辉光效果" width="300" height="300" >
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FTniTZOZkNUAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球图层辉光效果" width="300" height="300" >

2
docs/api/earth/flyline.zh.md
View File

@ -9,7 +9,7 @@ order: 3
用户在地球模式下使用飞线图层无需做额外的操作，L7 会自动识别地球模式并相关的转化
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" alt="L7地球飞线图层" width="300" height="300">
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*4ZCnQaH_nLIAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7地球飞线图层" width="300" height="300">
## 使用

2
docs/api/earth/point.zh.md
View File

@ -11,7 +11,7 @@ order: 3
## 示例图片
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" alt="L7 地球点图层" width="300" height="300" >
<img src="https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ck1XSZ4Vw0QAAAAAAAAAAAAAARQnAQ" style="display: block; margin: 0 auto" alt="L7 地球点图层" width="300" height="300" >
## 使用

35
docs/api/raster/raster_layer.zh.md
View File

@ -5,9 +5,9 @@ order: 5
`markdown:docs/common/style.md`
Raster 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
`RasterLayer` 图层主要实现栅格数据的可视化，栅格数据主要来源是卫星遥感数据，如数字高程图，植被分布图，夜光图。
L7 本身内部没有提供栅格数据格式 如 tiff,需要外部解析好做为 Source 传入。
L7 本身内部没有提供栅格数据格式 如 `tiff`,需要外部解析好做为 `Source` 传入。
## 使用
@ -21,26 +21,21 @@ import { RasterLayer } from '@antv/l7';
## shape
`raster`
## size
无
## color
无
仅支持 `raster`
## style
- clampLow Boolean 默认 false, 设置为 true，低于 domain 的数据将不显示
- clampHigh Boolean 默认 false, 设置为 true，高于 domain 的数据将不显示
- opacity: 0.8 Number 透明度
- domain: [ 0, 8000 ] 数据映射区间
- noDataValue Number noDataValue 不会显示
- rampColors: {
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
- `clampLow`: `Boolean` 默认 false, 设置为 true，低于 domain 的数据将不显示
- `clampHigh`: `Boolean` 默认 false, 设置为 true，高于 domain 的数据将不显示
- `opacity`: `Number`, 默认值为 0.8 透明度
- `domain`: [ 0, 8000 ] 数据映射区间
- `noDataValue` `Number` noDataValue 不会显示
- `rampColors`: {
`colors`: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ],
`positions`: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
} // 色带
⚠️ color, position 的长度要相同
⚠️ `color`, `position` 的长度要相同

11
package.json
View File

@ -6,8 +6,6 @@
"url": "https://github.com/antvis/L7"
},
"devDependencies": {
"@antv/dipper": "0.0.6",
"@antv/dipper-widgets": "0.0.6",
"@antv/g2": "^3.5.9",
"@antv/g2plot": "^2.3.40",
"@antv/gatsby-theme-antv": "^1.1.15",
@ -40,11 +38,13 @@
"@types/enzyme": "^3.1.14",
"@types/enzyme-adapter-react-16": "^1.0.3",
"@types/gl": "^4.1.0",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/jest": "^25.2.1",
"@types/node": "13.11.1",
"@types/react-router-dom": "^5.3.2",
"@types/storybook__react": "^5.2.1",
"@types/supercluster": "^5.0.1",
"antd": "^4.12.3",
"antd": "4.12.3",
"awesome-typescript-loader": "^5.2.1",
"babel-eslint": "8.2.5",
"babel-jest": "^24.9.0",
@ -197,7 +197,10 @@
"resolutions": {
"d3-array": "1",
"monaco-editor-webpack-plugin": "2.0.0",
"monaco-editor": "0.21.0"
"monaco-editor": "0.21.0",
"electron": "11.4.6",
"react-router": "6.0.0",
"react-router-dom": "6.0.0"
},
"tnpm": {
"mode": "yarn"

17
packages/core/src/inversify.config.ts
View File

@ -73,19 +73,6 @@ container
.bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
.to(GlobalConfigService)
.inSingletonScope();
// container
// .bind<IIconService>(TYPES.IIconService)
// .to(IconService)
// .inSingletonScope();
container
.bind<IShaderModuleService>(TYPES.IShaderModuleService)
.to(ShaderModuleService)
.inSingletonScope();
// container
// .bind<IFontService>(TYPES.IFontService)
// .to(FontService)
// .inSingletonScope();
// @see https://github.com/inversify/InversifyJS/blob/master/wiki/inheritance.md#what-can-i-do-when-my-base-class-is-provided-by-a-third-party-module
decorate(injectable(), EventEmitter);
container.bind(TYPES.IEventEmitter).to(EventEmitter);
@ -156,6 +143,10 @@ export function createSceneContainer() {
sceneContainer
.bind<string>(TYPES.SceneID)
.toConstantValue(`${sceneIdCounter++}`);
sceneContainer
.bind<IShaderModuleService>(TYPES.IShaderModuleService)
.to(ShaderModuleService)
.inSingletonScope();
sceneContainer
.bind<ILayerService>(TYPES.ILayerService)
.to(LayerService)

7
packages/core/src/services/renderer/passes/BaseNormalPass.ts
View File

@ -15,8 +15,8 @@ import { IRendererService } from '../IRendererService';
@injectable()
export default class BaseNormalPass<InitializationOptions = {}>
implements IPass<InitializationOptions> {
@inject(TYPES.IShaderModuleService)
protected readonly shaderModuleService: IShaderModuleService;
// @inject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;
protected rendererService: IRendererService;
protected cameraService: ICameraService;
@ -49,6 +49,9 @@ export default class BaseNormalPass<InitializationOptions = {}>
this.layerService = layer
.getContainer()
.get<ILayerService>(TYPES.ILayerService);
this.shaderModuleService = layer
.getContainer()
.get<IShaderModuleService>(TYPES.IShaderModuleService);
}
public render(layer: ILayer) {

7
packages/core/src/services/renderer/passes/BasePostProcessingPass.ts
View File

@ -20,8 +20,8 @@ import { IUniform } from '../IUniform';
@injectable()
export default class BasePostProcessingPass<InitializationOptions = {}>
implements IPostProcessingPass<InitializationOptions> {
@inject(TYPES.IShaderModuleService)
protected readonly shaderModuleService: IShaderModuleService;
// @inject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;
protected rendererService: IRendererService;
@ -68,6 +68,9 @@ export default class BasePostProcessingPass<InitializationOptions = {}>
this.rendererService = layer
.getContainer()
.get<IRendererService>(TYPES.IRendererService);
this.shaderModuleService = layer
.getContainer()
.get<IShaderModuleService>(TYPES.IShaderModuleService);
const { createAttribute, createBuffer, createModel } = this.rendererService;
const { vs, fs, uniforms } = this.setupShaders();

1
packages/core/src/services/scene/SceneService.ts
View File

@ -126,7 +126,6 @@ export default class Scene extends EventEmitter implements ISceneService {
public init(sceneConfig: ISceneConfig) {
// 设置场景配置项
this.configService.setSceneConfig(this.id, sceneConfig);
// 初始化 ShaderModule
this.shaderModuleService.registerBuiltinModules();

8
packages/layers/src/core/BaseLayer.ts
View File

@ -122,9 +122,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
@lazyInject(TYPES.IGlobalConfigService)
protected readonly configService: IGlobalConfigService;
@lazyInject(TYPES.IShaderModuleService)
protected readonly shaderModuleService: IShaderModuleService;
// @lazyInject(TYPES.IShaderModuleService)
// protected readonly shaderModuleService: IShaderModuleService;
protected shaderModuleService: IShaderModuleService;
protected cameraService: ICameraService;
protected coordinateService: ICoordinateSystemService;
@ -293,6 +294,9 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
this.coordinateService = this.container.get<ICoordinateSystemService>(
TYPES.ICoordinateSystemService,
);
this.shaderModuleService = this.container.get<IShaderModuleService>(
TYPES.IShaderModuleService,
);
this.postProcessingPassFactory = this.container.get(
TYPES.IFactoryPostProcessingPass,
);

8
packages/layers/src/core/BaseModel.ts
View File

@ -100,8 +100,8 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
// @lazyInject(TYPES.IFontService)
// protected readonly fontService: IFontService;
@lazyInject(TYPES.IShaderModuleService)
protected readonly shaderModuleService: IShaderModuleService;
// @lazyInject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;
protected rendererService: IRendererService;
protected iconService: IIconService;
@ -118,6 +118,10 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
this.rendererService = layer
.getContainer()
.get<IRendererService>(TYPES.IRendererService);
this.shaderModuleService = layer
.getContainer()
.get<IShaderModuleService>(TYPES.IShaderModuleService);
this.styleAttributeService = layer
.getContainer()
.get<IStyleAttributeService>(TYPES.IStyleAttributeService);

16
packages/renderer/src/regl/ReglModel.ts
View File

@ -7,7 +7,7 @@ import {
IUniform,
} from '@antv/l7-core';
import regl from 'l7regl';
import { cloneDeep, isPlainObject, isTypedArray } from 'lodash';
import { cloneDeep, extend, isPlainObject, isTypedArray } from 'lodash';
import {
blendEquationMap,
blendFuncMap,
@ -72,6 +72,7 @@ export default class ReglModel implements IModel {
frag: fs,
uniforms: reglUniforms,
vert: vs,
blend: {},
primitive:
primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive],
};
@ -96,15 +97,12 @@ export default class ReglModel implements IModel {
this.drawCommand = reGl(drawParams);
const pickDrawParams = cloneDeep(drawParams);
// @ts-ignore
pickDrawParams.blend.enable = false;
// @ts-ignore
pickDrawParams.blend.func = {
dstAlpha: 'one',
dstRGB: 'one minus src alpha',
srcAlpha: 'one',
srcRGB: 'src alpha',
pickDrawParams.blend = {
...pickDrawParams.blend,
enable: false,
};
this.drawPickCommand = reGl(pickDrawParams);
this.drawParams = drawParams;
}

2
packages/source/__tests__/source.spec.ts
View File

@ -1,4 +1,4 @@
import Source from '../src/source';
import Source from '../src/';
import Point from './data/point';
import Polygon from './data/polygon';

2
packages/source/src/index.ts
View File

@ -11,7 +11,6 @@ import { aggregatorToGrid } from './transform/grid';
import { pointToHexbin } from './transform/hexagon';
import { join } from './transform/join';
import { map } from './transform/map';
export default Source;
registerParser('geojson', geojson);
registerParser('image', image);
registerParser('csv', csv);
@ -34,3 +33,4 @@ export * from './interface';
export const DEFAULT_DATA = defaultData;
export const DEFAULT_PARSER = defaultParser;
export default Source;

64
stories/Draw/Components/AmapDraw.tsx
View File

@ -1,64 +0,0 @@
import { Scene } from '@antv/l7';
import { DrawControl } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class AMapDraw extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
style: 'dark', // hosted style id
center: [112.874, 32.76], // starting position
zoom: 12, // starting zoom
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawControl = new DrawControl(scene, {
position: 'topright',
layout: 'horizontal', // horizontal vertical
controls: {
point: true,
polygon: true,
line: true,
circle: true,
rect: true,
delete: true,
},
});
// @ts-ignore
window.drawControl = drawControl;
drawControl.on('draw.create', (e) => {
console.log(e);
});
scene.on('dblclick', () => {
drawControl.removeAllData();
});
scene.addControl(drawControl);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

52
stories/Draw/Components/Circle.tsx
View File

@ -1,52 +0,0 @@
// @ts-ignore
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawPolygon, DrawCircle } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawCircle = new DrawCircle(scene);
drawCircle.enable();
drawCircle.on('draw.create', (e: any) => {
console.log(e);
});
drawCircle.on('draw.update', (e: any) => {
console.log('update', e);
});
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

119
stories/Draw/Components/DrawCircle.tsx
View File

@ -1,119 +0,0 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { lnglatDistance } from '@antv/l7-utils';
// import turfCircle from '@turf/circle';
import * as React from 'react';
const createGeoJSONCircle = (
center: [number, number],
radiusInKm: number,
points: number = 64,
) => {
const options = { steps: 64 };
// const circle = turfCircle(center, radiusInKm, options);
return {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: [],
},
};
};
export default class MultiPolygon extends React.Component {
private gui: dat.GUI;
private $stats: Node;
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'normal',
center: [121.775374, 31.31067],
zoom: 15,
}),
});
this.scene = scene;
scene.on('loaded', () => {
let startPoint = {};
const circleLayer = new PolygonLayer()
.source({
type: 'FeatureCollection',
features: [],
})
.color('#fbb03b')
.shape('fill')
.style({
opacity: 0.6,
});
scene.addLayer(circleLayer);
scene.on('dragstart', (e: any) => {
// @ts-ignore
scene.getMapService().setMapStatus({ dragEnable: false });
startPoint = e.lngLat;
const layer = new PointLayer()
.source([startPoint], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.color('#fbb03b')
.size(5)
.style({
stroke: '#fff',
strokeWidth: 2,
});
scene.addLayer(layer);
});
scene.on('dragging', (e: any) => {
//dragging - drag
// console.log('drag', startPoint, e.lngLat)
// @ts-ignore
const start = [startPoint.lng, startPoint.lat];
const dis = lnglatDistance(
// @ts-ignore
start,
[e.lngLat.lng, e.lngLat.lat],
);
// console.log('dis', dis)
const circleData = createGeoJSONCircle(
start as [number, number],
dis / 1000,
);
circleLayer.setData(circleData.data);
// console.log('circleData.data', circleData.data)
const popup = new Popup().setText(`${dis}`).setLnglat(e.lngLat);
scene.addPopup(popup);
});
scene.on('dragend', (e: any) => {
console.log('dragend');
// @ts-ignore
scene.getMapService().setMapStatus({ dragEnable: true });
});
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

60
stories/Draw/Components/DrawControl.tsx
View File

@ -1,60 +0,0 @@
import { Scene } from '@antv/l7';
import { DrawControl } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'mapbox://styles/mapbox/satellite-v9', // hosted style id
center: [-91.874, 42.76], // starting position
zoom: 12, // starting zoom
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawControl = new DrawControl(scene, {
position: 'topright',
layout: 'horizontal', // horizontal vertical
controls: {
point: true,
polygon: true,
line: true,
circle: true,
rect: true,
delete: true,
},
});
scene.on('click', () => {});
drawControl.on('draw.update', (e: any) => {
console.log('update', e);
});
scene.addControl(drawControl);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

68
stories/Draw/Components/DrawLine.tsx
View File

@ -1,68 +0,0 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawLine } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [79.8046875, 52.482780222078226],
zoom: 4,
}),
});
this.scene = scene;
const line = scene.on('loaded', () => {
const drawLine = new DrawLine(scene, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: [
[79.8046875, 52.482780222078226],
[110.74218749999999, 36.87962060502676],
[111.4453125, 19.973348786110602],
[112.8515625, 9.795677582829743],
[95.2734375, -6.664607562172573],
[82.265625, -14.264383087562637],
[74.53125, -25.799891182088306],
[68.203125, -30.145127183376115],
[41.484375, -16.63619187839765],
],
},
},
],
},
});
drawLine.enable();
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

75
stories/Draw/Components/DrawPoint.tsx
View File

@ -1,75 +0,0 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawPoint } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawPoint = new DrawPoint(scene, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [88.9453125, 53.330872983017066],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [109.3359375, 28.613459424004414],
},
},
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [97.734375, 35.460669951495305],
},
},
],
},
});
drawPoint.enable();
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

48
stories/Draw/Components/DrawRect.tsx
View File

@ -1,48 +0,0 @@
import { LineLayer, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
import { DrawRect } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [113.775374, 28.31067],
zoom: 12,
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawRect = new DrawRect(scene, {
editEnable: false,
selectEnable: false,
});
drawRect.enable();
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

70
stories/Draw/Components/Polygon.tsx
View File

@ -1,70 +0,0 @@
import { Scene } from '@antv/l7';
import { DrawPolygon } from '@antv/l7-draw';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Circle extends React.Component {
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Mapbox({
pitch: 0,
style: 'light',
center: [44.29687499999999, 55.3791104480105],
zoom: 3,
}),
});
this.scene = scene;
scene.on('loaded', () => {
const drawPolygon = new DrawPolygon(scene, {
data: {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Polygon',
coordinates: [
[
[44.29687499999999, 55.3791104480105],
[28.4765625, 47.754097979680026],
[27.0703125, 38.8225909761771],
[42.890625, 33.43144133557529],
[73.47656249999999, 37.43997405227057],
[85.4296875, 47.989921667414194],
[79.1015625, 60.58696734225869],
[44.29687499999999, 55.3791104480105],
],
],
},
},
],
},
});
// drawPolygon.enable();
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

20
stories/Draw/Draw.stories.tsx
View File

@ -1,20 +0,0 @@
import { storiesOf } from '@storybook/react';
import * as React from 'react';
import AMapDraw from './Components/AmapDraw';
import Circle from './Components/Circle';
import DrawCircle from './Components/DrawCircle';
import DrawControl from './Components/DrawControl';
import Line from './Components/DrawLine';
import Point from './Components/DrawPoint';
import DrawRect from './Components/DrawRect';
import Polygon from './Components/Polygon';
storiesOf('绘制', module)
.add('圆', () => <Circle />, {})
.add('矩形', () => <DrawRect />, {})
.add('多边形', () => <Polygon />, {})
.add('点', () => <Point />, {})
.add('路径', () => <Line />, {})
.add('绘制组件', () => <DrawControl />, {})
.add('绘制圆', () => <DrawCircle />, {})
.add('高德地图', () => <AMapDraw />, {});

31856
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff