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

Chore layer init hook (#1399) 

* chore: add waterfall hooks

* chore: 重构pointmodel & gaodemap->gaodev2

* chore: 重构其他图层

* fix: 动画流程

* chore: 还原 tile 的一些配置

* chore: 更新async-hook 版本

* docs: 添加demo

* docs: 更新demo 配置

* docs: add tile demo 目录

* chore: tileset tile -> sourceTile

* chore: add tile service

Co-authored-by: 象数 <zhengxue.lzx@antgroup.com>
This commit is contained in:
@thinkinggis 2022-10-18 19:40:15 +08:00 committed by GitHub
parent 31ec08e53d
commit 424bc28d99
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
205 changed files with 2391 additions and 1779 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dev-demos/bugs/source/demos/source-geometry.tsx
View File

@ -4,7 +4,7 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -16,7 +16,7 @@ export default () => {
.then((data) => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 0,
center: [113.8623046875, 30.031055426540206],
zoom: 3,

11
dev-demos/bugs/source/demos/source-update.tsx
View File

@ -109,9 +109,14 @@ const Demo: React.FC = () => {
lineList[dragFeature.properties?.index] = dragFeature;
}
prePosition = [lng, lat];
pointLayer.setData(getPointFeatureCollection([dragFeature]));
lineLayer.setData(featureCollection(lineList));
// scene.render();
pointLayer.setData(getPointFeatureCollection([dragFeature]),{
autoRender:false
});
lineLayer.setData(featureCollection(lineList),{
autoRender:false
});
scene.render()
}
});
});

6
dev-demos/features/canvasLayer/custom.md
View File

@ -1,7 +1,7 @@
### CanvasLayer - demo1
```tsx
import { CanvasLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
let x = 0;
function draw(option) {
@ -114,8 +114,8 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'fresh',
map: new GaodeMapV2({
style: 'light',
center: [ 115, 31 ],
zoom: 5.0
})

6
dev-demos/features/canvasLayer/custom2.md
View File

@ -1,7 +1,7 @@
### CanvasLayer - demo2
```tsx
import { CanvasLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
@ -9,8 +9,8 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'fresh',
map: new GaodeMapV2({
style: 'normal',
center: [ 90, 31 ],
zoom: 2
})

4
dev-demos/features/citybuilding/amap1.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, CityBuildingLayer, LineLayer, PolygonLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
style: 'dark',
center: [120.145, 30.238915],
pitch: 60,

2
dev-demos/features/customLayer/marker.md
View File

@ -9,7 +9,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map-marker',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.184824, 30.248341],
pitch: 0,
zoom: 18,

4
dev-demos/features/geometry/demos/billboard.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, GeometryLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 80,
style: 'dark',
center: [120, 30],

4
dev-demos/features/geometry/demos/sprite.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, GeometryLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
// map: new GaodeMapV2({
// map: new Mapbox({
pitch: 40,

4
dev-demos/features/heatmap/demos/heatmap.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Map({
style: 'dark',
pitch: 0,
center: [127.5671666579043, 7.445038892195569],

4
dev-demos/features/heatmap/demos/heatmap3d.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120, 30],
pitch: 0,
zoom: 2,

4
dev-demos/features/imageLayer/image.tsx
View File

@ -1,5 +1,5 @@
import { ImageLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -7,7 +7,7 @@ export default () => {
const scene = new Scene({
id: 'map',
pickBufferScale: 1.0,
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
pitch: 0,
style: 'normal',

4
dev-demos/features/imageLayer/raster.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -28,7 +28,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
zoom: 3,
}),

4
dev-demos/features/line/demos/greatcircleline.tsx
View File

@ -8,14 +8,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [105, 32],
zoom: 4,
// pitch: 60

7
dev-demos/features/line/demos/line.tsx
View File

@ -9,14 +9,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [105, 32],
zoom: 4,
}),
@ -124,7 +124,8 @@ export default () => {
scene.on('loaded', () => {
scene.addLayer(layer);
scene.render();
});
}, []);
return (

9
dev-demos/features/line/demos/lineAnimate.tsx
View File

@ -9,7 +9,7 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -20,7 +20,7 @@ export default () => {
);
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [110.19382669582967, 40.258134],
pitch: 0,
zoom: 3,
@ -36,6 +36,7 @@ export default () => {
});
const lineLayer = new LineLayer({
blend: 'normal',
autoFit: true,
});
lineLayer
.source(data)
@ -44,7 +45,6 @@ export default () => {
.color('saldo', (v) => {
return v < 0 ? 'rgb(60,255,255)' : 'rgb(255,255,60)';
})
// .color('red')
.animate({
enable: true,
interval: 0.1,
@ -54,9 +54,8 @@ export default () => {
.style({
opacity: 1,
})
.render();
lineLayer.fitBounds();
scene.addLayer(lineLayer);
// scene.render()
}, []);
return (
<div

4
dev-demos/features/line/demos/lineArc3d.tsx
View File

@ -6,14 +6,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 40,
center: [3.438, 40.16797],
zoom: 0,

4
dev-demos/features/line/demos/lineArcPlane.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 40,
center: [ 40, 40.16797 ],
style: 'dark',

4
dev-demos/features/line/demos/lineArrow.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { LineLayer, Scene, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 120.15, 30.3 ],
zoom: 10,
style: 'light'

4
dev-demos/features/line/demos/lineTexture.tsx
View File

@ -5,14 +5,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.15, 30.246],
pitch: 0,
zoom: 13.5,

4
dev-demos/features/line/demos/lineWorker.tsx
View File

@ -5,14 +5,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120, 30],
pitch: 0,
zoom: 2,

4
dev-demos/features/line/demos/linearc.tsx
View File

@ -9,14 +9,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [105, 32],
zoom: 4,
// pitch: 60

4
dev-demos/features/line/demos/linearline.tsx
View File

@ -1,12 +1,12 @@
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [105, 30.258134],
zoom: 5,
}),

4
dev-demos/features/line/demos/lineblur.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [122, 28],
zoom: 5,
style: 'dark',

4
dev-demos/features/line/demos/linedash.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [116.3956, 39.9392],
zoom: 10,
style: 'amap://styles/wine',

4
dev-demos/features/line/demos/linehalf.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { LineLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120, 30],
pitch: 0,
zoom: 2,

4
dev-demos/features/line/demos/linewall.tsx
View File

@ -1,12 +1,12 @@
import { LineLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [115, 30.258134],
pitch: 40,
zoom: 6,

4
dev-demos/features/line/demos/simpleline.tsx
View File

@ -4,7 +4,7 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { polygonToLineString, MultiPolygon } from '@turf/turf';
@ -80,7 +80,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
// center: [121.268, 30.3628],
// center: [115.565185546875,41.31082388091818],
center: [112.796630859375, 21.80030805097259],

4
dev-demos/features/mask/demos/heatmap.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, HeatmapLayer, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 2,

4
dev-demos/features/mask/demos/heatmapgrid.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 2,

4
dev-demos/features/mask/demos/heatmapgrid3d.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
style: 'light',
pitch: 56.499,
center: [114.07737552216226, 22.542656745583486],

4
dev-demos/features/mask/demos/hexgon.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, HeatmapLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 6,

4
dev-demos/features/mask/demos/image.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, ImageLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 15,

4
dev-demos/features/mask/demos/raster.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, RasterLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -32,7 +32,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 2,

4
dev-demos/features/mask/demos/singleMask.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [120.165, 30.26],
pitch: 0,
zoom: 15,

4
dev-demos/features/mask/demos/text.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, PointLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [105, 32],
pitch: 0,
zoom: 4,

4
dev-demos/features/mask/demos/wind.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { Scene, WindLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [105.732421875, 32.24997445586331],
pitch: 0,
style: 'dark',

2
dev-demos/features/point/demos/column.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 66.02383,
style: 'dark',
center: [121.400257, 31.25287],

2
dev-demos/features/point/demos/cylinder.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.107846, 30.267069],
pitch: 35.210526315789465,
style: 'dark',

2
dev-demos/features/point/demos/iconfont.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3

2
dev-demos/features/point/demos/icons.tsx
View File

@ -12,7 +12,7 @@ export default () => {
);
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.4, 31.258134],
zoom: 12,
pitch: 0,

4
dev-demos/features/point/demos/normal.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
style: 'dark',
center: [ 121.417463, 31.215175 ],
pitch: 0,
@ -19,7 +19,7 @@ export default () => {
fetch('https://gw.alipayobjects.com/os/rmsportal/BElVQFEFvpAKzddxFZxJ.txt')
.then(res => res.text())
.then(data => {
const pointLayer = new PointLayer({})
const pointLayer = new PointLayer({blend:'additive'})
.source(data, {
parser: {
type: 'csv',

2
dev-demos/features/point/demos/radar.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [110.19382669582967, 30.258134],
pitch: 0,
zoom: 2,

2
dev-demos/features/point/demos/simple.tsx
View File

@ -8,7 +8,7 @@ export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3

4
dev-demos/features/point/demos/text.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { PointLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMap,GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect( () => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 110, 36 ],
style: 'light',
zoom: 3

6
dev-demos/features/point/pointCircle.md
View File

@ -1,7 +1,7 @@
### point - circle
```tsx
import { PointLayer, Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -9,7 +9,7 @@ export default () => {
const scene = new Scene({
id: 'point_circle',
pickBufferScale: 1.0,
map: new GaodeMap({
map: new GaodeMapV2({
style: 'light',
center: [-121.24357, 37.58264],
pitch: 0,
@ -55,7 +55,7 @@ export default () => {
});
scene.addLayer(pointLayer);
scene.render();
},
)
})

4
dev-demos/features/polygon/demos/extrude.tsx
View File

@ -7,14 +7,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
style: 'dark',
center: [120, 29.732983],
zoom: 6.2,

4
dev-demos/features/polygon/demos/fill.tsx
View File

@ -5,14 +5,14 @@ import {
// @ts-ignore
} from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
pitch: 40,
center: [113.8623046875, 30.031055426540206],
zoom: 7.5,

2
dev-demos/features/polygon/demos/ocean.tsx
View File

@ -12,7 +12,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120, 30],
pitch: 0,
zoom: 2,

2
dev-demos/features/polygon/demos/water.tsx
View File

@ -12,7 +12,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [120, 30],
pitch: 0,
zoom: 3,

4
dev-demos/features/rasterLayer/demos/rasterData.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -28,7 +28,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
zoom: 3,
}),

4
dev-demos/features/rasterLayer/demos/rasterFile.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -18,7 +18,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
zoom: 3,
}),

4
dev-demos/features/rasterLayer/demos/rasterFile2.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -15,7 +15,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [110, 30.3628],
zoom: 3,
}),

4
dev-demos/features/rasterLayer/demos/rasterRgb.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -15,7 +15,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
zoom: 3,
}),

4
dev-demos/features/rasterLayer/demos/rasterRgb2.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
async function getTiffData(url: string) {
@ -14,7 +14,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [110, 30.3628],
zoom: 3,
}),

4
dev-demos/features/something/demos/wind.tsx
View File

@ -1,14 +1,14 @@
// @ts-ignore
import { Scene, WindLayer } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [105.732421875, 32.24997445586331],
pitch: 0,
style: 'dark',

4
dev-demos/features/threejs/amap1.md
View File

@ -1,7 +1,7 @@
### threejs - amap1
```tsx
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as THREE from 'three';
@ -12,7 +12,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [111.4453125, 32.84267363195431],
pitch: 45,
rotation: 30,

4
dev-demos/features/threejs/amapCar.md
View File

@ -1,7 +1,7 @@
### threejs - car
```tsx
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as THREE from 'three';
@ -62,7 +62,7 @@ export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 110, 35.39847 ],
pitch: 20,
style: 'dark',

91
dev-demos/features/tile/basemap/chinadistrictmap.tsx Normal file
View File

@ -0,0 +1,91 @@
// @ts-ignore
import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
zoom: 4.5,
center: [116.412427, 39.303573],
}),
});
const url =
'https://mvt.amap.com/district/CHN3/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
scene.on('loaded', () => {
const colors = {};
const getColorByAdcode = function(adcode) {
if (!colors[adcode]) {
const gb = Math.floor(Math.random() * 155 + 50);
colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
}
return colors[adcode];
};
// 绿地
const fill = new PolygonLayer({
sourceLayer: 'CHN_Districts',
})
.source(source)
.shape('fill')
.color('adcode',getColorByAdcode);
const line = new LineLayer({
sourceLayer: 'CHN_Districts_L',
usage: 'basemap',
})
.source(source)
.shape('simple')
.color('#fee0d2');
const line2 = new LineLayer({
sourceLayer: 'CHN_Citys_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#fc9272');
const line3 = new LineLayer({
sourceLayer: 'CHN_Provinces_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#de2d26');
scene.addLayer(fill);
scene.addLayer(line);
scene.addLayer(line2);
scene.addLayer(line3);
// scene.addLayer(line2);
// const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
// scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

123
dev-demos/features/tile/basemap/chinamap.tsx Normal file
View File

@ -0,0 +1,123 @@
// @ts-ignore
import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const SOC = 'CHN';
const colors = {};
const GDPSpeed = {
'520000': 10, //贵州
'540000': 10, //西藏
'530000': 8.5, //云南
'500000': 8.5, //重庆
'360000': 8.5, //江西
'340000': 8.0, //安徽
'510000': 7.5, //四川
'350000': 8.5, //福建
'430000': 8.0, //湖南
'420000': 7.5, //湖北
'410000': 7.5, //河南
'330000': 7.0, //浙江
'640000': 7.5, //宁夏
'650000': 7.0, //新疆
'440000': 7.0, //广东
'370000': 7.0, //山东
'450000': 7.3, //广西
'630000': 7.0, //青海
'320000': 7.0, //江苏
'140000': 6.5, //山西
'460000': 7, // 海南
'310000': 6.5, //上海
'110000': 6.5, // 北京
'130000': 6.5, // 河北
'230000': 6, // 黑龙江
'220000': 6, // 吉林
'210000': 6.5, //辽宁
'150000': 6.5, //内蒙古
'120000': 5, // 天津
'620000': 6, // 甘肃
'610000': 8.5, // 甘肃
'710000': 6.64, //台湾
'810000': 6.0, //香港
'820000': 6.7, //澳门
};
const getColorByDGP = function(adcode) {
if (!colors[adcode]) {
const gdp = GDPSpeed[adcode];
if (!gdp) {
colors[adcode] = 'rgb(227,227,227)';
} else {
const rg = 255 - Math.floor(((gdp - 5) / 5) * 255);
colors[adcode] = 'rgb(' + rg + ',' + rg + ',255)';
}
}
return colors[adcode];
};
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [112, 30],
// zoom: 12,
zoom: 3,
}),
});
const url =
'https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
scene.on('loaded', () => {
// 绿地
const fill = new PolygonLayer({
sourceLayer: 'CHN_Cities',
})
.source(source)
.shape('fill')
.color('adcode_pro', getColorByDGP);
const line = new LineLayer({
sourceLayer: 'CHN_Cities_L',
usage: 'basemap',
})
.source(source)
.shape('simple')
.color('#FFA500');
const line2 = new LineLayer({
sourceLayer: 'CHN_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#053061');
scene.addLayer(fill);
scene.addLayer(line);
scene.addLayer(line2);
// const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
// scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

1
dev-demos/features/tile/basemap/data.ts Normal file
View File

File diff suppressed because one or more lines are too long

151
dev-demos/features/tile/basemap/worldmap.tsx
View File

@ -1,56 +1,101 @@
// @ts-ignore
import {
Scene,
Source,
PolygonLayer,
} from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [121.268, 30.3628],
// zoom: 12,
zoom: 4,
}),
import { Scene, Source, PolygonLayer,LineLayer } from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { data } from './data';
export default () => {
useEffect(() => {
const counts = [10000, 5000, 1000, 500, 100];
const color = ['#41ae76', '#99d8c9', '#ccece6', '#e5f5f9', '#f7fcfd'];
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [112, 30],
// zoom: 12,
zoom: 0,
}),
});
const url =
'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
function unicode2Char(name) {
const code = name.split('/').slice(1).map((c)=>{
return String.fromCharCode('0x'+c)
});
const url =
'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
},
return code.join('');
}
scene.on('loaded', () => {
// 绿地
const water_surface = new PolygonLayer({
sourceLayer: 'WLD',
})
.source(source)
.shape('fill')
.color('NAME_CHN', (NAME_CHN) => {
const namestr = unicode2Char(NAME_CHN)
const country = data.find((c) => {
return c.name == namestr;
});
if (!country) {
return '#fff';
}
const qz = (country.qz as unknown as number)* 1;
if (qz > counts[0]) {
return color[0];
} else if (qz > counts[1]) {
return color[1];
} else if (qz > counts[2]) {
return color[2];
} else if (qz > counts[3]) {
return color[3];
} else {
return color[4];
}
});
const line = new LineLayer({
sourceLayer: 'WLD_L',
})
.source(source)
.shape('line')
.size(0.6)
.color('type',(t)=>{
if (t === '0') {
return 'red';
}
if (t === '2') {
return '#09f';
}
return '#fc9272'
});
scene.on('loaded', () => {
// 绿地
const water_surface = new PolygonLayer({
sourceLayer: 'WLD',
})
.source(source)
.shape('fill')
.color('#9fd7fc');
scene.addLayer(water_surface);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};
scene.addLayer(water_surface);
scene.addLayer(line);
// const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
// scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
backgroundColor: 'rgba(175,200,253)',
height: '500px',
position: 'relative',
}}
/>
);
};

4
dev-demos/features/tile/raster/satellite.tsx
View File

@ -1,5 +1,5 @@
import { Scene, RasterLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
@ -7,7 +7,7 @@ export default () => {
const scene = new Scene({
id: 'map',
pickBufferScale: 1.0,
map: new GaodeMap({
map: new GaodeMapV2({
center: [121.268, 30.3628],
pitch: 0,
style: 'blank',

4
dev-demos/features/tile/rasterData/loadMultiTiff.tsx
View File

@ -1,7 +1,7 @@
// @ts-ignore
import { RasterLayer, Scene, Source } from '@antv/l7';
// @ts-ignore
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -64,7 +64,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 116, 27 ],
zoom: 6,
style: 'dark'

4
dev-demos/features/tile/rasterData/loadTiff.tsx
View File

@ -1,5 +1,5 @@
import { RasterLayer, Scene, Source } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -62,7 +62,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 116, 27 ],
zoom: 6,
style: 'dark'

4
dev-demos/features/tile/rasterData/update.tsx
View File

@ -1,5 +1,5 @@
import { RasterLayer, Scene, Source } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import { GaodeMapV2 } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import * as GeoTIFF from 'geotiff';
@ -62,7 +62,7 @@ export default () => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new GaodeMap({
map: new GaodeMapV2({
center: [ 116, 27 ],
zoom: 6,
style: 'dark'

3
dev-demos/features/tile/worldmap.md
View File

@ -1,3 +0,0 @@
### 世界地图瓦片
#### 世界地图
<code src="./basemap/worldmap.tsx"></code>

28
dev-demos/gallery/scale/cat.tsx
View File

@ -1,10 +1,11 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { useData, addLayers } from './useLine';
import React, { useEffect, useState } from 'react';
import { useData } from './useLine';
export default () => {
const { geoData } = useData();
const [mapScene, setMapScene] = useState<Scene>();
useEffect(() => {
const scene = new Scene({
@ -16,7 +17,17 @@ export default () => {
zoom: 3,
}),
});
if (geoData) {
scene.on('loaded', () => {
setMapScene(scene);
});
return () => {
mapScene?.destroy();
};
}, []);
useEffect(() => {
if (geoData && mapScene) {
console.log(geoData, mapScene);
const layer = new PolygonLayer({})
.source(geoData.county, {
transforms: [
@ -37,19 +48,16 @@ export default () => {
opacity: 1,
});
scene.addLayer(layer);
addLayers(geoData, scene, layer);
mapScene.addLayer(layer);
// addLayers(geoData, scene, layer);
}
return () => {
scene.destroy();
};
}, [geoData]);
}, [geoData, mapScene]);
return (
<div
id="map"
style={{
height: '500px',
height: '200px',
position: 'relative',
}}
/>

31
dev-demos/gallery/scale/diverging.tsx
View File

@ -1,22 +1,27 @@
import { PolygonLayer, Scene } from '@antv/l7';
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { useEuropeData, addEuropeLayers } from './useLine';
export default () => {
const { geoData } = useEuropeData();
const [scene, setScene] = useState<Scene>();
useEffect(() => {
const scene = new Scene({
id: 'map',
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],
zoom: 3,
}),
});
if (geoData) {
if (!scene) {
const mapScene = new Scene({
id: 'map',
map: new Map({
pitch: 0,
style: 'light',
center: [-96, 37.8],
zoom: 3,
}),
});
setScene(mapScene);
}
if (geoData && scene) {
const layer = new PolygonLayer({
autoFit: true,
})
@ -46,11 +51,11 @@ export default () => {
opacity: 1,
});
scene.addLayer(layer);
scene?.addLayer(layer);
addEuropeLayers(geoData, scene, layer);
}
return () => {
scene.destroy();
scene?.destroy();
};
}, [geoData]);

5
dev-demos/tile/chinacity.md Normal file
View File

@ -0,0 +1,5 @@
---
title: 中国城市
order: 2
---
<code src="./district/chinamap.tsx"></code>

5
dev-demos/tile/chinadistrict.md Normal file
View File

@ -0,0 +1,5 @@
---
title: 中国区县
order: 2
---
<code src="./district/chinadistrictmap.tsx"></code>

90
dev-demos/tile/district/chinadistrictmap.tsx Normal file
View File

@ -0,0 +1,90 @@
// @ts-ignore
import { Scene, Source, PolygonLayer, LineLayer } from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
zoom: 4.5,
center: [116.412427, 39.303573],
}),
});
const url =
'https://mvt.amap.com/district/CHN3/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
scene.on('loaded', () => {
const colors = {};
const getColorByAdcode = function(adcode) {
if (!colors[adcode]) {
const gb = Math.floor(Math.random() * 155 + 50);
colors[adcode] = 'rgb(' + gb + ',' + gb + ',255)';
}
return colors[adcode];
};
// 绿地
const fill = new PolygonLayer({
sourceLayer: 'CHN_Districts',
})
.source(source)
.shape('fill')
.color('adcode', getColorByAdcode);
const line = new LineLayer({
sourceLayer: 'CHN_Districts_L',
usage: 'basemap',
})
.source(source)
.shape('simple')
.color('#fee0d2');
const line2 = new LineLayer({
sourceLayer: 'CHN_Citys_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#fc9272');
const line3 = new LineLayer({
sourceLayer: 'CHN_Provinces_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#de2d26');
scene.addLayer(fill);
scene.addLayer(line);
scene.addLayer(line2);
scene.addLayer(line3);
// scene.addLayer(line2);
// const debugerLayer = new TileDebugLayer({ usage: 'basemap' });
// scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

129
dev-demos/tile/district/chinamap.tsx Normal file
View File

@ -0,0 +1,129 @@
// @ts-ignore
import {
Scene,
Source,
PolygonLayer,
LineLayer,
TileDebugLayer,
} from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {
const SOC = 'CHN';
const colors = {};
const GDPSpeed = {
'520000': 10, //贵州
'540000': 10, //西藏
'530000': 8.5, //云南
'500000': 8.5, //重庆
'360000': 8.5, //江西
'340000': 8.0, //安徽
'510000': 7.5, //四川
'350000': 8.5, //福建
'430000': 8.0, //湖南
'420000': 7.5, //湖北
'410000': 7.5, //河南
'330000': 7.0, //浙江
'640000': 7.5, //宁夏
'650000': 7.0, //新疆
'440000': 7.0, //广东
'370000': 7.0, //山东
'450000': 7.3, //广西
'630000': 7.0, //青海
'320000': 7.0, //江苏
'140000': 6.5, //山西
'460000': 7, // 海南
'310000': 6.5, //上海
'110000': 6.5, // 北京
'130000': 6.5, // 河北
'230000': 6, // 黑龙江
'220000': 6, // 吉林
'210000': 6.5, //辽宁
'150000': 6.5, //内蒙古
'120000': 5, // 天津
'620000': 6, // 甘肃
'610000': 8.5, // 甘肃
'710000': 6.64, //台湾
'810000': 6.0, //香港
'820000': 6.7, //澳门
};
const getColorByDGP = function(adcode) {
if (!colors[adcode]) {
const gdp = GDPSpeed[adcode];
if (!gdp) {
colors[adcode] = 'rgb(227,227,227)';
} else {
const rg = 255 - Math.floor(((gdp - 5) / 5) * 255);
colors[adcode] = 'rgb(' + rg + ',' + rg + ',255)';
}
}
return colors[adcode];
};
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [112, 30],
// zoom: 12,
zoom: 3,
}),
});
const url =
'https://mvt.amap.com/district/CHN2/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
scene.on('loaded', () => {
// 绿地
const fill = new PolygonLayer({
sourceLayer: 'CHN_Cities',
})
.source(source)
.shape('fill')
.color('adcode_pro', getColorByDGP);
const line = new LineLayer({
sourceLayer: 'CHN_Cities_L',
usage: 'basemap',
})
.source(source)
.shape('simple')
.color('#FFA500');
const line2 = new LineLayer({
sourceLayer: 'CHN_L',
usage: 'basemap',
})
.source(source)
.shape('line')
.size(0.6)
.color('#053061');
const debugerLayer = new TileDebugLayer();
scene.addLayer(fill);
scene.addLayer(line);
scene.addLayer(line2);
scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
);
};

1
dev-demos/tile/district/data.ts Normal file
View File

File diff suppressed because one or more lines are too long

117
dev-demos/tile/district/worldmap.tsx Normal file
View File

@ -0,0 +1,117 @@
// @ts-ignore
import {
Scene,
Source,
PolygonLayer,
LineLayer,
TileDebugLayer,
} from '@antv/l7';
// @ts-ignore
import { Map } from '@antv/l7-maps';
import React, { useEffect } from 'react';
import { data } from './data';
export default () => {
useEffect(() => {
const counts = [10000, 5000, 1000, 500, 100];
const color = ['#41ae76', '#99d8c9', '#ccece6', '#e5f5f9', '#f7fcfd'];
const scene = new Scene({
id: 'map',
stencil: true,
map: new Map({
center: [60, 30],
// zoom: 12,
zoom: 1,
}),
});
const url =
'https://mvt.amap.com/district/WLD/{z}/{x}/{y}/4096?key=309f07ac6bc48160e80b480ae511e1e9&version=';
const source = new Source(url, {
parser: {
type: 'mvt',
tileSize: 256,
warp: false,
},
});
function unicode2Char(name) {
const code = name
.split('/')
.slice(1)
.map((c) => {
return String.fromCharCode('0x' + c);
});
return code.join('');
}
scene.on('loaded', () => {
// 绿地
const water_surface = new PolygonLayer({
sourceLayer: 'WLD',
zIndex: 1,
})
.source(source)
.shape('fill')
.color('NAME_CHN', (NAME_CHN) => {
const namestr = unicode2Char(NAME_CHN);
const country = data.find((c) => {
return c.name == namestr;
});
if (!country) {
return '#fff';
}
const qz = ((country.qz as unknown) as number) * 1;
if (qz > counts[0]) {
return color[0];
} else if (qz > counts[1]) {
return color[1];
} else if (qz > counts[2]) {
return color[2];
} else if (qz > counts[3]) {
return color[3];
} else {
return color[4];
}
});
const line = new LineLayer({
sourceLayer: 'WLD_L',
zIndex: 2,
})
.source(source)
.shape('line')
.size(0.6)
.color('type', (t) => {
if (t === '0') {
return 'red';
}
if (t === '2') {
return '#09f';
}
return '#fc9272';
});
water_surface.on('click', (e) => {
console.log(e);
});
scene.on('zoomend', () => {
console.log(water_surface);
});
scene.addLayer(water_surface);
scene.addLayer(line);
const debugerLayer = new TileDebugLayer();
scene.addLayer(debugerLayer);
});
}, []);
return (
<div
id="map"
style={{
backgroundColor: 'rgba(175,200,253)',
height: '500px',
position: 'relative',
}}
/>
);
};

9
dev-demos/tile/worldmap.md Normal file
View File

@ -0,0 +1,9 @@
---
title: 世界地图
order: 0
---
### 世界地图
<code src="./district/worldmap.tsx"></code>

2
packages/core/package.json
View File

@ -24,7 +24,7 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.2.2",
"@antv/async-hook": "^2.2.4",
"@antv/l7-utils": "2.9.36",
"@babel/runtime": "^7.7.7",
"@turf/helpers": "^6.1.4",

33
packages/core/src/services/config/ConfigService.ts
View File

@ -2,9 +2,9 @@
import { injectable } from 'inversify';
import { merge } from 'lodash';
import 'reflect-metadata';
import { ILayerConfig } from '../layer/ILayerService';
import { ILayerConfig,ILayerAttributesOption} from '../layer/ILayerService';
import { IRenderConfig } from '../renderer/IRendererService';
import { IGlobalConfigService, ISceneConfig } from './IConfigService';
import { IGlobalConfigService, ISceneConfig, } from './IConfigService';
import WarnInfo from './warnInfo';
/**
@ -68,7 +68,7 @@ const defaultLayerConfig: Partial<ILayerConfig> = {
active: false,
activeColor: '#2f54eb',
enableHighlight: false,
enableSelect: false,
enableSelect: true,
highlightColor: '#2f54eb',
activeMix: 0,
selectColor: 'blue',
@ -117,6 +117,15 @@ export default class GlobalConfigService implements IGlobalConfigService {
[layerId: string]: Partial<ILayerConfig & ISceneConfig>;
} = {};
/**
* 数据映射缓存
*/
private layerAttributeConfigCache: {
[layerId: string]: Partial<ILayerAttributesOption>
} = {};
/**
* 保存每一种 Layer 配置项的校验器
*/
@ -164,16 +173,18 @@ export default class GlobalConfigService implements IGlobalConfigService {
...merge({}, this.sceneConfigCache[sceneId], defaultLayerConfig, config),
};
}
public getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption> {
return this.layerAttributeConfigCache[layerId]
// public registerLayerConfigSchemaValidator(layerName: string, schema: object) {
// if (!this.layerConfigValidatorCache[layerName]) {
// this.layerConfigValidatorCache[layerName] = ajv.compile(schema);
// }
// }
}
// public validateLayerConfig(layerName: string, data: object) {
// return this.validate(this.layerConfigValidatorCache[layerName], data);
// }
public setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>) {
this.layerAttributeConfigCache[layerId] = {
...this.layerAttributeConfigCache[layerId],
...attr
}
}
public clean() {
this.sceneConfigCache = {};

28
packages/core/src/services/config/IConfigService.ts
View File

@ -1,6 +1,6 @@
// import Ajv from 'ajv';
import { PositionName } from '../component/IControlService';
import { ILayerConfig } from '../layer/ILayerService';
import { ILayerConfig,ILayerAttributesOption } from '../layer/ILayerService';
import { IMapWrapper } from '../map/IMapService';
import { IRenderConfig } from '../renderer/IRendererService';
export interface ISceneConfig extends IRenderConfig {
@ -18,8 +18,6 @@ export interface ISceneConfig extends IRenderConfig {
stencil?: boolean;
}
export interface IGlobalConfigService {
/**
* 获取场景配置项
@ -64,20 +62,18 @@ export interface IGlobalConfigService {
layerId: string,
config: Partial<ILayerConfig>,
): void;
/**
* 注册一个图层的配置项校验器
* @param layerName 图层名
* @param schema 校验规则描述
/**
* 获取数据映射
*/
// registerLayerConfigSchemaValidator(layerName: string, schema: object): void;
/**
* 校验用户传入的图层配置项
* @param data 图层配置项
*/
// validateLayerConfig(layerName: string, data: object): IValidateResult;
getAttributeConfig(layerId: string,): Partial<ILayerAttributesOption>
/**
* 设置数据映射
* @param layerId sh
* @param attr
*/
setAttributeConfig(layerId: string, attr: Partial<ILayerAttributesOption>):void
/**
* 清除场景和图层配置项 Cache，但是需要保留校验器
*/

64
packages/core/src/services/interaction/PickingService.ts
View File

@ -9,7 +9,7 @@ import {
IInteractionTarget,
InteractionEvent,
} from '../interaction/IInteractionService';
import { ILayer, ILayerService, ITileLayer } from '../layer/ILayerService';
import { ILayer, ILayerService } from '../layer/ILayerService';
import { ILngLat, IMapService } from '../map/IMapService';
import { gl } from '../renderer/gl';
import { IFramebuffer } from '../renderer/IFramebuffer';
@ -52,7 +52,7 @@ export default class PickingService implements IPickingService {
let { width, height } = this.getContainerSize(
getContainer() as HTMLCanvasElement | HTMLElement,
);
);
width *= DOM.DPR;
height *= DOM.DPR;
this.pickBufferScale =
@ -292,15 +292,15 @@ export default class PickingService implements IPickingService {
this.selectFeature(layer, new Uint8Array([0, 0, 0, 0])); // toggle select
layer.setCurrentSelectedId(null);
}
if (!layer.isVector) {
// Tip: 选中普通 layer 的时候将 tileLayer 的选中状态清除
this.layerService
.getLayers()
.filter((l) => l.tileLayer)
.map((l) => {
(l.tileLayer as ITileLayer).clearPickState();
});
}
// if (!layer.isVector) {
// // Tip: 选中普通 layer 的时候将 tileLayer 的选中状态清除
// this.layerService
// .getLayers()
// .filter((l) => l.tileLayer)
// .map((l) => {
// (l.tileLayer as ITileLayer).clearPickState();
// });
// }
}
return isPicked;
};
@ -363,8 +363,10 @@ export default class PickingService implements IPickingService {
useFramebuffer(this.pickingFBO, () => {
const layers = this.layerService.getRenderList();
layers
.filter((layer) => layer.needPick(target.type))
.filter((layer) => {
return layer.needPick(target.type)})
.reverse()
.some((layer) => {
clear({
@ -375,28 +377,30 @@ export default class PickingService implements IPickingService {
});
// Tip: clear last picked tilelayer state
this.pickedTileLayers.map((pickedTileLayer) =>
(pickedTileLayer.tileLayer as ITileLayer)?.clearPick(target.type),
);
// this.pickedTileLayers.map((pickedTileLayer) =>
// (pickedTileLayer.tileLayer as ITileLayer)?.clearPick(target.type),
// );
// Tip: 如果当前 layer 是瓦片图层，则走瓦片图层独立的拾取逻辑
if (layer.tileLayer && (layer.tileLayer as ITileLayer).pickLayers) {
return (layer.tileLayer as ITileLayer).pickLayers(target);
}
// if (layer.tileLayer && (layer.tileLayer as ITileLayer).pickLayers) {
// return (layer.tileLayer as ITileLayer).pickLayers(target);
// }
this.layerService.pickRender(layer,target)
layer.hooks.beforePickingEncode.call();
// layer.hooks.beforePickingEncode.call();
if (layer.masks.length > 0) {
// 若存在 mask，则在 pick 阶段的绘制也启用
layer.masks.map((m: ILayer) => {
m.hooks.beforeRenderData.call();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
});
}
layer.renderModels(true);
layer.hooks.afterPickingEncode.call();
// if (layer.masks.length > 0) {
// // 若存在 mask，则在 pick 阶段的绘制也启用
// layer.masks.map(async (m: ILayer) => {
// m.hooks.beforeRenderData.promise();
// m.hooks.beforeRender.call();
// m.render();
// m.hooks.afterRender.call();
// });
// }
// layer.renderModels(true);
// layer.hooks.afterPickingEncode.call();
const isPicked = this.pickFromPickingFBO(layer, target);

49
packages/core/src/services/layer/ILayerService.ts
View File

@ -1,6 +1,6 @@
// @ts-ignore
import { SyncBailHook, SyncHook, SyncWaterfallHook,AsyncSeriesBailHook } from '@antv/async-hook';
import { IColorRamp, Tile, TilesetManager } from '@antv/l7-utils';
import { SyncBailHook, SyncHook, AsyncSeriesBailHook, AsyncWaterfallHook} from '@antv/async-hook';
import { IColorRamp, SourceTile, TilesetManager } from '@antv/l7-utils';
import { Container } from 'inversify';
import Clock from '../../utils/clock';
import { ISceneConfig } from '../config/IConfigService';
@ -77,8 +77,8 @@ export interface ILayerModel {
getUninforms(): IModelUniform;
getDefaultStyle(): unknown;
getAnimateUniforms(): IModelUniform;
buildModels(callbackModel: (models: IModel[]) => void): void;
initModels(callbackModel: (models: IModel[]) => void): void;
buildModels(): Promise<IModel[]>;
initModels(): Promise<IModel[]>;
needUpdate(): boolean;
clearModels(refresh?: boolean): void;
@ -89,6 +89,17 @@ export interface ILayerModel {
setEarthTime?(time: number): void;
createModelData?(options?: any): any;
}
export interface ILayerAttributesOption {
shape: IAttrbuteOptions,
color: IAttrbuteOptions,
texture:IAttrbuteOptions,
rotate:IAttrbuteOptions,
size:IAttrbuteOptions,
filter:IAttrbuteOptions,
label:IAttrbuteOptions,
}
export interface IModelUniform {
[key: string]: IUniform;
}
@ -136,6 +147,11 @@ export interface ISubLayerStyles {
opacity: number;
}
export interface IAttrbuteOptions {
field: StyleAttrField,
values:StyleAttributeOption
}
/**
* For tile subLayer
*/
@ -143,6 +159,7 @@ export interface ISubLayerInitOptions {
usage?: string|undefined;
layerType: string;
transforms?: ITransform[];
visible: boolean,
shape?: string | string[] | IScaleValue;
// options
zIndex: number;
@ -185,7 +202,7 @@ export interface IBaseTileLayerManager {
parent: ILayer;
children: ILayer[];
addTile(tile: Tile):Promise<{ layers: ILayer[]; }>;
addTile(tile: SourceTile):Promise<{ layers: ILayer[]; }>;
addChild(layer: ILayer): void;
addChildren(layers: ILayer[]): void;
@ -220,6 +237,7 @@ export interface ITileLayerManager extends IBaseTileLayerManager{
export interface IBaseTileLayer {
sourceLayer: string;
pickRender(target: IInteractionTarget):void;
parent: ILayer;
tileLayerManager: IBaseTileLayerManager;
tilesetManager: TilesetManager | undefined;
@ -229,6 +247,7 @@ export interface IBaseTileLayer {
destroy(): void;
}
export interface ITileLayer extends IBaseTileLayer{
tileLayerManager: ITileLayerManager;
pickLayers(target: IInteractionTarget): boolean;
clearPick(type: string): void;
@ -271,17 +290,20 @@ export type LayerEventType =
| any;
export interface ILayer {
styleAttributeService: IStyleAttributeService,
sourceLayer?: string;
parent: ILayer;
id: string; // 一个场景中同一类型 Layer 可能存在多个
type: string; // 代表 Layer 的类型
coordCenter: number[];
name: string; //
inited: boolean; // 是否初始化完成
startInit: boolean // 是否开始初始化;
zIndex: number;
clusterZoom: number;
plugins: ILayerPlugin[];
layerModelNeedUpdate: boolean;
styleNeedUpdate: boolean;
modelLoaded: boolean;
layerModel: ILayerModel;
tileLayer: IBaseTileLayer;
layerChildren: ILayer[]; // 在图层中添加子图层
@ -295,9 +317,9 @@ export interface ILayer {
encodeDataLength: number;
pickedFeatureID: number | null;
hooks: {
init: AsyncSeriesBailHook;
init:AsyncSeriesBailHook;
afterInit: SyncBailHook;
beforeRenderData: SyncWaterfallHook;
beforeRenderData: AsyncWaterfallHook ;
beforeRender: SyncBailHook;
afterRender: SyncHook;
beforePickingEncode: SyncHook;
@ -330,7 +352,10 @@ export interface ILayer {
*/
threeRenderService?: any;
postProcessingPassFactory: (
name: string,
) => IPostProcessingPass<unknown>;
normalPassFactory: (name: string) => IPass<unknown>;
getShaderPickStat: () => boolean;
updateModelData(data: IAttributeAndElements): void;
@ -338,7 +363,8 @@ export interface ILayer {
removeMaskLayer(maskLayer: ILayer): void;
needPick(type: string): boolean;
getAttribute(name: string): IStyleAttribute | undefined;
getLayerConfig(): Partial<ILayerConfig & ISceneConfig>;
getLayerConfig<T>(): Partial<ILayerConfig & ISceneConfig & T>;
getLayerAttributeConfig():Partial<ILayerAttributesOption>
setBottomColor(color: string): void;
getBottomColor(): string;
getContainer(): Container;
@ -427,6 +453,7 @@ export interface ILayer {
addPlugin(plugin: ILayerPlugin): ILayer;
getSource(): ISource;
setSource(source: ISource): void;
initSource(source: ISource): void;
setEncodedData(encodedData: IEncodeFeature[]): void;
getEncodedData(): IEncodeFeature[];
getScaleOptions(): IScaleOptions;
@ -521,6 +548,7 @@ export interface ILayerConfig {
maskfence: any;
maskColor: string;
maskOpacity: number;
sourceLayer:string;
colors: string[];
size: number;
@ -638,6 +666,7 @@ export interface ILayerService {
renderLayers(): void;
setEnableRender(flag: boolean): void;
getOESTextureFloat(): boolean;
pickRender(layer: ILayer,target?: IInteractionTarget):void
destroy(): void;
}

57
packages/core/src/services/layer/LayerService.ts
View File

@ -6,6 +6,9 @@ import { TYPES } from '../../types';
import Clock from '../../utils/clock';
import { IMapService } from '../map/IMapService';
import { IRendererService } from '../renderer/IRendererService';
import {
IInteractionTarget,
} from '../interaction/IInteractionService';
import { ILayerService } from './ILayerService';
import { throttle } from 'lodash';
@ -41,26 +44,22 @@ export default class LayerService implements ILayerService {
public reRender = throttle(() => {
this.updateLayerRenderList();
this.renderLayers();
}, 32)
}, 32);
public throttleRenderLayers = throttle(() => {
this.renderLayers();
}, 16)
}, 16);
public add(layer: ILayer) {
this.layers.push(layer);
if (this.sceneInited) {
layer.on('inited',()=>{
layer.init().then(() => {
this.updateLayerRenderList();
this.renderLayers();
})
layer.init();
}
this.layers.push(layer);
});
}
}
public addMask(mask: ILayer) {
@ -71,13 +70,13 @@ export default class LayerService implements ILayerService {
public async initLayers() {
this.sceneInited = true;
this.layers.forEach(async (layer) => {
if (!layer.inited) {
if (!layer.startInit) {
await layer.init();
this.updateLayerRenderList();
}
});
}
public getSceneInited() {
@ -142,7 +141,7 @@ export default class LayerService implements ILayerService {
this.alreadyInRendering = true;
this.clear();
for (const layer of this.layerList) {
layer.hooks.beforeRenderData.call();
layer.hooks.beforeRenderData.promise();
layer.hooks.beforeRender.call();
if (layer.masks.length > 0) {
@ -152,8 +151,8 @@ export default class LayerService implements ILayerService {
depth: 1,
framebuffer: null,
});
layer.masks.map((m: ILayer) => {
m.hooks.beforeRenderData.call();
layer.masks.map(async (m: ILayer) => {
await m.hooks.beforeRenderData.promise();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
@ -174,7 +173,8 @@ export default class LayerService implements ILayerService {
public updateLayerRenderList() {
// Tip: 每次更新都是从 layers 重新构建
this.layerList = [];
this.layers.filter((layer) => layer.inited)
this.layers
.filter((layer) => layer.inited)
.filter((layer) => layer.isVisible())
.sort((pre: ILayer, next: ILayer) => {
// 根据 zIndex 对渲染顺序进行排序
@ -224,6 +224,27 @@ export default class LayerService implements ILayerService {
public getShaderPickStat() {
return this.shaderPicking;
}
// 拾取绘制
public pickRender(layer: ILayer,target: IInteractionTarget) {
if(layer.tileLayer) {
return layer.tileLayer.pickRender(target)
}
layer.hooks.beforePickingEncode.call();
if (layer.masks.length > 0) {
// 若存在 mask，则在 pick 阶段的绘制也启用
layer.masks.map(async (m: ILayer) => {
m.hooks.beforeRenderData.promise();
m.hooks.beforeRender.call();
m.render();
m.hooks.afterRender.call();
});
}
layer.renderModels(true);
layer.hooks.afterPickingEncode.call();
}
public clear() {
const color = rgb2arr(this.mapService.bgColor) as [
@ -250,4 +271,6 @@ export default class LayerService implements ILayerService {
private stopRender() {
$window.cancelAnimationFrame(this.layerRenderID);
}
}

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

@ -1,5 +1,5 @@
// @ts-ignore
import { AsyncSeriesHook } from '@antv/async-hook';
import { AsyncSeriesHook } from '@antv/async-hook';
import { $window, DOM } from '@antv/l7-utils';
import elementResizeEvent, { unbind } from 'element-resize-event';
import { EventEmitter } from 'eventemitter3';
@ -36,7 +36,6 @@ export default class Scene extends EventEmitter implements ISceneService {
public loaded: boolean = false;
@inject(TYPES.SceneID)
private readonly id: string;
/**
@ -131,7 +130,6 @@ export default class Scene extends EventEmitter implements ISceneService {
this.iconService.on('imageUpdate', () => this.render());
// 字体资源
this.fontService.init();
/**
* 初始化底图
@ -142,12 +140,13 @@ export default class Scene extends EventEmitter implements ISceneService {
this.map.onCameraChanged((viewport: IViewport) => {
this.cameraService.init();
this.cameraService.update(viewport);
resolve();
});
this.map.init();
});
// 重新绑定非首次相机更新事件
this.map.onCameraChanged(this.handleMapCameraChanged);
this.map.addMarkerContainer();
@ -169,29 +168,29 @@ export default class Scene extends EventEmitter implements ISceneService {
this.hooks.init.tapPromise('initRenderer', async () => {
const renderContainer = this.map.getOverlayContainer();
if(renderContainer) {
if (renderContainer) {
this.$container = renderContainer as HTMLDivElement;
} else {
this.$container = createRendererContainer(
this.configService.getSceneConfig(this.id).id || '',
);
}
// 创建底图之上的 container
if (this.$container) {
this.canvas = DOM.create('canvas', '', this.$container) as HTMLCanvasElement;
this.canvas = DOM.create(
'canvas',
'',
this.$container,
) as HTMLCanvasElement;
this.setCanvas();
await this.rendererService.init(
// @ts-ignore
this.canvas,
this.configService.getSceneConfig(this.id) as IRenderConfig,
sceneConfig.gl
sceneConfig.gl,
);
this.initContainer()
this.initContainer();
elementResizeEvent(
this.$container as HTMLDivElement,
@ -207,11 +206,7 @@ export default class Scene extends EventEmitter implements ISceneService {
}
this.pickingService.init(this.id);
});
// TODO：init worker, fontAtlas...
// 执行异步并行初始化任务
// @ts-ignore
this.initPromise = this.hooks.init.promise();
this.render();
}
@ -310,23 +305,24 @@ export default class Scene extends EventEmitter implements ISceneService {
if (!this.inited) {
// 还未初始化完成需要等待
await this.initPromise; // 初始化地图和渲染
await this.hooks.init.promise(); // 初始化地图和渲染
if (this.destroyed) {
this.destroy();
}
// FIXME: 初始化 marker 容器，可以放到 map 初始化方法中？
await this.layerService.initLayers();
this.layerService.renderLayers();
this.controlService.addControls();
this.loaded = true;
this.emit('loaded');
this.inited = true;
} else {
// 尝试初始化未初始化的图层
this.layerService.initLayers();
this.layerService.renderLayers();
}
// 尝试初始化未初始化的图层
this.layerService.initLayers();
this.layerService.updateLayerRenderList();
this.layerService.renderLayers();
// 组件需要等待layer 初始化完成之后添加
this.rendering = false;
}
@ -337,7 +333,7 @@ export default class Scene extends EventEmitter implements ISceneService {
* @param fontPath
*/
public addFontFace(fontFamily: string, fontPath: string): void {
this.fontService.addFontFace(fontFamily,fontPath)
this.fontService.addFontFace(fontFamily, fontPath);
}
public getSceneContainer(): HTMLDivElement {

2
packages/core/src/services/source/ISourceService.ts
View File

@ -22,6 +22,7 @@ export interface ITransform {
export interface ISourceCFG {
cluster?: boolean;
clusterOptions?: Partial<IClusterOptions>;
autoRender?:boolean,
parser?: IParserCfg;
transforms?: ITransform[];
}
@ -71,6 +72,7 @@ export interface ISource {
clusterOptions: Partial<IClusterOptions>;
extent: BBox;
tileset: TilesetManager | undefined;
getSourceCfg(): any;
setData(data: any, options?: ISourceCFG): void;
updateClusterData(zoom: number): void;
getFeatureById(id: number): unknown;

2
packages/layers/package.json
View File

@ -26,7 +26,7 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.2.2",
"@antv/async-hook": "^2.2.4",
"@antv/l7-core": "2.9.36",
"@antv/l7-maps": "2.9.36",
"@antv/l7-source": "2.9.36",

11
packages/layers/src/Geometry/index.ts
View File

@ -16,17 +16,10 @@ export default class GeometryLayer extends BaseLayer<
},
},
};
public buildModels() {
public async buildModels() {
const modelType = this.getModelType();
this.layerModel = new GeometryModels[modelType](this);
this.layerModel.initModels((models) => {
this.dispatchModelLoad(models);
});
}
public rebuildModels() {
this.layerModel.buildModels((models) => {
this.dispatchModelLoad(models);
});
await this.initLayerModels();
}
protected getDefaultConfig() {

16
packages/layers/src/Geometry/models/billboard.ts
View File

@ -81,7 +81,7 @@ export default class BillBoardModel extends BaseModel {
this.texture?.destroy();
}
public initModels(callbackModel: (models: IModel[]) => void) {
public async initModels(): Promise<IModel[]> {
const {
mask = false,
maskInside = true,
@ -98,7 +98,7 @@ export default class BillBoardModel extends BaseModel {
this.updateTexture(drawCanvas);
}
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'geometryBillboard',
vertexShader: planeVert,
@ -109,17 +109,11 @@ export default class BillBoardModel extends BaseModel {
blend: this.getBlend(),
stencil: getMask(mask, maskInside),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
public buildModels(callbackModel: (models: IModel[]) => void) {
this.initModels(callbackModel);
public async buildModels():Promise<IModel[]> {
return await this.initModels();
}
public updateTexture(drawCanvas: (canvas: HTMLCanvasElement) => void): void {

16
packages/layers/src/Geometry/models/plane.ts
View File

@ -135,7 +135,7 @@ export default class PlaneModel extends BaseModel {
this.texture?.destroy();
}
public initModels(callbackModel: (models: IModel[]) => void) {
public async initModels(): Promise<IModel[]> {
const {
mask = false,
maskInside = true,
@ -151,7 +151,7 @@ export default class PlaneModel extends BaseModel {
this.updateTexture(mapTexture);
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'geometryPlane',
vertexShader: planeVert,
@ -166,17 +166,11 @@ export default class PlaneModel extends BaseModel {
face: gl.BACK, // gl.FRONT | gl.BACK;
},
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
public buildModels(callbackModel: (models: IModel[]) => void) {
this.initModels(callbackModel);
public async buildModels():Promise<IModel[]> {
return await this.initModels();
}
public createModelData(options?: any) {

16
packages/layers/src/Geometry/models/sprite.ts
View File

@ -149,7 +149,7 @@ export default class SpriteModel extends BaseModel {
this.texture?.destroy();
}
public initModels(callbackModel: (models: IModel[]) => void) {
public async initModels(): Promise<IModel[]> {
const {
mapTexture,
spriteTop = 5000000,
@ -175,7 +175,7 @@ export default class SpriteModel extends BaseModel {
this.updateModel();
}, 100);
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'geometrySprite',
vertexShader: spriteVert,
@ -185,17 +185,11 @@ export default class SpriteModel extends BaseModel {
depth: { enable: false },
blend: this.getBlend(),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
public buildModels(callbackModel: (models: IModel[]) => void) {
this.initModels(callbackModel);
public async buildModels():Promise<IModel[]> {
return await this.initModels();
}
public updateTexture(mapTexture: string | undefined): void {

11
packages/layers/src/canvas/index.ts
View File

@ -5,17 +5,10 @@ import CanvasModels, { CanvasModelType } from './models/index';
export default class CanvasLayer extends BaseLayer<ICanvasLayerStyleOptions> {
public type: string = 'CanvasLayer';
public forceRender: boolean = true;
public buildModels() {
public async buildModels() {
const modelType = this.getModelType();
this.layerModel = new CanvasModels[modelType](this);
this.layerModel.initModels((models) => {
this.dispatchModelLoad(models);
});
}
public rebuildModels() {
this.layerModel.buildModels((models) => {
this.dispatchModelLoad(models);
});
await this.initLayerModels();
}
public hide(): ILayer {

4
packages/layers/src/canvas/models/canvas.ts
View File

@ -60,7 +60,7 @@ export default class CanvaModel extends BaseModel {
this.unBindListener();
}
public initModels() {
public async initModels() {
const {
update = CanvasUpdateType.ALWAYS,
} = this.layer.getLayerConfig() as ICanvasLayerStyleOptions;
@ -138,7 +138,7 @@ export default class CanvaModel extends BaseModel {
}
};
public buildModels() {
public async buildModels() {
return this.initModels();
}

12
packages/layers/src/citybuliding/building.ts
View File

@ -3,17 +3,11 @@ import CityBuildModel from './models/build';
export default class CityBuildingLayer extends BaseLayer {
public type: string = 'CityBuildingLayer';
public buildModels() {
public async buildModels() {
this.layerModel = new CityBuildModel(this);
this.layerModel.initModels((models) => {
this.dispatchModelLoad(models);
});
}
public rebuildModels() {
this.layerModel.buildModels((models) => {
this.dispatchModelLoad(models);
});
await this.initLayerModels();
}
public setLight(t: number) {
this.updateLayerConfig({
time: t,

16
packages/layers/src/citybuliding/models/build.ts
View File

@ -62,16 +62,16 @@ export default class CityBuildModel extends BaseModel {
}
}
public initModels(callbackModel: (models: IModel[]) => void) {
public async initModels(): Promise<IModel[]> {
this.calCityGeo();
this.startModelAnimate();
this.buildModels(callbackModel);
return await this.buildModels();
}
public buildModels(callbackModel: (models: IModel[]) => void) {
this.layer
public async buildModels():Promise<IModel[]> {
const model = await this.layer
.buildLayerModel({
moduleName: 'cityBuilding',
vertexShader: buildVert,
@ -83,13 +83,7 @@ export default class CityBuildModel extends BaseModel {
face: gl.BACK,
},
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
protected registerBuiltinAttributes() {

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

@ -2,7 +2,7 @@
import {
SyncBailHook,
SyncHook,
SyncWaterfallHook,
AsyncWaterfallHook,
AsyncSeriesBailHook,
} from '@antv/async-hook';
import {
@ -13,6 +13,7 @@ import {
ICameraService,
ICoordinateSystemService,
IDataState,
ILayerAttributesOption,
IEncodeFeature,
IFontService,
IGlobalConfigService,
@ -72,6 +73,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
implements ILayer {
public id: string = `${layerIdCounter++}`;
public name: string = `${layerIdCounter}`;
public parent: ILayer;
public coordCenter: number[];
public type: string;
public visible: boolean = true;
@ -113,7 +115,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
init: new AsyncSeriesBailHook(),
afterInit: new SyncBailHook(),
beforeRender: new SyncBailHook(),
beforeRenderData: new SyncWaterfallHook(),
beforeRenderData: new AsyncWaterfallHook(),
afterRender: new SyncHook(),
beforePickingEncode: new SyncHook(),
afterPickingEncode: new SyncHook(),
@ -127,7 +129,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// 待渲染 model 列表
public models: IModel[] = [];
public modelLoaded: boolean = false;
// 每个 Layer 都有一个
public multiPassRenderer: IMultiPassRenderer;
@ -135,6 +136,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// 注入插件集
public plugins: ILayerPlugin[];
public startInit: boolean = false;
public sourceOption: {
data: any;
options?: ISourceCFG;
@ -178,14 +181,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
protected mapService: IMapService;
protected styleAttributeService: IStyleAttributeService;
public styleAttributeService: IStyleAttributeService;
protected layerSource: Source;
protected postProcessingPassFactory: (
public postProcessingPassFactory: (
name: string,
) => IPostProcessingPass<unknown>;
protected normalPassFactory: (name: string) => IPass<unknown>;
public normalPassFactory: (name: string) => IPass<unknown>;
protected animateOptions: IAnimateOption = { enable: false };
@ -231,6 +234,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.name = config.name || this.id;
this.zIndex = config.zIndex || 0;
this.rawConfig = config;
this.parent = this;
}
public addMaskLayer(maskLayer: ILayer) {
@ -249,8 +253,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
return this.styleAttributeService.getLayerStyleAttribute(name);
}
public getLayerConfig() {
return this.configService.getLayerConfig<ChildLayerStyleOptions>(this.id);
public getLayerConfig<T = any>() {
return this.configService.getLayerConfig<ChildLayerStyleOptions & T>(
this.id,
);
}
public updateLayerConfig(
@ -263,7 +269,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.rawConfig[key] = configToUpdate[key];
}
});
if (!this.inited) {
if (!this.startInit) {
this.needUpdateConfig = {
...this.needUpdateConfig,
...configToUpdate,
@ -273,7 +279,6 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// @ts-ignore
handleStyleDataMapping(configToUpdate, this); // 处理 style 中进行数据映射的属性字段
this.configService.setLayerConfig(sceneId, this.id, {
...this.configService.getLayerConfig(this.id),
...this.needUpdateConfig,
@ -314,6 +319,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
public async init(): Promise<void> {
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
this.startInit = true;
// 初始化图层配置项
// const { enableMultiPassRenderer = false } = this.rawConfig;
// this.configService.setLayerConfig(sceneId, this.id, {
@ -410,11 +416,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// 触发 init 生命周期插件
await this.hooks.init.promise();
// this.pickingPassRender = this.normalPassFactory('pixelPicking');
// this.pickingPassRender.init(this);
this.hooks.afterInit.call();
this.inited = true;
// 触发初始化完成事件;
this.emit('inited', {
target: this,
@ -424,6 +427,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
target: this,
type: 'add',
});
this.hooks.afterInit.call();
}
public updateModelData(data: IAttributeAndElements) {
@ -476,10 +480,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
* Model初始化前需要更新Model样式
*/
public prepareBuildModel() {
this.inited = true;
this.updateLayerConfig({
...(this.getDefaultConfig() as object),
...this.rawConfig,
...this.needUpdateConfig,
});
// 启动动画
@ -614,13 +618,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
// this.layerSource.setData(data, options);
});
}
return this;
}
public style(
options: Partial<ChildLayerStyleOptions> & Partial<ILayerConfig>,
): ILayer {
const lastConfig = this.getLayerConfig();
const { passes, ...rest } = options;
// passes 特殊处理
@ -645,14 +647,14 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.updateLayerConfig(this.rawConfig);
this.styleNeedUpdate = true;
}
// TODO style model 更新
// @ts-ignore
if (lastConfig && lastConfig.mask === true && options.mask === false) {
this.clearModels();
this.layerModel.buildModels((models) => {
this.models = models;
});
}
// if (lastConfig && lastConfig.mask === true && options.mask === false) {
// this.clearModels();
// this.layerModel.buildModels((models) => {
// this.models = models;
// });
// }
return this;
}
public scale(field: string | number | IScaleOptions, cfg?: IScale) {
@ -1030,7 +1032,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
attribute.needRegenerateVertices,
).length;
}
// 外部初始化Source
public setSource(source: Source) {
// 解除原 sources 事件
if (this.layerSource) {
@ -1045,13 +1047,8 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
const zoom = this.mapService.getZoom();
this.layerSource.updateClusterData(zoom);
}
// source 可能会复用，会在其它layer被修改
if (this.layerSource.inited) {
this.sourceEvent();
} else {
source.on('inited', () => {
this.sourceEvent();
});
}
// this.layerSource.inited 为 true update 事件不会再触发
this.layerSource.on('update', () => {
@ -1064,9 +1061,27 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.sourceEvent();
});
}
// layer 初始化source
public initSource(source: Source) {
this.layerSource = source;
this.clusterZoom = 0;
this.addSourceEvent();
}
public getSource() {
return this.layerSource;
}
// 注册source 更新事件
private addSourceEvent() {
this.layerSource.on('update', () => {
if (this.coordCenter === undefined) {
const layerCenter = this.layerSource.center;
this.coordCenter = layerCenter;
this.mapService?.setCoordCenter &&
this.mapService.setCoordCenter(layerCenter);
}
this.sourceEvent();
});
}
public getScaleOptions() {
return this.scaleOptions;
@ -1154,7 +1169,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
this.pickingService.boxPickLayer(this, box, cb);
}
public buildLayerModel(
public async buildLayerModel(
options: ILayerModelInitializationOptions &
Partial<IModelInitializationOptions>,
): Promise<IModel> {
@ -1175,61 +1190,57 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
});
const { vs, fs, uniforms } = this.shaderModuleService.getModule(moduleName);
const { createModel } = this.rendererService;
return new Promise((resolve, reject) => {
setTimeout(() => {
// filter supported worker & worker enabled layer
if (
workerOptions &&
workerOptions.modelType in WorkerSourceMap &&
workerEnabled
) {
this.styleAttributeService
.createAttributesAndIndicesAscy(
this.encodedData,
segmentNumber,
workerOptions,
)
.then(({ attributes, elements }) => {
const m = createModel({
attributes,
uniforms,
fs,
vs,
elements,
blend: BlendTypes[BlendType.normal],
...rest,
});
resolve(m);
})
.catch((err) => reject(err));
} else {
// console.log(this.encodedData[1].originCoordinates[0])
// console.log(this.encodedData[1].coordinates[0])
const {
attributes,
elements,
count,
} = this.styleAttributeService.createAttributesAndIndices(
return await new Promise((resolve, reject) => {
// filter supported worker & worker enabled layer
if (
workerOptions &&
workerOptions.modelType in WorkerSourceMap &&
workerEnabled
) {
this.styleAttributeService
.createAttributesAndIndicesAscy(
this.encodedData,
triangulation,
segmentNumber,
);
const modelOptions = {
attributes,
uniforms,
fs,
vs,
elements,
blend: BlendTypes[BlendType.normal],
...rest,
};
if (count) {
modelOptions.count = count;
}
const m = createModel(modelOptions);
resolve(m);
workerOptions,
)
.then(({ attributes, elements }) => {
const m = createModel({
attributes,
uniforms,
fs,
vs,
elements,
blend: BlendTypes[BlendType.normal],
...rest,
});
resolve(m as IModel);
})
.catch((err) => reject(err));
} else {
const {
attributes,
elements,
count,
} = this.styleAttributeService.createAttributesAndIndices(
this.encodedData,
triangulation,
segmentNumber,
);
const modelOptions = {
attributes,
uniforms,
fs,
vs,
elements,
blend: BlendTypes[BlendType.normal],
...rest,
};
if (count) {
modelOptions.count = count;
}
});
const m = createModel(modelOptions);
resolve(m);
}
});
}
@ -1291,14 +1302,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
) {
isPick = true;
}
if (type === 'click')
console.log('enableSelect', type, this.isVisible(), enableSelect, isPick);
return this.isVisible() && isPick;
}
public buildModels() {
public async buildModels() {
throw new Error('Method not implemented.');
}
public rebuildModels() {
throw new Error('Method not implemented.');
public async rebuildModels() {
await this.buildModels();
}
public async renderMulPass(multiPassRenderer: IMultiPassRenderer) {
@ -1308,13 +1321,15 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
public renderModels(isPicking?: boolean) {
// TODO: this.getEncodedData().length > 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
if (this.encodeDataLength <= 0 && !this.forceRender) return this;
if (this.layerModelNeedUpdate && this.layerModel) {
this.layerModel.buildModels((models: IModel[]) => {
this.models = models;
this.hooks.beforeRender.call();
this.layerModelNeedUpdate = false;
});
}
// TODO 待评估
// if (this.layerModelNeedUpdate && this.layerModel) {
// this.layerModel.buildModels((models: IModel[]) => {
// this.models = models;
// this.hooks.beforeRender.call();
// this.layerModelNeedUpdate = false;
// });
// }
this.models.forEach((model) => {
model.draw(
@ -1333,6 +1348,13 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
values?: StyleAttributeOption,
updateOptions?: Partial<IStyleAttributeUpdateOptions>,
) {
// 存储 Attribute
this.configService.setAttributeConfig(this.id, {
[type]: {
field,
values,
},
});
if (!this.inited) {
this.pendingStyleAttributes.push({
attributeName: type,
@ -1361,6 +1383,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
}
}
public getLayerAttributeConfig(): Partial<ILayerAttributesOption> {
return this.configService.getAttributeConfig(this.id);
}
public getShaderPickStat() {
return this.layerService.getShaderPickStat();
}
@ -1387,22 +1413,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
if (layerConfig && layerConfig.autoFit) {
this.fitBounds(layerConfig.fitBoundsOptions);
}
this.reRender();
const autoRender = this.layerSource.getSourceCfg().autoRender;
if (autoRender) {
this.reRender();
}
};
protected dispatchModelLoad(models: IModel[]) {
protected async initLayerModels() {
this.models.forEach((model) => model.destroy());
this.models = [];
this.models = models;
this.emit('modelLoaded', null);
this.modelLoaded = true;
// Tip: setTimeout 用于延迟绘制，可以让拖动图层时连续的 setData 更加平滑 - L7Draw
setTimeout(() => {
// Tip: 使用 renderLayers 而不是 throttleRenderLayers，让图层之间的 setData 更新绘制不存在延迟
this.layerService.renderLayers();
}, 32);
this.models = await this.layerModel.initModels();
}
protected reRender() {

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

@ -515,11 +515,11 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
return false;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
public buildModels(callbackModel: (models: IModel[]) => void): void {
public async buildModels(): Promise<IModel[]> {
throw new Error('Method not implemented.');
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
public initModels(callbackModel: (models: IModel[]) => void): void {
public async initModels(): Promise<IModel[]> {
throw new Error('Method not implemented.');
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars

6
packages/layers/src/earth/index.ts
View File

@ -33,12 +33,10 @@ export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
},
};
public buildModels() {
public async buildModels() {
const shape = this.getModelType();
this.layerModel = new EarthModels[shape](this);
this.layerModel.initModels((models) => {
this.dispatchModelLoad(models);
});
await this.initLayerModels();
}
/**

16
packages/layers/src/earth/models/atmosphere.ts
View File

@ -25,18 +25,18 @@ export default class EarthAtomSphereModel extends BaseModel {
};
}
public initModels(callbackModel: (models: IModel[]) => void) {
this.buildModels(callbackModel);
public async initModels(): Promise<IModel[]> {
return await this.buildModels();
}
public clearModels() {
return '';
}
public buildModels(callbackModel: (models: IModel[]) => void) {
public async buildModels():Promise<IModel[]> {
// TODO: 调整图层的绘制顺序 地球大气层
this.layer.zIndex = -997;
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'earthAtmoSphere',
vertexShader: atmoSphereVert,
@ -45,13 +45,7 @@ export default class EarthAtomSphereModel extends BaseModel {
depth: { enable: false },
blend: this.getBlend(),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
protected registerBuiltinAttributes() {

16
packages/layers/src/earth/models/base.ts
View File

@ -59,7 +59,7 @@ export default class BaseEarthModel extends BaseModel {
this.layerService.throttleRenderLayers();
}
public initModels(callbackModel: (models: IModel[]) => void) {
public async initModels(): Promise<IModel[]> {
const { globalOptions } = this.layer.getLayerConfig();
if (globalOptions?.earthTime !== undefined) {
this.setEarthTime(globalOptions.earthTime);
@ -80,18 +80,18 @@ export default class BaseEarthModel extends BaseModel {
this.layerService.reRender();
});
this.buildModels(callbackModel);
return await this.buildModels();
}
public clearModels() {
return '';
}
public buildModels(callbackModel: (models: IModel[]) => void) {
public async buildModels():Promise<IModel[]> {
// Tip: 调整图层的绘制顺序 地球大气层
this.layer.zIndex = -998;
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'earthBase',
vertexShader: baseVert,
@ -100,13 +100,7 @@ export default class BaseEarthModel extends BaseModel {
depth: { enable: true },
blend: this.getBlend(),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
protected registerBuiltinAttributes() {

16
packages/layers/src/earth/models/bloomsphere.ts
View File

@ -25,18 +25,18 @@ export default class EarthBloomSphereModel extends BaseModel {
};
}
public initModels(callbackModel: (models: IModel[]) => void) {
this.buildModels(callbackModel);
public async initModels(): Promise<IModel[]> {
return await this.buildModels();
}
public clearModels() {
return '';
}
public buildModels(callbackModel: (models: IModel[]) => void) {
public async buildModels():Promise<IModel[]> {
// Tip: 调整图层的绘制顺序，让它保持在地球后面（减少锯齿现象）
this.layer.zIndex = -999;
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'earthBloom',
vertexShader: bloomSphereVert,
@ -45,13 +45,7 @@ export default class EarthBloomSphereModel extends BaseModel {
depth: { enable: false },
blend: this.getBlend(),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
protected registerBuiltinAttributes() {

19
packages/layers/src/heatmap/index.ts
View File

@ -5,18 +5,12 @@ import HeatMapModels, { HeatMapModelType } from './models';
export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
public type: string = 'HeatMapLayer';
public buildModels() {
public async buildModels() {
const shape = this.getModelType();
this.layerModel = new HeatMapModels[shape](this);
this.layerModel.initModels((models) => {
this.dispatchModelLoad(models);
});
}
public rebuildModels() {
this.layerModel.buildModels((models) => {
this.dispatchModelLoad(models);
});
await this.initLayerModels();
}
public renderModels() {
const shape = this.getModelType();
if (shape === 'heatmap') {
@ -27,8 +21,11 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
return this;
}
if (this.layerModelNeedUpdate) {
this.layerModel.buildModels((models) => (this.models = models));
this.layerModelNeedUpdate = false;
// TODO 渲染流程修改
this.layerModel.buildModels().then((models) => {
this.models = models;
this.layerModelNeedUpdate = false;
});
}
this.models.forEach((model) =>
model.draw({

16
packages/layers/src/heatmap/models/grid.ts
View File

@ -29,16 +29,16 @@ export default class GridModel extends BaseModel {
};
}
public initModels(callbackModel: (models: IModel[]) => void) {
this.buildModels(callbackModel);
public async initModels(): Promise<IModel[]> {
return await this.buildModels();
}
public buildModels(callbackModel: (models: IModel[]) => void) {
public async buildModels():Promise<IModel[]> {
const {
mask = false,
maskInside = true,
} = this.layer.getLayerConfig() as IHeatMapLayerStyleOptions;
this.layer
const model = await this.layer
.buildLayerModel({
moduleName: 'heatmapGrid',
vertexShader: heatmapGridVert,
@ -48,13 +48,7 @@ export default class GridModel extends BaseModel {
depth: { enable: false },
stencil: getMask(mask, maskInside),
})
.then((model) => {
callbackModel([model]);
})
.catch((err) => {
console.warn(err);
callbackModel([]);
});
return [model]
}
protected registerBuiltinAttributes() {
this.styleAttributeService.registerStyleAttribute({

Some files were not shown because too many files have changed in this diff Show More