1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([[4416],{18393(e,l,n){n.r(l),n.d(l,{assets:()=>d,contentTitle:()=>c,default:()=>p,frontMatter:()=>a,metadata:()=>s,toc:()=>h});const s=JSON.parse('{"id":"api-reference/geo-layers/tile-3d-layer","title":"Tile3DLayer","description":"The Tile3DLayer renders 3d tiles data formatted according to the 3D Tiles Specification and ESRI I3S, supported by the Tiles3DLoader.","source":"@site/../docs/api-reference/geo-layers/tile-3d-layer.md","sourceDirName":"api-reference/geo-layers","slug":"/api-reference/geo-layers/tile-3d-layer","permalink":"/deck.gl/docs/api-reference/geo-layers/tile-3d-layer","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/api-reference/geo-layers/tile-3d-layer.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"TileLayer","permalink":"/deck.gl/docs/api-reference/geo-layers/tile-layer"},"next":{"title":"TripsLayer","permalink":"/deck.gl/docs/api-reference/geo-layers/trips-layer"}}');var r=n(74848),i=n(28453),t=n(11470),o=n(19365);const a={},c="Tile3DLayer",d={},h=[{value:"Example",id:"example",level:2},{value:"Load 3D Tiles from Cesium ION",id:"load-3d-tiles-from-cesium-ion",level:3},{value:"Load I3S Tiles from ArcGIS",id:"load-i3s-tiles-from-arcgis",level:3},{value:"Load 3D Tiles from Google Maps",id:"load-3d-tiles-from-google-maps",level:3},{value:"Installation",id:"installation",level:2},{value:"Properties",id:"properties",level:2},{value:"Render Options",id:"render-options",level:3},{value:"<code>opacity</code> (number, Optional)",id:"opacity",level:4},{value:"<code>pointSize</code> (number, Optional)",id:"pointsize",level:4},{value:"Data Properties",id:"data-properties",level:3},{value:"<code>data</code> (string)",id:"data",level:4},{value:"<code>loader</code> (object)",id:"loader",level:4},{value:"<code>loadOptions</code> (object, Optional)",id:"loadoptions",level:4},{value:"<code>pickable</code> (boolean, Optional)",id:"pickable",level:4},{value:"Data Accessors",id:"data-accessors",level:3},{value:"<code>getPointColor</code> (Accessor<Color>, Optional)",id:"getpointcolor",level:4},{value:"Callbacks",id:"callbacks",level:3},{value:"<code>onTilesetLoad</code> (Function, optional)",id:"ontilesetload",level:4},{value:"<code>onTileLoad</code> (Function, optional)",id:"ontileload",level:4},{value:"<code>onTileUnload</code> (Function, optional)",id:"ontileunload",level:4},{value:"<code>onTileError</code> (Function, optional)",id:"ontileerror",level:4},{value:"<code>_getMeshColor</code> (Function, optional)",id:"_getmeshcolor",level:4},{value:"Sub Layers",id:"sub-layers",level:2},{value:"Remarks",id:"remarks",level:2},{value:"Source",id:"source",level:2}];function u(e){const l={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.header,{children:(0,r.jsx)(l.h1,{id:"tile3dlayer",children:"Tile3DLayer"})}),"\n",(0,r.jsxs)(l.p,{children:["The ",(0,r.jsx)(l.code,{children:"Tile3DLayer"})," renders 3d tiles data formatted according to the ",(0,r.jsx)(l.a,{href:"https://www.opengeospatial.org/standards/3DTiles",children:"3D Tiles Specification"})," and ",(0,r.jsx)(l.a,{href:"https://github.com/Esri/i3s-spec",children:"ESRI I3S"}),", supported by the ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/3d-tiles/docs/api-reference/tiles-3d-loader",children:"Tiles3DLoader"}),"."]}),"\n",(0,r.jsxs)(l.p,{children:["Tile3DLayer is a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/composite-layer",children:"CompositeLayer"}),". Base on each tile type, it uses a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/layers/point-cloud-layer",children:"PointCloudLayer"}),", a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/mesh-layers/scenegraph-layer",children:"ScenegraphLayer"})," or ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/mesh-layers/simple-mesh-layer",children:"SimpleMeshLayer"})," to render the geometries."]}),"\n",(0,r.jsx)(l.p,{children:"References"}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsx)(l.li,{children:(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification",children:"3D Tiles"})}),"\n",(0,r.jsx)(l.li,{children:(0,r.jsx)(l.a,{href:"https://github.com/Esri/i3s-spec",children:"ESRI I3S"})}),"\n"]}),"\n",(0,r.jsx)(l.h2,{id:"example",children:"Example"}),"\n",(0,r.jsx)(l.h3,{id:"load-3d-tiles-from-cesium-ion",children:"Load 3D Tiles from Cesium ION"}),"\n","\n",(0,r.jsxs)(t.A,{groupId:"language",children:[(0,r.jsx)(o.A,{value:"js",label:"JavaScript",children:(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-js",children:"import {Deck} from '@deck.gl/core';\nimport {Tile3DLayer} from '@deck.gl/geo-layers';
1\nimport {CesiumIonLoader} from '@loaders.gl/3d-tiles';\n\nconst layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n // Tileset json file url\n data: 'https://assets.cesium.com/43978/tileset.json',\n loader: CesiumIonLoader,\n loadOptions: {\n // Set up Ion account: https://cesium.com/docs/tutorials/getting-started/#your-first-app\n 'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}\n },\n onTilesetLoad: tileset => {\n // Recenter to cover the tileset\n const {cartographicCenter, zoom} = tileset;\n deckInstance.setProps({\n initialViewState: {\n longitude: cartographicCenter[0],\n latitude: cartographicCenter[1],\n zoom\n }\n });\n },\n pointSize: 2\n});\n\nconst deckInstance = new Deck({\n initialViewState: {\n longitude: 10,\n latitude: 50,\n zoom: 2\n },\n controller: true,\n layers: [layer]\n});\n"})})}),(0,r.jsx)(o.A,{value:"ts",label:"TypeScript",children:(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-ts",children:"import {Deck} from '@deck.gl/core';\nimport {Tile3DLayer} from '@deck.gl/geo-layers';\nimport {CesiumIonLoader} from '@loaders.gl/3d-tiles';\nimport type {Tileset3D} from '@loaders.gl/tiles';\n\nconst layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n // Tileset json file url\n data: 'https://assets.cesium.com/43978/tileset.json',\n loader: CesiumIonLoader,\n loadOptions: {\n // Set up Ion account: https://cesium.com/docs/tutorials/getting-started/#your-first-app\n 'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}\n },\n onTilesetLoad: (tileset: Tileset3D) => {\n // Recenter to cover the tileset\n const {cartographicCenter, zoom} = tileset;\n deckInstance.setProps({\n initialViewState: {\n longitude: cartographicCenter[0],\n latitude: cartographicCenter[1],\n zoom\n }\n });\n },\n pointSize: 2\n});\n\nconst deckInstance = new Deck({\n initialViewState: {\n longitude: 10,\n latitude: 50,\n zoom: 2\n },\n controller: true,\n layers: [layer]\n});\n"})})}),(0,r.jsx)(o.A,{value:"react",label:"React",children:(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-tsx",children:"import React, {useState} from 'react';\nimport {DeckGL} from '@deck.gl/react';\nimport {Tile3DLayer} from '@deck.gl/geo-layers';\nimport {CesiumIonLoader} from '@loaders.gl/3d-tiles';\nimport type {MapViewState} from '@deck.gl/core';\nimport type {Tileset3D} from '@loaders.gl/tiles';\n\nfunction App() {\n const [initialViewState, setInitialViewState] = useState<MapViewState>({\n longitude: 10,\n latitude: 50,\n zoom: 2\n });\n\n const layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n // Tileset json file url\n data: 'https://assets.cesium.com/43978/tileset.json',\n loader: CesiumIonLoader,\n loadOptions: {\n // Set up Ion account: https://cesium.com/docs/tutorials/getting-started/#your-first-app\n 'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}\n },\n onTilesetLoad: (tileset: Tileset3D) => {\n // Recenter to cover the tileset\n const {cartographicCenter, zoom} = tileset;\n setInitialViewState({\n longitude: cartographicCenter[0],\n latitude: cartographicCenter[1],\n zoom\n });\n },\n pointSize: 2\n });\n\n return <DeckGL\n initialViewState={initialViewState}\n controller\n layers={[layer]}\n />;\n}\n"})})})]}),"\n",(0,r.jsx)(l.h3,{id:"load-i3s-tiles-from-arcgis",children:"Load I3S Tiles from ArcGIS"}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-ts",children:"import {Tile3DLayer} from '@deck.gl/geo-layers';\nimport {I3SLoader} from '@loaders.gl/i3s';\n\nconst layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n // Tileset entry point: Indexed 3D layer file url\n data: 'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',\n loader: I3SLoader\n});\n"})}),"\n",(0,r.jsx)(l.h3,{id:"load-3d-tiles-from-google-maps",children:"Load 3D Tiles from Google Maps"}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-ts",children:"import {Tile3DLayer} from '@deck.gl/geo-layers';
1\n\nconst layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n data: 'https://tile.googleapis.com/v1/3dtiles/root.json',\n loadOptions: {\n // https://developers.google.com/maps/documentation/tile/3d-tiles\n fetch: {headers: {'X-GOOG-API-KEY': '<google_maps_api_key>'}}\n }\n});\n"})}),"\n",(0,r.jsx)(l.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsx)(l.p,{children:"To install the dependencies:"}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-bash",children:"npm install deck.gl\n# or\nnpm install @deck.gl/core @deck.gl/layers @deck.gl/mesh-layers @deck.gl/geo-layers\n"})}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-ts",children:"import {Tile3DLayer} from '@deck.gl/geo-layers';\nimport type {Tile3DLayerProps} from '@deck.gl/geo-layers';\n\nnew Tile3DLayer<TileDataT>(...props: Tile3DLayerProps<TileDataT>[]);\n"})}),"\n",(0,r.jsx)(l.p,{children:"To use pre-bundled scripts:"}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-html",children:'<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"><\/script>\n\x3c!-- or --\x3e\n<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"><\/script>\n<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"><\/script>\n<script src="https://unpkg.com/@deck.gl/mesh-layers@^9.0.0/dist.min.js"><\/script>\n<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"><\/script>\n'})}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-js",children:"new deck.Tile3DLayer({});\n"})}),"\n",(0,r.jsx)(l.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsxs)(l.p,{children:["Inherits from all ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/layer",children:"Base Layer"})," and ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/composite-layer",children:"CompositeLayer"})," properties."]}),"\n",(0,r.jsx)(l.p,{children:"Along with other options as below,"}),"\n",(0,r.jsx)(l.h3,{id:"render-options",children:"Render Options"}),"\n",(0,r.jsxs)(l.h4,{id:"opacity",children:[(0,r.jsx)(l.code,{children:"opacity"})," (number, Optional)"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default ",(0,r.jsx)(l.code,{children:"1.0"})]}),"\n"]}),"\n",(0,r.jsxs)(l.p,{children:["The opacity of the layer. The same as defined in ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/layer",children:"layer"}),"."]}),"\n",(0,r.jsxs)(l.h4,{id:"pointsize",children:[(0,r.jsx)(l.code,{children:"pointSize"})," (number, Optional)"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default ",(0,r.jsx)(l.code,{children:"1.0"})]}),"\n"]}),"\n",(0,r.jsxs)(l.p,{children:["Global radius of all points in pixels.\nThis value is only applied when ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#introduction",children:"tile format"})," is ",(0,r.jsx)(l.code,{children:"pnts"}),"."]}),"\n",(0,r.jsx)(l.h3,{id:"data-properties",children:"Data Properties"}),"\n",(0,r.jsxs)(l.h4,{id:"data",children:[(0,r.jsx)(l.code,{children:"data"})," (string)"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["A URL to fetch tiles entry point of ",(0,r.jsx)(l.code,{children:"3D Tiles"})," ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#tileset-json",children:"Tileset JSON"})," file or ",(0,r.jsx)(l.code,{children:"Indexed 3D Scene Layer"})," file ",(0,r.jsx)(l.a,{href:"https://github.com/Esri/i3s-spec",children:"I3S"}),"."]}),"\n"]}),"\n",(0,r.jsxs)(l.h4,{id:"loader",children:[(0,r.jsx)(l.code,{children:"loader"})," (object)"]}),"\n",(0,r.jsxs)(l.p,{children:["Default ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/3d-tiles/docs/api-reference/tiles-3d-loader",children:(0,r.jsx)(l.code,{children:"Tiles3DLoader"})})]}),"\n",(0,r.jsxs)(l.p,{children:["A loader which is used to decode the fetched tiles. Available options are ",(0,r.jsx)(l.a,{href:"https://loaders.gl/docs/modules/3d-tiles/api-reference/cesium-ion-loader",children:(0,r.jsx)(l.code,{children:"CesiumIonLoader"})}),", ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/3d-tiles/docs/api-reference/tiles-3d-loader",children:(0,r.jsx)(l.code,{children:"Tiles3DLoader"})}),", ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/i3s/docs/api-reference/i3s-loader",children:(0,r.jsx)(l.code,{children:"I3SLoader"})}),"."]}),"\n",(0,r.jsxs)(l.h4,{id:"loadoptions",children:[(0,r.jsx)(l.code,{children:"loadOptions"})," (object, Optional)"]}),"\n",(0,r.jsxs)(l.p,{children:["On top of the ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/layer#loadoptions",children:"default options"}),", also support the following keys:"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"cesium-ion"}),": options for the ",(0,r.jsx)(l.code,{children:"CesiumIonLoader"})]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"3d-tiles"}),": options for the ",(0,r.jsx)(l.code,{children:"Tiles3DLoader"})]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"i3s"}),": options for the ",(0,r.jsx)(l.code,{children:"I3SLoader"}),"."]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"tileset"}),": Forward parameters to the ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/tiles/docs/api-reference/tileset-3d#constructor-1",children:(0,r.jsx)(l.code,{children:"Tileset3D"})})," instance after fetching the tileset metadata."]}),"\n"]}),"\n",(0,r.jsx)(l.pre,{children:(0,r.jsx)(l.code,{className:"language-ts",children:"import {CesiumIonLoader} from '@loaders.gl/3d-tiles';\nimport {Tile3DLayer} from '@deck.gl/geo-layers';
1\n\nconst layer = new Tile3DLayer({\n id: 'tile-3d-layer',\n data: 'https://assets.cesium.com/43978/tileset.json',\n loader: CesiumIonLoader,\n loadOptions: {\n tileset: {\n throttleRequests: false,\n },\n 'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}\n }\n})\n"})}),"\n",(0,r.jsxs)(l.h4,{id:"pickable",children:[(0,r.jsx)(l.code,{children:"pickable"})," (boolean, Optional)"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsx)(l.li,{children:"Default: false"}),"\n"]}),"\n",(0,r.jsxs)(l.p,{children:["When ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/developer-guide/custom-layers/picking",children:(0,r.jsx)(l.code,{children:"picking"})})," is enabled, ",(0,r.jsx)(l.code,{children:"info.object"})," will be a ",(0,r.jsx)(l.a,{href:"https://loaders.gl/docs/specifications/category-3d-tiles#tileheader-fields",children:"Tile3DHeader"})," object."]}),"\n",(0,r.jsx)(l.h3,{id:"data-accessors",children:"Data Accessors"}),"\n",(0,r.jsxs)(l.h4,{id:"getpointcolor",children:[(0,r.jsx)(l.code,{children:"getPointColor"})," (",(0,r.jsx)(l.a,{href:"/deck.gl/docs/developer-guide/using-layers#accessors",children:"Accessor<Color>"}),", Optional)"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default ",(0,r.jsx)(l.code,{children:"[0, 0, 0, 255]"})]}),"\n"]}),"\n",(0,r.jsxs)(l.p,{children:["The rgba color at the target, in ",(0,r.jsx)(l.code,{children:"r, g, b, [a]"}),". Each component is in the 0-255 range.\nThis value is only applied when ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#introduction",children:"tile format"})," is ",(0,r.jsx)(l.code,{children:"pnts"})," and no ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/specification/TileFormats/PointCloud/README.md#point-colors",children:"color properties"})," are defined in point cloud tile file."]}),"\n",(0,r.jsx)(l.h3,{id:"callbacks",children:"Callbacks"}),"\n",(0,r.jsxs)(l.h4,{id:"ontilesetload",children:[(0,r.jsx)(l.code,{children:"onTilesetLoad"})," (Function, optional)"]}),"\n",(0,r.jsxs)(l.p,{children:[(0,r.jsx)(l.code,{children:"onTilesetLoad"})," is a function that is called when Tileset JSON file is loaded. ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#tileset-json",children:"Tileset"})," object is passed in the callback."]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default: ",(0,r.jsx)(l.code,{children:"onTilesetLoad: (tileset) => {}"})]}),"\n"]}),"\n",(0,r.jsxs)(l.h4,{id:"ontileload",children:[(0,r.jsx)(l.code,{children:"onTileLoad"})," (Function, optional)"]}),"\n",(0,r.jsxs)(l.p,{children:[(0,r.jsx)(l.code,{children:"onTileLoad"})," is a function that is called when a tile in the tileset hierarchy is loaded. ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/3d-tiles/modules/3d-tiles/docs/api-reference/tile-3d",children:"Tile3D"})," object is passed in the callback."]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default: ",(0,r.jsx)(l.code,{children:"onTileLoad: (tileHeader) => {}"})]}),"\n"]}),"\n",(0,r.jsxs)(l.h4,{id:"ontileunload",children:[(0,r.jsx)(l.code,{children:"onTileUnload"})," (Function, optional)"]}),"\n",(0,r.jsxs)(l.p,{children:[(0,r.jsx)(l.code,{children:"onTileUnload"})," is a function that is called when a tile is unloaded. ",(0,r.jsx)(l.a,{href:"https://loaders.gl/modules/3d-tiles/modules/3d-tiles/docs/api-reference/tile-3d",children:"Tile3D"})," object is passed in the callback."]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default: ",(0,r.jsx)(l.code,{children:"onTileUnload: (tileHeader) => {}"})]}),"\n"]}),"\n",(0,r.jsxs)(l.h4,{id:"ontileerror",children:[(0,r.jsx)(l.code,{children:"onTileError"})," (Function, optional)"]}),"\n",(0,r.jsxs)(l.p,{children:[(0,r.jsx)(l.code,{children:"onTileError"})," is a function that is called when a tile failed to load."]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default: ",(0,r.jsx)(l.code,{children:"onTileError: (tileHeader, url, message) => {}"}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"url"}),": the url of the failed tile."]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"message"}),": the error message."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(l.h4,{id:"_getmeshcolor",children:[(0,r.jsx)(l.code,{children:"_getMeshColor"})," (Function, optional)"]}),"\n",(0,r.jsxs)(l.p,{children:[(0,r.jsx)(l.code,{children:"_getMeshColor"})," is a function which allows to change color of mesh based on properties of ",(0,r.jsx)(l.a,{href:"https://loaders.gl/docs/specifications/category-3d-tiles#tileheader-fields",children:"tileHeader"})," object.\nIt recieves ",(0,r.jsx)(l.code,{children:"tileHeader"})," object as argument and return type is array of [r, g, b] values in the 0-255 range.\nThis value is only applied when tile format is ",(0,r.jsx)(l.code,{children:"mesh"}),".\nCan be used only for I3S debugging purposes."]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["Default: ",(0,r.jsx)(l.code,{children:"_getMeshColor: (tileHeader) =>
1 [255, 255, 255]"})]}),"\n"]}),"\n",(0,r.jsx)(l.h2,{id:"sub-layers",children:"Sub Layers"}),"\n",(0,r.jsxs)(l.p,{children:["The Tile3DLayer renders the following sublayers based on tile ",(0,r.jsx)(l.a,{href:"https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification#introduction",children:"format"}),":"]}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"scenegraph"})," - a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/mesh-layers/scenegraph-layer",children:"ScenegraphLayer"})," rendering all the tiles with Batched 3D Model format (",(0,r.jsx)(l.code,{children:"b3dm"}),") or Instanced 3D Model format (",(0,r.jsx)(l.code,{children:"i3dm"}),").","\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"_lighting"})," is default to ",(0,r.jsx)(l.code,{children:"pbr"}),"."]}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"pointcloud"})," - a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/layers/point-cloud-layer",children:"PointCloudLayer"})," rendering all the tiles with Point Cloud format (",(0,r.jsx)(l.code,{children:"pnts"}),")."]}),"\n",(0,r.jsxs)(l.li,{children:[(0,r.jsx)(l.code,{children:"mesh"})," - a ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/mesh-layers/simple-mesh-layer",children:"SimpleMeshLayer"})," rendering all the tiles ESRI ",(0,r.jsx)(l.code,{children:"MeshPyramids"})," data."]}),"\n"]}),"\n",(0,r.jsxs)(l.p,{children:["Follow ",(0,r.jsx)(l.a,{href:"/deck.gl/docs/api-reference/core/composite-layer#_sublayerprops",children:"CompositeLayer"})," and example in this layer doc to see how to override sub layer props."]}),"\n",(0,r.jsx)(l.h2,{id:"remarks",children:"Remarks"}),"\n",(0,r.jsxs)(l.ul,{children:["\n",(0,r.jsxs)(l.li,{children:["The ",(0,r.jsx)(l.code,{children:"Tile3DLayer"})," can be rendered in multiple views. A tile is loaded if it is required by any of the viewports, and shared across all views via a single cache system."]}),"\n"]}),"\n",(0,r.jsx)(l.h2,{id:"source",children:"Source"}),"\n",(0,r.jsx)(l.p,{children:(0,r.jsx)(l.a,{href:"https://github.com/visgl/deck.gl/tree/master/modules/geo-layers/src/tile-3d-layer",children:"modules/geo-layers/src/tile-3d-layer"})})]})}function p(e={}){const{wrapper:l}={...(0,i.R)(),...e.components};return l?(0,r.jsx)(l,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},19365(e,l,n){n.d(l,{A:()=>t});n(96540);var s=n(34164);const r="tabItem_Ymn6";var i=n(74848);function t(e){let{children:l,hidden:n,className:t}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,s.A)(r,t),hidden:n,children:l})}},11470(e,l,n){n.d(l,{A:()=>L});var s=n(96540),r=n(34164),i=n(17559),t=n(23104),o=n(56347),a=n(205),c=n(57485),d=n(31682),h=n(70679);function u(e){var l,n;return null!=(l=null==(n=s.Children.toArray(e).filter(e=>"\n"!==e).map(e=>{if(!e||(0,s.isValidElement)(e)&&function(e){const{props:l}=e;return!!l&&"object"==typeof l&&"value"in l}(e))return e;throw new Error("Docusaurus error: Bad <Tabs> child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.')}
1))?void 0:n.filter(Boolean))?l:[]}function p(e){const{values:l,children:n}=e;return(0,s.useMemo)(()=>{const e=null!=l?l:function(e){return u(e).map(e=>{let{props:{value:l,label:n,attributes:s,default:r}}=e;return{value:l,label:n,attributes:s,default:r}})}(n);return function(e){const l=(0,d.XI)(e,(e,l)=>e.value===l.value);if(l.length>0)throw new Error('Docusaurus error: Duplicate values "'+l.map(e=>e.value).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e},[l,n])}function m(e){let{value:l,tabValues:n}=e;return n.some(e=>e.value===l)}function j(e){let{queryString:l=!1,groupId:n}=e;const r=(0,o.W6)(),i=function(e){let{queryString:l=!1,groupId:n}=e;if("string"==typeof l)return l;if(!1===l)return null;if(!0===l&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:l,groupId:n});return[(0,c.aZ)(i),(0,s.useCallback)(e=>{if(!i)return;const l=new URLSearchParams(r.location.search);l.set(i,e),r.replace(Object.assign({},r.location,{search:l.toString()}))},[i,r])]}function f(e){const{defaultValue:l,queryString:n=!1,groupId:r}
1=e,i=p(e),[t,o]=(0,s.useState)(()=>function(e){var l;let{defaultValue:n,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(n){if(!m({value:n,tabValues:s}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+s.map(e=>e.value).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}const r=null!=(l=s.find(e=>e.default))?l:s[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:l,tabValues:i})),[c,d]=j({queryString:n,groupId:r}),[u,f]=function(e){let{groupId:l}=e;const n=function(e){return e?"docusaurus.tab."+e:null}(l),[r,i]=(0,h.Dv)(n);return[r,(0,s.useCallback)(e=>{n&&i.set(e)},[n,i])]}({groupId:r}),g=(()=>{const e=null!=c?c:u;return m({value:e,tabValues:i})?e:null})();(0,a.A)(()=>{g&&o(g)},[g]);return{selectedValue:t,selectValue:(0,s.useCallback)(e=>{if(!m({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);o(e),d(e),f(e)},[d,f,i]),tabValues:i}}var g=n(92303);const x="tabList__CuJ",y="tabItem_LNqP";var b=n(74848);function v(e){let{className:l,block:n,selectedValue:s,selectValue:i,tabValues:o}=e;const a=[],{blockElementScrollPositionUntilNextRender:c}=(0,t.a_)(),d=e=>{const l=e.currentTarget,n=a.indexOf(l),r=o[n].value;r!==s&&(c(l),i(r))},h=e=>{var l;let n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var s;const l=a.indexOf(e.currentTarget)+1;n=null!=(s=a[l])?s:a[0];break}case"ArrowLeft":{var r;const l=a.indexOf(e.currentTarget)-1;n=null!=(r=a[l])?r:a[a.length-1];break}}null==(l=n)||l.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":n},l),children:o.map(e=>{let{value:l,label:n,attributes:i}=e;return(0,b.jsx)("li",Object.assign({role:"tab",tabIndex:s===l?0:-1,"aria-selected":s===l,ref:e=>{a.push(e)},onKeyDown:h,onClick:d},i,{className:(0,r.A)("tabs__item",y,null==i?void 0:i.className,{"tabs__item--active":s===l}),children:null!=n?n:l}),l)})})}function T(e){let{lazy:l,children:n,selectedValue:i}=e;const t=(Array.isArray(n)?n:[n]).filter(Boolean);if(l){const e=t.find(e=>e.props.value===i);return e?(0,s.cloneElement)(e,{className:(0,r.A)("margin-top--md",e.props.className)}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:t.map((e,l)=>(0,s.cloneElement)(e,{key:l,hidden:e.props.value!==i}))})}function k(e){const l=f(e);return(0,b.jsxs)("div",{className:(0,r.A)(i.G.tabs.container,"tabs-container",x),children:[(0,b.jsx)(v,Object.assign({},l,e)),(0,b.jsx)(T,Object.assign({},l,e))]})}function L(e){const l=(0,g.A)();return(0,b.jsx)(k,Object.assign({},e,{children:u(e.children)}),String(l))}},28453(e,l,n){n.d(l,{R:()=>t,x:()=>o});var s=n(96540);const r={},i=s.createContext(r);function t(e){const l=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(l):{...l,...e}},[l,e])}function o(e){let l;return l=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:t(e.components),s.createElement(i.Provider,{value:l},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.