vue3对接腾讯地图渲染3d模型注意事项

1、引入腾讯地图api

• 1.1 不用传统的方法在index.html 通过头部链接引入，主要是因为，后面使用困难会造成内存泄漏，作用域混乱（涉及多处使用地图的地方）。

• 1.2 通过 index.ts 动态的加载腾讯地图api，具体作法如下，好处是，不会造成内存泄露，即开即用。不会造成作用域混乱的问题，因为每个地图map都是一个单例作用域，创建和销毁都是独立的。

/** 腾讯地图API加载器 用于动态加载腾讯地图API */ export function TMapLoader(key: string) {   return new Promise(function (resolve, reject) {     if ((window as any).TMap) {       resolve((window as any).TMap);       return;     }     const script = document.createElement("script");     // 移除 model 库，基础加载     script.src = https://map.qq.com/api/gljs?v=1.exp&key=${key}&libraries=view,geometry,visualization,model;     script.async = true;     script.onload = () => {       if ((window as any).TMap) {         resolve((window as any).TMap);       } else {         reject(new Error("TMap 加载失败"));       }     };     document.body.appendChild(script);   }); }

• 1.3 注意事项 此方法引入模型库会报错，告诉我们不应该用响应式的方法去调用模型库的方法，正确的做法是将模型库的方法单独抽成一个ts方法，通用的方法，在调用模型库的时候需要用markRaw方法来操作一下，这时候才可以正确的使用模型库的方法，具体代码如下

import { markRaw } from "vue"; /** GLTF模型加载选项接口 */ export interface GLTFModelOptions {   url: string; // 模型文件路径   map: any; // 地图实例   id: string; // 模型ID   position: any; // 模型位置（TMap.LatLng对象）   scale?: number[]; // 模型缩放比例