Блог

Главная - Вопросы по программированию - Как добавить слой I3SLoader 3dtile (deck.gl ) интегрирован с mapbox

Как добавить слой I3SLoader 3dtile (deck.gl ) интегрирован с mapbox

#mapbox-gl-js #deck.gl

#mapbox-gl-js #deck.gl

Вопрос:

Я пытаюсь добавить слой arcgis 3d в mapbox с помощью DeckGL. Но у меня есть эта ошибка (неперехваченная ошибка типа: Tile3DLayer не является конструктором) Если бы я мог принести данные из arcgis sceneserver, я попытался бы добавить две карты, например, сравнить их (mapbox gl swipe tool). возможно, есть разные способы решить эту проблему. Беру нужные мне данные ArcGIS и вызываю две карты на одной веб-странице. Затем сделайте презентацию с помощью инструмента сравнения между этими картами.

 <html>

<head>
  <title>deck.gl   Mapbox Integration</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css">
  <script src="https://unpkg.com/@loaders.gl/i3s@2.1.6/dist/dist.min.js"></script>

</head>

<body>
  <div id="map" style="width: 100vw; height: 100vh"></div>
</body>
<script type="text/javascript">
  const { MapboxLayer, ScatterplotLayer } = deck;

  // Get a mapbox API access token
  mapboxgl.accessToken = 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2pudzRtaWloMDAzcTN2bzN1aXdxZHB5bSJ9.2bkj3IiRC8wj3jLThvDGdA';

  // Initialize mapbox map
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-74.50, 40],
    zoom: 9
  });


  const {DeckGL, Tile3DLayer} = deck;
  const {I3SLoader} = loaders;

  const deckgl = new DeckGL({
    
   
    controller: true,
    layers: [
    new Tile3DLayer({
        id: 'tile-3d-layer',
        data:
          'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',
        loader: I3SLoader,
        onTilesetLoad: (tileset) => {
          const {zoom, cartographicCenter} = tileset;
          const [longitude, latitude] = cartographicCenter;

          const viewState = {
            ...deckgl.viewState,
            zoom: zoom   2.5,
            longitude,
            latitude
          };
          deckgl.setProps({initialViewState: viewState});
        }
      })
    ]
  });

  map.on('load', () => {
    map.addLayer(deckgl);
  });





</script>

</html>

Ответ №1:

Я использую 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);
});

Метки: