mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善季风demo
This commit is contained in:
parent
636c6dc1c4
commit
5a482f6e71
|
@ -28,6 +28,11 @@
|
|||
"filename": "road.js",
|
||||
"title": "路线图",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*N-9MRZLlPXgAAAAAAAAAAAAAARQnAQ"
|
||||
},
|
||||
{
|
||||
"filename": "monsoon.js",
|
||||
"title": "季风分布",
|
||||
"screenshot": "https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*Zq5ZTKNeU6sAAAAAAAAAAAAAARQnAQ"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -0,0 +1,82 @@
|
|||
import { Scene, PointLayer, LineLayer } from '@antv/l7';
|
||||
import { GaodeMap } from '@antv/l7-maps';
|
||||
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
pitch: 0,
|
||||
style: 'dark',
|
||||
center: [ 105, 35 ],
|
||||
zoom: 2.5
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
scene.addImage(
|
||||
'arrRed',
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*KWGqT6Oz50EAAAAAAAAAAAAAARQnAQ'
|
||||
);
|
||||
scene.addImage(
|
||||
'arrBlue',
|
||||
'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ZKhURq53OgIAAAAAAAAAAAAAARQnAQ'
|
||||
);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
|
||||
fetch('https://gw.alipayobjects.com/os/bmw-prod/4c02515b-cb7a-47be-93cf-5596731ef982.json')
|
||||
.then(res => res.json())
|
||||
.then(monsoon => {
|
||||
const { data, borderData } = monsoon
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('wind', wind => {
|
||||
if (wind === 'up') {
|
||||
return 'arrBlue';
|
||||
}
|
||||
return 'arrRed';
|
||||
|
||||
})
|
||||
.rotate('r', r => Math.PI * r)
|
||||
.size(15)
|
||||
.style({
|
||||
rotation: 0,
|
||||
layerType: 'fillImage'
|
||||
});
|
||||
scene.addLayer(imageLayer);
|
||||
|
||||
|
||||
const border = new LineLayer()
|
||||
.source(borderData)
|
||||
.size(1.5)
|
||||
.color('#575757')
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
dashArray: [ 5, 5 ]
|
||||
});
|
||||
scene.addLayer(border);
|
||||
|
||||
const text = new PointLayer({ zIndex: 2 })
|
||||
.source([
|
||||
{ lng: 90, lat: 35, n: '非季风区' },
|
||||
{ lng: 125, lat: 30, n: '季风区' }
|
||||
], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'lng',
|
||||
y: 'lat'
|
||||
}
|
||||
})
|
||||
.shape('n', 'text')
|
||||
.size(25)
|
||||
.color('#575757')
|
||||
.style({
|
||||
spacing: 20
|
||||
});
|
||||
|
||||
scene.addLayer(text);
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
Loading…
Reference in New Issue