【Antv/Vue3】vue项目中使用antv/L7制作地图
vue中使用antv/L7地图构建地图标点等交互需求
·
官网地址:快速上手 | L7
CDN方式引入:
<head>
<! --引入最新版的L7-->
<script src = 'https://unpkg.com/@antv/l7'></script>
<! --指定版本号引入L7-->
<script src = 'https://unpkg.com/@antv/l7@2.0.11'></script>
</head>
npm方式:
// L7 依赖
npm install --save @antv/l7
// 第三方底图依赖
npm install --save @antv/l7-maps;
<script setup>
import { onMounted } from 'vue'
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
onMounted(() => {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
pitch: 0,
type: 'amap',
style: 'dark',
center: [140.067171, 36.26186],
zoom: 5.32,
maxZoom: 10
})
});
scene.on('loaded', () => {
const plane = initPlane();
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' //支持多种地图数据GeoJson,CSV,JSon Image
)
.then(res => res.json())
.then(data => {
const pointLayer = new PointLayer({})
.source(data)
.shape('circle')
.size('mag', [1, 25])
.color('mag', mag => {
return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
})
.active(true)
.style({
opacity: 0.3,
strokeWidth: 1
});
scene.addLayer(pointLayer);
pointLayer.on('click', e => {
const { lng, lat } = e.lngLat;
scene.setCenter([lng, lat], {
padding: {
right: 120
}
});
plane.style.right = '0px';
plane.innerHTML = `
<p>click info</>
<p>featureId: ${e.featureId}</p>
<p>lng: ${lng}</p>
<p>lat: ${lat}</p>
`;
});
pointLayer.on('unclick', (e) => {
console.log(e)
const { lng, lat } = e.lngLat;
plane.style.right = '-120px';
scene.setCenter([lng, lat], {
padding: {
right: 0
}
});
});
});
});
function initPlane() {
const el = document.createElement('div');
el.style.background = '#fff';
el.style.position = 'absolute';
el.style.padding = '10px';
el.style.top = '0';
el.style.right = '-120px';
el.style.width = '100px';
el.style.height = '100%';
el.style.zIndex = '10';
el.style.transition = '0.5s';
// el.innerText = '123'
const wrap = document.getElementById('map');
wrap.appendChild(el);
return el;
}
})
</script>
<template>
<div class="map-page">
<div id="map">
</div>
</div>
</template>
<style scoped lang="less">
.map-page {
// overflow:hidden;
position: relative;//地图父级盒子不加相对定位地图将会错位
width: 100%;
height: 100%;
#map {}
}
</style>
注意:在构建地图父级盒子时需要加上position: relative,因为组件内已经把地图进行绝对定位,如果不这样做会造成地图和坐标点偏移
此篇代码是使用vue3+js写法,采用setup语法糖方式编写,个人喜欢这样编写
更多推荐
已为社区贡献1条内容
所有评论(0)