mirror of https://gitee.com/antv-l7/antv-l7
107 lines
2.9 KiB
JavaScript
107 lines
2.9 KiB
JavaScript
import { Scene, LineLayer, PointLayer } from '@antv/l7';
|
|
import { GaodeMap } from '@antv/l7-maps';
|
|
|
|
const scene = new Scene({
|
|
id: 'map',
|
|
map: new GaodeMap({
|
|
center: [ 120.115, 30.221 ],
|
|
pitch: 40,
|
|
zoom: 16,
|
|
viewMode: '3D'
|
|
})
|
|
});
|
|
scene.on('loaded', () => {
|
|
fetch(
|
|
'https://gw.alipayobjects.com/os/bmw-prod/91d27a97-869a-459b-a617-498dcc9c3e7f.json'
|
|
)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
scene.addImage(
|
|
'road',
|
|
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*haGlTpW2BQgAAAAAAAAAAAAAARQnAQ'
|
|
);
|
|
|
|
const layer = new LineLayer()
|
|
.source(data)
|
|
.size(8)
|
|
.shape('line')
|
|
.texture('road')
|
|
.color('rgb(20, 180, 90)')
|
|
.animate({
|
|
interval: 1, // 间隔
|
|
duration: 1, // 持续时间，延时
|
|
trailLength: 2 // 流线长度
|
|
})
|
|
.style({
|
|
lineTexture: true, // 开启线的贴图功能
|
|
iconStep: 50 // 设置贴图纹理的间距
|
|
});
|
|
scene.addLayer(layer);
|
|
|
|
scene.addImage(
|
|
'start',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/ebb0af57-4a8a-46e0-a296-2d51f9fa8007.svg'
|
|
);
|
|
scene.addImage(
|
|
'visitor',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/64db255d-b636-4929-b072-068e75178b23.svg'
|
|
);
|
|
scene.addImage(
|
|
'museum',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/0630591d-64db-4057-a04d-d65f43aebf0f.svg'
|
|
);
|
|
scene.addImage(
|
|
'supermarket',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/ab42799d-dea6-4d37-bd62-3ee3e06bf6c0.svg'
|
|
);
|
|
scene.addImage(
|
|
'tower',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/6d27cf89-638c-432b-a8c4-cac289ee98a8.svg'
|
|
);
|
|
scene.addImage(
|
|
'end',
|
|
'https://gw.alipayobjects.com/zos/bmw-prod/59717737-5652-479f-9e6b-e7d2c5441446.svg'
|
|
);
|
|
const imageLayer = new PointLayer()
|
|
.source([{
|
|
lng: 120.11025885601617,
|
|
lat: 30.22006389085372,
|
|
icon: 'start'
|
|
}, {
|
|
lng: 120.11123578376913,
|
|
lat: 30.220443561196277,
|
|
icon: 'visitor'
|
|
}, {
|
|
lng: 120.11408457779198,
|
|
lat: 30.22019805564678,
|
|
icon: 'museum'
|
|
}, {
|
|
lng: 120.11683172384723,
|
|
lat: 30.21875509667716,
|
|
icon: 'supermarket'
|
|
}, {
|
|
lng: 120.11945546294194,
|
|
lat: 30.218724022876376,
|
|
icon: 'tower'
|
|
}, {
|
|
lng: 120.1184189041221,
|
|
lat: 30.21783201718256,
|
|
icon: 'end'
|
|
}
|
|
], {
|
|
parser: {
|
|
type: 'json',
|
|
x: 'lng',
|
|
y: 'lat'
|
|
}
|
|
})
|
|
.shape('icon', [ 'start', 'visitor', 'museum', 'supermarket', 'tower', 'end' ])
|
|
.size(35)
|
|
.style({
|
|
offsets: [ 0, 20 ]
|
|
});
|
|
scene.addLayer(imageLayer);
|
|
});
|
|
});
|