在高德地图上加载3DTilesLayer图层模型/天地瓦片
1. 引入必要的库
- Three.js：一个用于创建和显示3D图形的JavaScript库。
- @vuemap/three-layer：一个Vue插件，它允许你在高德地图中添加Three.js图层。
- @vuemap/layer-3dtiles：一个用于处理3D Tiles格式数据的Vue插件，可以用来加载和渲染3D模型。
npm install three @vuemap/three-layer @vuemap/layer-3dtiles
# 或者
yarn add three @vuemap/three-layer @vuemap/layer-3dtiles
：
import { AmbientLight } from 'three';
import { ThreeLayer } from '@vuemap/three-layer';
import { Layer3DTiles } from '@vuemap/layer-3dtiles';
2. 使用 AmbientLight 添加环境光
AmbientLight 是Three.js中的一个类，用于为场景提供均匀的光照效果。它不会产生阴影，并且其颜色和强度会均匀地照亮所有对象。这对于增强3D模型的可见性和真实感非常有用。
-
参数:
color(Hexadecimal): 光的颜色，默认是白色（0xffffff）。intensity(Number): 光的强度，默认是1.0。
-
示例:
const light = new AmbientLight(0xffffff, 2); // 白色光，强度为2
layer.add(light); // 将环境光添加到ThreeLayer实例中
3. 使用 ThreeLayer 创建3D图层
ThreeLayer 是由 @vuemap/three-layer 提供的一个类，它允许你将Three.js场景作为一个图层添加到高德地图中。这个类封装了Three.js的核心功能，并与高德地图API进行了集成，使得我们可以轻松地在地图上展示3D内容。
-
构造函数参数:
map(AMap.Map): 高德地图实例。
-
方法:
on(event, callback): 监听事件，例如complete，当图层加载完成时触发。add(object): 向图层中添加Three.js的对象，如灯光、几何体等。setzIndex(index): 设置图层的z-index，以控制图层的堆叠顺序。
-
示例:
const layer = new ThreeLayer(map);
layer.on('complete', () => {
// 图层加载完成后执行的操作
});
layer.setzIndex(10); // 设置较低的zIndex，确保模型不覆盖其他内容
4. 使用 Layer3DTiles 加载3D模型
Layer3DTiles 是由 @vuemap/layer-3dtiles 提供的一个类，专门用于加载和渲染符合3D Tiles规范的数据。3D Tiles是一种开放标准，旨在高效地传输和渲染大规模三维地理空间数据集。它支持多种几何类型，包括点云、BIM/CAD模型、倾斜摄影等。
-
构造函数参数:
layer(ThreeLayer): 作为父容器的ThreeLayer实例。options(Object): 包含配置选项的对象，如url、position等。
-
配置选项:
url(String): 指向3D Tiles数据源的URL。position(Array): 模型的位置，通常是[经度, 纬度, 海拔]的形式。rotation(Object): 模型的旋转属性，包含x, y, z轴的旋转角度。scale(Object): 模型的比例因子，用于缩放模型。translate(Object): 模型的平移属性，用于调整模型的位置。
-
方法:
setRotation(rotation): 设置模型的旋转属性。setScale(scale): 设置模型的比例因子。setTranslate(translate): 设置模型的平移属性。
-
示例:
const tiles = new Layer3DTiles(layer, {
url: value.url,
position: value.position,
});
tiles.setRotation({ ...value.modelRotation });
tiles.setScale({ ...value.modelScale });
tiles.setTranslate({ ...value.translate });
5. 整合一切
const get3dmap = async (map) => {
let data = await mapApi().get3dmap({ }); //请求模型数据
if (data.status * 1 == 200) {
handleSelectValue.value = data.data.modelInfo.map((item) => ({ //用作下拉框切换模型
label: item.modelName,
value: JSON.stringify(item.draw_model_config[0].position),
}));
let models = data.data.modelInfo;
let layers = [];
for (let model of models) {
let modelConfig = model.draw_model_config.filter(config => config.type === '3D');
if (modelConfig.length > 0) {
let value = modelConfig[0];
const layer = new ThreeLayer(map);
layer.on('complete', () => {
const light = new AmbientLight('#fff', 2);
layer.add(light);
const tiles = new Layer3DTiles(layer, {
url: value.url,
position: value.position,
});
tiles.setRotation({ ...value.modelRotation });
tiles.setScale({ ...value.modelScale });
tiles.setTranslate({ ...value.translate });
});
layer.setzIndex(10);
layers.push(layer);
}
}
return layers;
}
};
6. 初始化地图并添加3D图层
最后，我们需要初始化高德地图，并在地图加载完成后调用 get3dmap 函数来获取3D模型并将其添加到地图中。同时，还可以添加其他类型的图层，比如瓦片图层，来丰富地图的内容。
function onMapInit(map) {
mapInstance = map;
get3dmap(map).then(layers => {
layers.forEach(layer => {
map.add(layer);
});
});
const key = window.KEY || ''; //天地瓦片key
const wmts = new AMap.TileLayer({
tileUrl: `http://t0.tianditu.gov.cn/DataServer?T=img_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
zIndex: 1,
});
map.add(wmts);
}