Vue + 高德地图 + 三维模型

最新推荐文章于 2024-05-11 06:36:03 发布

死不瞑目的八爪鱼

最新推荐文章于 2024-05-11 06:36:03 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Bom_Dom/article/details/128299131

版权

一：创建高德的kek和密钥（根据需求选择服务平台），我选择的是web端（JS API）
高德官网注册
在这里插入图片描述
二：在vue中引入高德地图

在public文件下找到index.html文件引入你的key值。
参考：https://lbs.amap.com/demo/jsapi-v2/example/map-lifecycle/map-show

代码：<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>

在这里插入图片描述
再回到你要引入的页面中，写代码
参考：https://lbs.amap.com/api/javascript-api/guide/object3d/3d-gltf

在这里插入图片描述

因为打包后，程序直接读取的是public下的文件，如果引入/public/大厦.glft 就会报错：Uncaught SyntaxError: Unexpected , ")

**
在这里插入图片描述

在这里插入图片描述

完整代码：

<template>
  <div id="container" class="map"></div>
</template>
<script>
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "你的密钥",
};
export default {
  data() {
    return {
      map: null,
    };
  },

  mounted() {
    // 高德地图
    this.GaodeMap();
  },
  methods: {
    GaodeMap() {
      // 创建地图实例
      var map = new AMap.Map("container", {
        mapStyle: "amap://styles/grey", //地图主题
        viewMode: "3D", //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [108.830329, 34.161979], //中心点坐标
        resizeEnable: true,
        terrain: true, // 开启地形图
        pitch: 65, //倾斜角度
        // wallColor: "green", // 地图楼快的侧面颜色
        // roofColor: "red", // 地图楼快的顶面颜色
      });

      // 创建Object3DLayer图层
      var object3Dlayer = new AMap.Object3DLayer();
      map.add(object3Dlayer);

      var cityMeshes;

      map.plugin(["AMap.GltfLoader"], function () {
        var urlCity = "/大厦.gltf";
        // var urlCity = "https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf";
        var paramCity = {
          position: new AMap.LngLat(108.830329, 34.161979), // 必须
            scale: 9, // 非必须，默认1
            // height: 1800, // 非必须，默认0
            // scene: 0, // 非必须，默认0
        };

        var gltfObj = new AMap.GltfLoader();

        gltfObj.load(urlCity, function (gltfCity) {
          cityMeshes = gltfCity;
          gltfCity.setOption(paramCity);
          gltfCity.rotateX(90);
          gltfCity.rotateY(0);
          gltfCity.rotateZ(5);
          object3Dlayer.add(gltfCity);
        });
      });
    },
  },
};
</script>
<style>
.map {
  overflow: hidden;
  width: 100%;
  height: 800px;
  margin: 0;
  font-family: "微软雅黑";
}
.amap-copyright {
  display: none !important;
}
.amap-logo {
  display: none !important;
}
</style>