引入高德地图
npm install @amap/amap-jsapi-loader --save
在utils创建 AMap.ts
import AMapLoader from '@amap/amap-jsapi-loader';
export let getAMap = (id = 'container', config = {}) => {
return new Promise((yes, no) => {
AMapLoader.load({
key: 'xxxxxx', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '1.4.15', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: ['Map3D'], //插件列表
})
.then((AMap) => {
let map = new AMap.Map(id, {
viewMode: '3D',//使用3D视图
pitch: 30,
rotation: 25,
zoom: 16,
center: [121.499809, 31.236666],
mapStyle: 'amap://styles/macaron',
showIndoorMap: false,
layers: [],//使用多个图层
...config
});
yes({
map,
AMap
});
})
.catch((e) => {
console.log('高德地图错误', e);
no(e);
});
});
};
index.tsx
import React, { useEffect } from 'react';
import './index.less'
import { getAMap } from '../../utils/AMap'
const Map: React.FC = () => {
useEffect(() => {
fetchMap()
}, []);
const fetchMap = async () => {
let aa: any = await getAMap()
let AMap = aa.AMap
let map = aa.map
// 创建Object3DLayer图层
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
var druckMeshes;
map.plugin(["AMap.GltfLoader"], () => {
var urlDuck = 'Duck.gltf';
var paramDuck = {
position: new AMap.LngLat(121.495000, 31.233366), // 必须
scale: 800, // 非必须,默认1
height: -100, // 非必须,默认0
scene: 0, // 非必须,默认0
};
var gltfObj = new AMap.GltfLoader();
gltfObj.load(urlDuck, (gltfDuck: {
setOption: (arg0: {
position: any; // 必须
scale: number; // 非必须,默认1
height: number; // 非必须,默认0
scene: number;
}) => void; rotateX: (arg0: number) => void; rotateZ: (arg0: number) => void;
}) => {
druckMeshes = gltfDuck;
gltfDuck.setOption(paramDuck);
gltfDuck.rotateX(90);
gltfDuck.rotateZ(-20);
object3Dlayer.add(gltfDuck);
});
});
}
return (
<div id="container" style={{ width: "100%", height: "100%" }}></div>
)
};
export default Map;
运行报错,请在umi中gltf格式添加配置;
在config.ts中添加
runtimePublicPath: true,
chainWebpack: config=>{
config.module.rule('gltf').test(/\.(gltf)$/).use('gltf').loader('url-loader').options('$').end()
},
注意:重点
gltf模型请放在public目录下,否则可能会找不到路径
如果gltf模型里的贴图路径找不到建议将图片转为base64格式;
如果设计师给的是glb二进制格式的我们可以使用Visual Studio Code 的 glTF 工具进行转换
glTF Tools