react 高德地图本地gltf 模型

最新推荐文章于 2026-02-28 16:50:39 发布

原创

最新推荐文章于 2026-02-28 16:50:39 发布 · 1.5k 阅读

标签

#react

收录于

本文档介绍了如何在umi项目中引入高德地图，并加载gltf模型。首先通过npm安装高德地图库，然后在utils文件夹下创建AMap.ts文件，设置地图加载和配置。接着在组件中使用useEffect实现地图的初始化和模型加载。当遇到gltf模型资源找不到问题时，建议将模型和图片转为base64格式，或者将模型转换为glb格式再利用工具进行处理。

引入高德地图

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