vue3+ts+AntV/L7加载钻取地图
vue3在渲染地图时,调用方法应放在onUpdated里面,放在onMounted里,会报错:id容器未找到。这是vue3生命周期的原因,不赘述
<div style="justify-content: center; position: relative;width:100%;height:90%;" id="map"></div>
import { Scene } from '@antv/l7';
import { DrillDownLayer } from '@antv/l7-district';
import { Mapbox } from '@antv/l7-maps';
function drawMap() {
const colors = [ '#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70' ];
const scene = new Scene({
id: 'map',
map: new Mapbox({
center: [ 116.2825, 39.9 ],
pitch: 0,
style: 'blank',
zoom: 3,
minZoom: 3,
maxZoom: 10
})
});
scene.on('loaded', () => {
new DrillDownLayer(scene, {
data: [],
viewStart: 'Country',
viewEnd: 'County',
fill: {
color: {
field: 'NAME_CHN',
values: colors
}
},
popup: {
enable: true,
Html: props => {
return `<span>${props.NAME_CHN}</span>`;
}
}
});
});
scene.on('click', (e) => {
console.log(e);
console.log(this);
});
}
onUpdated(() => {
drawMap()
})