docs: 补充点图层 blur 的配置文档/demo

This commit is contained in:
2912401452 2022-04-18 19:08:31 +08:00
parent 9a1fc41860
commit 898f8753a5
4 changed files with 52 additions and 5 deletions

View File

@ -37,7 +37,7 @@ color 可以根据数据的差异设置成不同颜色,表示数据的不同
### size
散点图一般等大小的图形,size 一般设置成常量
散点图一般等大小的图形size 一般设置成常量。
```javascript
const scatter = new PointLayer()
@ -51,6 +51,12 @@ const scatter = new PointLayer()
});
```
[在线案例](../../../examples/point/scatter#scatter)
[在线案例](/zh/examples/point/scatter#scatter)
### blur
散点图的 style 样式支持配置 blur调整模糊。
[在线案例](/zh/examples/point/scatter#blur)
`markdown:docs/common/layer/base.md`

View File

@ -0,0 +1,36 @@
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [ 112, 30.267069 ],
pitch: 0,
style: 'dark',
zoom: 3.8
})
});
scene.on('loaded', () => {
fetch('https://gw.alipayobjects.com/os/bmw-prod/450b2d95-006c-4bad-8269-15729269e142.json')
.then(res => res.json())
.then(data => {
const layer = new PointLayer({ blend: 'additive' })
.source(data, {
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
})
.shape('circle')
.color('#f00')
.size('value', v => 15 + 15 * v)
.style({
blur: 2.5,
opacity: 'opacity'
})
.active(true);
scene.addLayer(layer);
});
});

View File

@ -19,6 +19,11 @@
"title": "样式映射散点",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*F_QoSr-W0BwAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "blur.js",
"title": "模糊点",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*v7v6SacA_5AAAAAAAAAAAAAAARQnAQ"
},
{
"filename": "animatePoint.js",
"title": "水波散点",