一:创建高德的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>