vue 百度地图 3d地图

效果图
在这里插入图片描述


一、新建js文件（3dmap.js）

const ak = '你的百度地图秘钥' // 百度的地图密钥申请 https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuMap() {
  return new Promise(function (resolve, reject) {
    try {
      console.log('BMap is defined:', BMapGL === undefined || BMapGL)
      resolve(BMapGL)
    } catch (err) {
      window.init = function () {
        resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.body.appendChild(script)
    }
  })
}
export { loadBaiDuMap }
/**
 * 异步加载百度地图,以及绘制工具
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuDrawMap() {
  return loadBaiDuMap().then(BMapGL => {
    let loaded = false
    try {
      loaded = (BMapGLLib && BMapGLLib.DrawingManager)
    } catch (err) {
      loaded = false
    }
    if (!loaded) {
      console.log('BMapLib.DrawingManager loading!')
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
      document.body.appendChild(script)
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = 'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
      document.body.appendChild(link)
    } else {
      console.log('BMapLib.DrawingManager is loaded!')
    }
    return BMapGL
  })
}
export { loadBaiDuDrawMap }

二、新建vue文件

<template>
  <!--地图-->
  <div style="width: 100%; height: 700px">
    <div id="container"></div>
  </div>
</template>
<script
  type="text/javascript"
  src="https://api.map.baidu.com/api?v=3.0&ak=fX3RxiG1a3EV1fQGYBzzCFojr1z82udK&s=1"
></script>
<script>
import { loadBaiDuMap, loadBaiDuDrawMap } from "@/assets/js/baiduMap.js";
export default {
  name: "index",
  data() {
    return {
      path: [
        {
          lng: 112.541993,
          lat: 37.822504,
        },
        {
          lng: 112.628662,
          lat: 38.02281,
        },
        {
          lng: 112.70708,
          lat: 38.023748,
        },
        {
          lng: 113.009629,
          lat: 38.060038,
        },
        {
          lng: 113.352889,
          lat: 38.09286,
        },
        {
          lng: 113.71081,
          lat: 38.060209,
        },
        {
          lng: 113.897227,
          lat: 38.072481,
        },
        {
          lng: 114.028882,
          lat: 38.121267,
        },
        {
          lng: 114.24771,
          lat: 38.194384,
        },
        {
          lng: 114.472825,
          lat: 38.092136,
        },
        {
          lng: 114.581917,
          lat: 38.061173,
        },
      ],
      interval: null, // 定时器
      timesRun: 0, // 循环次数
      localSearch: null, // 自动搜索
      loading: false,
      transportmanageList: [],
      trackAni: null,
      maps: "", // 存放地图
      pls: "",
    };
  },
  mounted() {
    this.init1(); // 初始化轨迹路线
  },
  created() {},
  methods: {
  //设置点坐标
    init() {
      // 初始化地图
      loadBaiDuMap().then((BMapGL) => {
        var map = new BMapGL.Map("container");
        map.centerAndZoom(
          new BMapGL.Point(this.path[0].lng, this.path[0].lat),
          18
        );
        map.enableScrollWheelZoom(true);
        map.setHeading(60);
        map.setTilt(60);
        // 添加比例尺控件
        bmap.addControl(
          new BMapGL.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,
            offset: new BMapGL.Size(10, 10),
          })
        );
        // 添加缩放控件
        bmap.addControl(
          new BMapGL.ZoomControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMapGL.Size(10, 10),
          })
        );

		//设置点坐标
        for (var i = 0; i < this.path.length; i++) {
          let poi = new BMapGL.Point(this.path[i].lng, this.path[i].lat);
          let marker = new BMapGL.Marker(poi); //创建标注
          map.addOverlay(marker); //将标注添加到地图中
        }
        setTimeout(this.start(), 3000);
        this.maps = bmap;
        this.pls = pl;
      });
    },
    //设置多边形绘图
    init1() { 
      // 初始化地图
      loadBaiDuDrawMap().then((BMapGL) => {
        // 创建地图实例
        let bmap = new BMapGL.Map("container");
        bmap.centerAndZoom(new BMapGL.Point(this.path[0].lng, this.path[0].lat), 18); // 初始化地图,设置中心点坐标和地图级别
        bmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        // 添加比例尺控件
        bmap.addControl(
          new BMapGL.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT,
            offset: new BMapGL.Size(10, 10),
          })
        );
        // 添加缩放控件
        bmap.addControl(
          new BMapGL.ZoomControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            offset: new BMapGL.Size(10, 10),
          })
        );

        let point = [];
        for (var i = 0; i < this.path.length; i++) {
          let poi = new BMapGL.Point(this.path[i].lng, this.path[i].lat);
          point.push(poi);
          //let marker = new BMapGL.Marker(poi); //创建标注
          //bmap.addOverlay(marker); //将标注添加到地图中
        }
        let polygon = new BMapGL.Polygon(point, {
          strokeColor: "blue",
          strokeWeight: 6,
          strokeOpacity: 0.5,
        });
        bmap.addOverlay(polygon);
        // 保存地图
        this.maps = bmap;
        this.pls = polygon;

        bmap.setHeading(64.5);
        bmap.setTilt(73);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>