mapbox 结合deckgl添加3DTiles等操作

 

 

1.初始化

import { MapboxOverlay } from "@deck.gl/mapbox";
import { LineLayer, GeoJsonLayer } from "@deck.gl/layers";

  import { TripsLayer, Tile3DLayer } from "@deck.gl/geo-layers";

  import { Tiles3DLoader } from "@loaders.gl/3d-tiles";

 

  let deckOverlay = new MapboxOverlay({

    interleaved: true,

    layers: []

  });

 mapgl.addControl(deckOverlay);

2.添加3DTiles

function load3DTiles(name, id, url) {
  const layers = deckOverlay._props.layers;
  deckOverlay.setProps({
    layers: [
      ...layers,
      new Tile3DLayer({
        id: id,
        name: name,
        data: url,
        loader: Tiles3DLoader,
        extruded: true, // 设置3D功能
        opacity: 1, // 设置透明度
        loadOptions: {
          "3d-tiles": {
            loadGLTF: true,
            decodeQuantizedPositions: false,
            isTileset: "auto",
            assetGltfUpAxis: null
          }
        },
        pickable: true, // 设置可选取
        onTilesetError: (err) => {
          console.log(22, err);
        },
        onTilesetLoad: (tileset) => {
          console.log(55, tileset);
          const { cartographicCenter, zoom } = tileset;
          deckOverlay.setProps({
            initialViewState: {
              longitude: cartographicCenter[0],
              latitude: cartographicCenter[1],
              zoom
            }
          });
          mapgl.jumpTo({
            center: [cartographicCenter[0], cartographicCenter[1]],
            zoom
          });
        },
        pointSize: 2
      })
    ]
  });
}

3.添加geojson数据

  addDeckLayerByGeojson(id, geojson) {
    const layers = deckOverlay._props.layers;
    deckOverlay.setProps({
      layers: [
        ...layers,
        new GeoJsonLayer({
          id: id + new Date().getTime(),
          data: geojson,
          getLineColor: (e) => {
            if (e.properties && e.properties.color) {
              return this.hexToRgbArray(e.properties.color);
            } else {
              return [255, 0, 0];
            }
          },
          getLineWidth: 0.3
        })
      ]
    });
  }

  hexToRgbArray(hexColor) {

    // 移除十六进制颜色代码中的'#'

    let hex = hexColor.replace("#", "");

    // 解析红、绿、蓝各自的十六进制数

    let red = parseInt(hex.substring(0, 2), 16);

    let green = parseInt(hex.substring(2, 4), 16);

    let blue = parseInt(hex.substring(4, 6), 16);

    // 返回RGB数组

    return [red, green, blue];

  }

4.判断是否点击了模型

  judgeIsModel(e) {
    const [x, y] = [e.point.x, e.point.y];
    const pickInfo = deckOverlay.pickObject({
      x,
      y,
      unproject3D: true
    });

    if (pickInfo && pickInfo.coordinate) {
      return pickInfo;
    } else {
      return null;
    }
  }

5.删除对应的deckgl图层

  deleteDeckLayers(id) {
    const decklayers = deckOverlay._props.layers;
    for (let i = 0; i < decklayers.length; i++) {
      if (decklayers[i].id.indexOf(id) !== -1) {
        decklayers.splice(i, 1);
        i--;
      }
    }
    deckOverlay.setProps({ decklayers });
  }