Vue中引用百度地图并基于MapVGL实现3D地图效果，并绘制图层

<template>
  <div id="map" style="width: 100%; height: 100%"></div>
</template>
 
<script>
export default {
  name: 'BaiduMap3D',
  data() {
    return {
      map: null,
      mapvgl: null
    };
  },
  mounted() {
    this.initMap();
    this.initMapVGL();
    this.add3DLayer();
  },
  methods: {
    initMap() {
      this.map = new BMapGL.Map('map'); // 创建地图实例
      const point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
      this.map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
    },
    initMapVGL() {
      this.mapvgl = new mapvgl.MapVGL({
        map: this.map // 将百度地图实例传递给MapVGL
      });
    },
    add3DLayer() {
      const data = [
        // 数据格式：经度，纬度，高度，颜色
        { lng: 116.404, lat: 39.915, height: 1000, color: 'red' }
      ];
      const buildingLayer = new mapvgl.BuildingLayer({
        data: data,
        shape: 'cylinder', // 图形形状，这里使用圆柱体
        style: {
          // 样式配置
          color: 'color', // 颜色字段与数据中的color对应
          radius: 10, // 圆柱体半径
          height: 'height', // 高度字段与数据中的height对应
          bottomAltitude: 0 // 地面以上的高度
        }
      });
      this.mapvgl.addLayer(buildingLayer);
    }
  }
};
</script>
 
<style>
/* 样式按需添加 */
</style>

这段代码展示了如何在Vue中初始化百度地图，并使用MapVGL库来创建3D图层，最终绘制一个由数据定义的3D建筑。这个例子简洁明了，并且注重于核心功能的实现，而不是过多的样式和事件处理，这有助于开发者理解如何在实际应用中集成和使用这些库。