高德地图glTF 模型vue中使用

注意：glTF需放在项目的public目录下（文件为glTF格式）

1.引入高德地图的js

---

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MouseTool,AMap.Driving,Map3D,AMap.ControlBar,AMap.GltfLoader,AMap.DistrictSearch,AMap.Driving">
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>

---

2.渲染地图

 var map = new AMap.Map("container", {
     viewMode: "3D",
     center: [116.397559, 39.89621],
     zoom: 14,
     mapStyle: "amap://styles/59c1855256602b4749ae9aa583c8d5b3", //设置地图的显示样式
     expandZoomRange: true,
     zooms: [3, 20],
     rotation: 50,
     pitch: 60,
 });

3.glTF模型添加

map.plugin(["AMap.GltfLoader"], function() {
  // var urlCity ="https://a.amap.com/jsapi_demos/static/gltfonline/shanghai/scene.gltf";
  var urlCity ='model.gltf'  //本地引入
  var urlDuck = "https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf";
   var paramCity = {
      position: new AMap.LngLat(117.249051, 39.067089), // 必须
      scale: 10, // 非必须，默认1
      height: -150, // 非必须，默认0
      scene: 0 // 非必须，默认0
   };

   var paramDuck = {
      position: new AMap.LngLat(117.229051, 39.067089), // 必须
      scale: 800, // 非必须，默认1
      height: -100, // 非必须，默认0
      scene: 0 // 非必须，默认0
   };

   var gltfObj = new AMap.GltfLoader();

   gltfObj.load(urlCity, function(gltfCity) {
      gltfCity.setOption(paramCity);
      gltfCity.rotateX(90);
      gltfCity.rotateZ(120);
      object3Dlayer.add(gltfCity);
   });

   gltfObj.load(urlDuck, function(gltfDuck) {
      gltfDuck.setOption(paramDuck);
      gltfDuck.rotateX(90);
      gltfDuck.rotateZ(-20);
      object3Dlayer.add(gltfDuck);
   });

这只是一个案列  可以根据个人需求进行完善修改使用哦！

交流
1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057

2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉