【Antv/Vue3】vue项目中使用antv/L7制作地图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
官网地址:快速上手 | 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语法糖方式编写,个人喜欢这样编写
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)