当前位置：首页 > news >正文

在高德地图上加载3DTilesLayer图层模型/天地瓦片

news 来源：原创 2025/5/14 8:35:22

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 || ''; //天地瓦片keyconst 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);
}

1. 引入必要的库

2. 使用 AmbientLight 添加环境光

3. 使用 ThreeLayer 创建3D图层

4. 使用 Layer3DTiles 加载3D模型

5. 整合一切

6. 初始化地图并添加3D图层

相关文章：

2. 使用 `AmbientLight` 添加环境光

3. 使用 `ThreeLayer` 创建3D图层

4. 使用 `Layer3DTiles` 加载3D模型