diff --git a/docs/api/geometry_layer/sprite.en.md b/docs/api/geometry_layer/sprite.en.md new file mode 100644 index 0000000000..089263b33b --- /dev/null +++ b/docs/api/geometry_layer/sprite.en.md @@ -0,0 +1,6 @@ +--- +title: SpriteGeometry +order: 1 +--- + +`markdown:docs/api/geometry_layer/sprite.zh.md` diff --git a/docs/api/geometry_layer/sprite.zh.md b/docs/api/geometry_layer/sprite.zh.md new file mode 100644 index 0000000000..6c826a14b5 --- /dev/null +++ b/docs/api/geometry_layer/sprite.zh.md @@ -0,0 +1,81 @@ +--- +title: SpriteGeometry +order: 1 +--- + +`markdown:docs/common/style.md` + +## 简介 + +SpriteGeometry 是 L7 提供的通用的粒子图层,可以用来绘制各种粒子效果。 + +### 基本用法 + +设置普通的粒子图层。 + +```javascript +import { Scene, GeometryLayer } from '@antv/l7'; + +let layer = new GeometryLayer() + .shape('sprite') + .size(10) + .style({ + opacity: 0.3, + center: [120, 30], + spriteCount: 120, + spriteRadius: 10, + spriteTop: 2500000, + spriteUpdate: 20000, + spriteScale: 0.6, + }) +``` + +案例 + +[在线案例](/zh/examples/geometry/geometry#snow) + +### source + +🌟 SpriteGeometry 不需要设置 source,我们在 style 中通过 center 赋予其位置信息。 + +### style + +SpriteGeometry 主要通过 style 方法设置位置、大小以及其他属性。 + +#### center: [lng: number, lat: number] + +设置 SpriteGeometry 的位置,定位是 SpriteGeometry 的中心。 + +#### mapTexture: string + +设置精灵的纹理贴图。 + +#### spriteRadius: number + +粒子的作用半径,默认为 10。 +🌟 单个粒子会在图层位置半径范围内随机分布。 + +#### spriteAnimate: string + +粒子的运动、默认为 'down',表示向下运动。可选值有 'down'/'up'。 + +#### spriteCount: number + +图层生成的粒子数量,默认为 100。 + +#### spriteTop: number + +粒子运动的高度范围,默认为 5000000. +🌟 需要注意的是,在不同的地图底图下,spriteTop/spriteUpdate 的参数值需要进行调整,才能得到较好的效果。默认值是在高德1.0 的地图上调整的。 + +#### spriteUpdate: number + +粒子运动刷新的步长,表现为运动速度、默认为 10000。 +🌟 需要注意的是,在不同的地图底图下,spriteTop/spriteUpdate 的参数值需要进行调整,才能得到较好的效果。默认值是在高德1.0 的地图上调整的。 + +#### spriteScale: number + +粒子大小缩放、默认为 1。 + + +`markdown:docs/common/layer/base.md` diff --git a/examples/geometry/geometry/demo/meta.json b/examples/geometry/geometry/demo/meta.json index 703e8af433..91f7c555b4 100644 --- a/examples/geometry/geometry/demo/meta.json +++ b/examples/geometry/geometry/demo/meta.json @@ -13,6 +13,16 @@ "filename": "terrain.js", "title": "自定义 3D 地形", "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*DIb4TaijKIAAAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "snow.js", + "title": "雪花粒子", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*jJQtRqa6_f8AAAAAAAAAAAAAARQnAQ" + }, + { + "filename": "rain.js", + "title": "雨滴粒子", + "screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*rmcvQ5iwyZAAAAAAAAAAAAAAARQnAQ" } ] } diff --git a/examples/geometry/geometry/demo/rain.js b/examples/geometry/geometry/demo/rain.js new file mode 100644 index 0000000000..5c3d4d7e8c --- /dev/null +++ b/examples/geometry/geometry/demo/rain.js @@ -0,0 +1,29 @@ +import { Scene, GeometryLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 90, + style: 'dark', + center: [120, 30], + zoom: 6, + }) +}); + +scene.on('loaded', () => { + let layer = new GeometryLayer() + .shape('sprite') + .size(10) + .style({ + opacity: 0.3, + mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*w2SFSZJp4nIAAAAAAAAAAAAAARQnAQ', // rain + center: [120, 30], + spriteCount: 120, + spriteRadius: 10, + spriteTop: 2500000, + spriteUpdate: 20000, + spriteScale: 0.6, + }) + scene.addLayer(layer); +}); diff --git a/examples/geometry/geometry/demo/snow.js b/examples/geometry/geometry/demo/snow.js new file mode 100644 index 0000000000..b1cabfac7f --- /dev/null +++ b/examples/geometry/geometry/demo/snow.js @@ -0,0 +1,29 @@ +import { Scene, GeometryLayer } from '@antv/l7'; +import { GaodeMap } from '@antv/l7-maps'; + +const scene = new Scene({ + id: 'map', + map: new GaodeMap({ + pitch: 40, + style: 'dark', + center: [120, 30], + zoom: 6, + }) +}); + +scene.on('loaded', () => { + let layer = new GeometryLayer() + .shape('sprite') + .size(10) + .style({ + opacity: 0.3, + mapTexture: + 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*zLQwQKBSagYAAAAAAAAAAAAAARQnAQ', // snow + center: [120, 30], + spriteCount: 60, + spriteRadius: 10, + spriteTop: 2500000, + spriteScale: 0.6, + }) + scene.addLayer(layer); +});