Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
614 views
in Technique[技术] by (71.8m points)

How to add I3SLoader 3dtile layer (deck.gl) integrated with mapbox

I am trying to add arcgis 3d layer in mapbox with DeckGL. But I have this error (Uncaught TypeError: Tile3DLayer is not a constructor) If I could bring data from arcgis sceneserver ,I try add two maps like compare(mapbox gl swipe tool) them. maybe there are different ways to solve this problem. Taking the arcgis data I need and calling two maps on the same web page. Then make a presentation with the comparison tool between these maps.

<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/[email protected]/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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Tile3DLayer is exported from @deck.gl/geo-layers.

Try importing the modules like:

...
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.0.0/dist.min.js"></script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...