VUE使用百度地图API实现三维地球
VUE结合百度API实现三维地球
·
Vue结合百度地图实现三维地球
小的在网上看了很多教程后,一些参数已经改变了,无法实现,因此写下本篇笔记做记录,大人多多见谅。哈哈哈~
1.环境准备
申请一个百度地图的AK用于调用百度地图的API(教程网上查找)
1.1 vue整合百度地图组件
vue有整合过百度地图的组件,但是不支持三维地球模式三维地球模型在最新的百度地图api中才有,Vue还没有整合最新的三维地球模式,React支持。
此处附上:
百度地图API(最新)地址:https://lbs.baidu.com/index.php?title=jspopularGL
VUE整合百度地图的组件地址:https://dafrok.github.io/vue-baidu-map/#/zh/index
import BaiduMap from 'vue-baidu-map'
// 引入第三方平台百度api
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: '你申请的AK'
})
1.2 vue结合百度API实现
在vue项目中public文件夹下index.html中全局引入百度地图API
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的AK"></script>
2.实际代码
2.1 部分代码如下
2.1.1 卫星图的加载
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var map = new BMapGL.Map('allmap') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 5) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP) // BMAP_EARTH_MAP这个就是地球模式(三维的),也可以替换成其他的
2.1.2 卫星的窗口
// 卫星站窗口
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: object.stationName, // 信息窗口标题
}
// 设置窗口的点击事件展示信息
marker.addEventListener("click",function (event) {
var infoWindow = new BMapGL.InfoWindow(object.status, opts);
map.openInfoWindow(infoWindow, point);
})
2.1.3 标记点
地图上创建标记点,可以点击展示信息窗口
// 创建点 str[0], str[1] 是点的经纬度
var point = new BMapGL.Point(str[0], str[1])
// 地图上创建marker点
var marker = new BMapGL.Marker(point)
// 地图上添加点
map.addOverlay(marker)
2.2 完整代码
我这里数据是从后端查询出来放到里面的,也可以使用假数据或者换成你们的数据。
如下:
<template>
<div>
<div id="allmap" style="width: 100%; height: 900px;"></div>
</div>
</template>
<script>
import {getAction} from '@/api/manage'
export default {
data() {
return {
mapLocationObjs: {},
locations: []
}
},
created() {
// 默认加载show方法
this.show();
this.putLocations();
},
mounted() {
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var map = new BMapGL.Map('allmap') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 5) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
map.setMapType(BMAP_EARTH_MAP)
window.map = map;// 创建信息窗口对象
/* var marker = new BMapGL.Marker(new BMapGL.Point(116.280190, 40.049191)) // 创建点
map.addOverlay(marker) // 将标注添加到地图中*/
},
methods: {
// 获取后端的数据
show() {
getAction("/sate/showMap").then((res) => {
if (res.success) {
this.mapLocationObjs = res;
this.locations = res.result;
console.log(this.locations);
for(var i = 0; i < this.locations.length; i++){
// 单个卫星站对象
var locationObject = this.locations[i];
// 根据逗号分隔坐标
var str = this.locations[i].lla.split(',')
// 创建点
var point = new BMapGL.Point(str[0], str[1])
var marker = new BMapGL.Marker(point)
// 信息窗口展示
this.putWindow(marker,point,locationObject);
// 地图上创建点
map.addOverlay(marker)
}
}
})
},
// 标注弹框
putWindow(marker, point, object) {
// 卫星站对象
var windowInfo = object;
// 卫星站窗口
var opts = {
width: 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title: object.stationName, // 信息窗口标题
}
marker.addEventListener("click",function (event) {
var infoWindow = new BMapGL.InfoWindow(object.status, opts);
map.openInfoWindow(infoWindow, point);
})
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)