[JavaScript知识库]react 高德地图本地gltf 模型

引入高德地图

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格式；

图片在线转base64工具

如果设计师给的是glb二进制格式的我们可以使用Visual Studio Code 的 glTF 工具进行转换

glTF Tools

互转的使用方法

参考博主