VUE百度地图加载3D模型(MapVThreeGallery)-点击弹出模型信息

参考百度开发文档
补充下(里面有免费的可以拿来玩)3D模型下载网址
步骤
1： npm install mapv-three 安装插件

 npm install mapv-three

2：在index.html加载百度地图

 <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的百度秘钥"></script>

注：加载model.glb文件需要是请求服务器来的，没有服务器资源的可以像我一样在本地用VS插件(Live Server)起了个小型服务器放3D模型数据 ----使用Visual Studio Code安装Live Server插件

然后右击index.html选择红框打开，就可以加载本地的3D模型数据了（这边是为了把这个小型本地服务启动起来，后面只用到了网址）

全部代码：

<template>
  <div class="hello" id="map_container" style="width: 100%;height: 100%;"></div>
</template>

<script>
import { Engine, GeoJSONDataSource, EmptySky, Polygon, ExtendMeshStandardMaterial } from 'mapv-three';
import { GLTFLoader } from 'bmap-three/examples/jsm/loaders/GLTFLoader.js';
import { PlaneGeometry, Mesh, MeshStandardMaterial, MeshBasicMaterial, Color, BoxGeometry, TextureLoader, RepeatWrapping } from 'bmap-three';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
    };
  },
  created() { },
  mounted() {
    this.ikn()
  },
  methods: {
    ikn() {
      const center = [120.90197,31.97289];
      const map = new BMapGL.Map('map_container', {
        restrictCenter: false,
        maxZoom: 25,
        displayOptions: {
          building: false,
        },
      });

      map.centerAndZoom(new BMapGL.Point(center[0], center[1]), 17);
      map.enableScrollWheelZoom(true);
      map.enableKeyboard();
      map.enableInertialDragging();
      map.enableContinuousZoom();
      map.setTilt(40);//地图倾斜角度
      map.setHeading(10);//地图旋转角度

      const engine = new Engine(map, {});
      engine.map.setCenter(center);
      engine.rendering.useMrt = true;
      engine.rendering.shadow.enabled = true;
      engine.rendering.animationLoopFrameTime = 40;
      engine.rendering.colorAdjust.saturation = 0.25;
      engine.rendering.colorAdjust.contrast = 0.15;
      engine.rendering.colorAdjust.brightness = 0;

      const sky = engine.add(new EmptySky());
      sky.time = 3600 * 16.5;

      const position = engine.map.projectPointArr(center);

      let mxUrl='http://127.0.0.1:5501/'
      // 模型
      const models = [
        {
          position: [120.90097,31.97889, 6],
          path: mxUrl+'/src/assets/model.glb',
          rotate: true,
          info: '酒瓶',
          rotation:[6.2 / 4,10.3,6.3],
          scale:[150,150,150]
        },
        {
          position: [120.90097,31.96889, 6],
          path: mxUrl+'/src/assets/model2.glb',
          rotate: false,
          info: '房间',
          rotation:[6.2 / 4,10.3,6.3],
          scale:[50,50,50]
        },
        {
          position: [120.91097,31.97289, 6],
          path: mxUrl+'/src/assets/model3.glb',
          rotate: true,
          info: '蓝鳍金枪鱼',
          rotation:[10.2 / 4,5.3,5.3],
          scale:[300,300,300]
        }
      ];

      let changModels = [],XYdata = []
      models.forEach((item,index) => {
        XYdata = this.Mercator2LonLat({x:item.position[0],y:item.position[1]})
        item.position = [XYdata.x,XYdata.y,item.position[2]]
        changModels.push(item)
      });
      // console.log("处理",changModels)

      const loader = new GLTFLoader();
      for (let i = 0; i < changModels.length; i++) {
        loader.load(changModels[i].path, gltf => {
          
          // console.log(gltf)
          const model = gltf.scene.children[0];
          model.userData.info = changModels[i].info;
          for (let i = 0; i < model.children.length; i++) {
            model.children[i].castShadow = true;
          }
          // console.log(models[i].rotation)
          let rotaData = changModels[i].rotation;
          let scalData = changModels[i].scale;
          model.rotation.set(rotaData[0],rotaData[1],rotaData[2]);//身体旋转角度
          model.scale.set(scalData[0],scalData[1],scalData[2]);//物体缩放大小
          
          model.position.set(changModels[i].position[0], changModels[i].position[1], changModels[i].position[2]);

          if (changModels[i].rotate) {
            model.rotation.x = Math.PI / 2;
            model.rotation.y = 1.08 * Math.PI / 2;
          }
          engine.add(model);
          // 模型添加点击事件
          engine.event.markEventProxy(model);
          engine.event.bind(model, 'click', e => {
            console.log(model)
            alert('点击了 ' + model.userData.info);
          });
        });
      }

    },
    Mercator2LonLat(lonlat) {
      //墨卡托经纬度坐标转换
      var mercator = {
        x: 0,
        y: 0
      };
      var x = lonlat.x * 20037508.34 / 180;
      var y = Math.log(Math.tan((90 + lonlat.y) * Math.PI / 360)) / (Math.PI / 180);
      y = y * 19915508.34 / 180;
      mercator.x = x;
      mercator.y = y;
      // console.log("完成左边转换",lonlat,mercator)
      return mercator;
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

目录结构如下：

效果图如下：