如何添加与 mapbox 集成的 I3SLoader 3dtile 层 (deck.gl)

如何解决如何添加与 mapbox 集成的 I3SLoader 3dtile 层 (deck.gl)

我正在尝试使用 DeckGL 在 mapBox 中添加 arcgis 3d 图层。但是我有这个错误（Uncaught TypeError: Tile3DLayer is not a constructor）如果我可以从 arcgis 场景服务器中获取数据，我会尝试添加两张地图，例如 compare(mapBox gl swipe tool) 它们。也许有不同的方法可以解决这个问题。获取我需要的 arcgis 数据并在同一个网页上调用两个地图。然后使用这些地图之间的比较工具进行演示。

import { Component,OnInit } from '@angular/core';
import { Validators,FormBuilder,FormGroup,FormArray,FormControl } from '@angular/forms';
import { ProductService } from '../../service/product.service';
import { AgentService } from '../../service/agent.service';
import { DesignationService } from '../../service/designation.service';

@Component({
   selector: 'app-buyer-register',templateUrl: './buyer-register.component.html',styleUrls: ['./buyer-register.component.scss'],})
export class BuyerRegisterComponent implements OnInit {
 public formBuyer: FormGroup;
 Product: any = [];
 public selectedProduct: any = [];
 Designation: any = [];
 Agent: any = [];

 constructor(private formBuilder: FormBuilder,private productService: 
  ProductService,private agentService: AgentService,private designationService: DesignationService) { }

  ngOnInit() {
   this.loadProduct();
   this.loadAgent();
   this.loadDesignation();
  }

  loadProduct() {
    this.productService.getProduct().subscribe(data => {
    this.Product = data;
    console.log(this.Product);
  });
 }

 loadAgent() {
    this.agentService.getAgent().subscribe(data => this.Agent = data);
 }

 loadDesignation() {
    this.designationService.getDesignation().subscribe(data => {
      this.Designation = data;
   });
 }  
}

解决方法

我用的是React，核心代码在这里，希望能帮到你。


// import { MapboxLayer } from '@deck.gl/mapbox';
// import {I3SLoader} from '@loaders.gl/i3s';
// import { Tile3DLayer } from '@deck.gl/geo-layers';
// import mapboxgl from 'mapbox-gl';


mapboxgl.accessToken = 'your-token';
const map = new mapboxgl.Map({
    container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-122.51473530281777,37.70463582140094],zoom: 13
});
const layer = new MapboxLayer({
    id:'i3s',type: Tile3DLayer,data: 'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',loader: I3SLoader
});
map.on('load',() => {
    map.resize();
    map.addLayer(layer);
});