在高德地图上加载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);
}