---
title: 填充图
order: 0
---
几何体图层在地图上最简单的表现就是填充图，即使用指定的颜色填充指定区域。
### 实现
下面我们来介绍如何绘制一个简单的填充图。
- 你可以在 `L7` 官网上找到[在线案例](/examples/polygon/fill#usa)
```javascript
import { Scene, PolygonLayer, LineLayer, Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'light',
center: [ -96, 37.8 ],
zoom: 3
})
});
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json'
)
.then(res => res.json())
.then(data => {
const color = [ 'rgb(255,255,217)', 'rgb(237,248,177)', 'rgb(199,233,180)', 'rgb(127,205,187)', 'rgb(65,182,196)', 'rgb(29,145,192)', 'rgb(34,94,168)', 'rgb(12,44,132)' ];
const layer = new PolygonLayer({})
.source(data)
.scale('density', {
type: 'quantile'
})
.color(
'density', color
)
.shape('fill')
.active(true);
const layer2 = new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
.active(true)
.size(1)
.style({
lineType: 'dash',
dashArray: [ 2, 2 ],
});
scene.addLayer(layer);
scene.addLayer(layer2);
});
});
```
### source
几何体图层推荐使用标准的 `GeoJSON` 数据。
### shape
绘制填充图，shape 为 `fill` 常量，不支持数据映射
```javascript
layer.shape('fill');
```
### size
填充图不需要设置 `size`;
### style
- `opacityLinear` 设置几何填充图的径向渐变。
```javascript
style({
opacityLinear: {
enable: true, // true - false
dir: 'in', // in - out
},
});
```
[径向渐变 in](/examples/polygon/fill#china_linear_in)
[径向渐变 out](/examples/polygon/fill#china_linear_out)
- `raisingHeight` 设置 `3D` 填充图的抬升高度。
