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[]; // 模型缩放比例
mask?: any; // 模型可见范围
onLoaded?: () => void; // 模型加载成功回调
onLoadFailed?: () => void; // 模型加载失败回调
}
/**
- 加载GLTF模型到地图
- @param TMap TMap API实例
- @param options 模型加载选项
- @returns 模型实例
*/
export const loadGLTFModel = (TMap: any, options: GLTFModelOptions): any => {
const {
url,
map,
id,
position,
scale = [1, 1, 1],
mask,
onLoaded,
onLoadFailed,
} = options;
// 创建模型实例
const modelInstance = markRaw(
new TMap.model.GLTFModel({
url,
map,
id,
position,
scale,
mask,
})
);
// 模型资源加载完成回调
modelInstance.on("loaded", () => {
// 调用用户提供的加载成功回调
if (onLoaded) {
onLoaded();
}
});
// 模型加载失败回调
modelInstance.on("load_failed", () => {
// 调用用户提供的加载失败回调
if (onLoadFailed) {
onLoadFailed();
}
});
return modelInstance;
};
/**
- 销毁模型实例
- @param modelInstance 模型实例
*/
export const destroyGLTFModel = (modelInstance: any): void => {
if (modelInstance) {
modelInstance.remove(); // 调用模型实例的销毁方法
}
};
- 1.4 简单说一下这个方法，GLTFModel 需要我们传递几项参数，首先url: 模型的地址，这个模型地址可以是本地也可以是网络在线地址，map: 告诉gltf 要将此模型渲染到那个地图上去，id: 模型的唯一id, position: 模型的位置，类型是 Tmap.LatLng , scale: 模型缩放比例[1,1,1] ，mask: 模型遮罩层 需要传递 TMap.LatLng(coord[1], coord[0]) 数组类型的多边形遮罩层数据，也就是模型围成的多边形数据。
- 1.5 此时通过上面的操作就能正确的调用并渲染一个3d模型在帝都的特定位置，并且可以清除模型内的腾讯地图自带的白膜数据 如 poi 3d建筑。
