antv-l7/examples/polygon/fill/demo/fill.js

45 lines
964 B
JavaScript
Raw Normal View History

2019-11-14 11:50:12 +08:00
import { Scene } from '@l7/scene';
2019-11-15 15:43:59 +08:00
import { PolygonLayer, LineLayer } from '@l7/layers'
2019-11-14 11:50:12 +08:00
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [116.3237, 39.8829],
2019-11-16 22:22:13 +08:00
zoom: 9
2019-11-14 11:50:12 +08:00
});
2019-11-16 22:22:13 +08:00
window.mapScene = scene;
2019-11-14 11:50:12 +08:00
fetch('https://gw.alipayobjects.com/os/basement_prod/1d27c363-af3a-469e-ab5b-7a7e1ce4f311.json')
.then((res) => res.json())
.then((data) => {
const layer =
new PolygonLayer({
})
.source(data)
2019-11-16 22:22:13 +08:00
.color('unit_price', [
'#1A4397', '#2555B7',
'#3165D1', '#467BE8',
'#6296FE', '#7EA6F9',
'#98B7F7', '#BDD0F8',
'#DDE6F7', '#F2F5FC'
].reverse())
2019-11-14 11:50:12 +08:00
.shape('fill')
.style({
opacity: 1
})
2019-11-15 15:43:59 +08:00
const layer2 =
new LineLayer({
zIndex: 2
})
.source(data)
.color('#fff')
2019-11-16 22:22:13 +08:00
.size(0.3)
2019-11-15 15:43:59 +08:00
.style({
opacity: 1
})
2019-11-14 11:50:12 +08:00
scene.addLayer(layer);
2019-11-15 15:43:59 +08:00
scene.addLayer(layer2);
2019-11-14 11:50:12 +08:00
console.log(layer);
});