本代码用于在Vue3项目中集成百度地图WebGL组件,为用户提供地图展示、操作和数据分析等功能。适用于需要在地图上展示数据、进行空间分析或开发地理信息系统(GIS)应用的场景。
该组件实现了以下基本功能:
1. 加载百度地图WebGL脚本和样式
async mounted() {
await Promise.all([
this.loadScripts([
'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
// ... 其他脚本
]),
this.loadStyles([
'http://api.map.baidu.com/res/webgl/10/bmap.css',
// ... 其他样式
]),
])
}
使用loadScripts
和loadStyles
方法异步加载百度地图WebGL脚本和样式,确保在页面加载完成后再创建地图实例。
2. 创建地图实例
const BMapGL = window.BMapGL
// GL版命名空间为BMapGL
var map = new BMapGL.Map('allmap') // 创建Map实例
使用BMapGL.Map
类创建地图实例,并将地图容器的ID设置为allmap
。
3. 设置地图属性
map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
设置地图的中心点坐标、地图级别、开启鼠标滚轮缩放和设置地图类型为地球模式。
开发过程中的经验与收获:
未来功能拓展与优化: