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>