deck.gl ArcLayer

Sample code for Google Maps Platform JavaScript API author(s): Justin Poehnelt

HTML

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="mapContainer"></div>
  </body>
</html>

CSS

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#mapContainer {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

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

const INITIAL_VIEW_STATE = {
  latitude: 22.25972000,
  longitude: 114.12940000,
  zoom: 15,
  pitch: 0
};

const deckgl = new DeckGL({
  container: "mapContainer",
  mapStyle: "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  onViewStateChange: ({ viewState }) => {
    deckgl.setProps({
      viewState
    });
  }
});

function renderLayers() {
  deckgl.setProps({
    layers: [
      new Tile3DLayer({
        id: "tile-3d-layer",
        data:
          "https://tiles.arcgis.com/tiles/6hvouxd2XTE6szh5/arcgis/rest/services/20231208_2_3D_Mesh_SLPK/SceneServer/layers/0",
        loadOptions: {
          i3s: {
            coordinateSystem: COORDINATE_SYSTEM.LNGLAT_OFFSETS
          }
        },
        loader: I3SLoader
      })
    ]
  });
}

renderLayers();