deck.gl
deck.gl copied to clipboard
maplibre load 3dtileset,did't show the model
Description
when i use maplibre load 3dtileset , my code like this:
import maplibregl, { ResourceType } from 'maplibre-gl'
import { MapboxOverlay } from '@deck.gl/mapbox'
import { Tile3DLayer } from '@deck.gl/geo-layers'
import { Tiles3DLoader } from '@loaders.gl/3d-tiles'
this.map = new maplibregl.Map({
container: targetId, // container id
style: 'https://demotiles.maplibre.org/style.json',
center: [115.75, 39.68], // starting position [lng, lat]
zoom: 10,
maxPitch: 85,
pitch: 45,
bearing: 0,
canvasContextAttributes: { antialias: true }
})
let deckOverlay = new MapboxOverlay({
interleaved: true,
layers: []
})
this.map?.addControl(deckOverlay)
this.map.on('load', () => {
const layer = new Tile3DLayer({
id: 'tile-3d-layer',
name: 'tile-3d-layer',
data: 'xxxx/tileset.json',
loader: Tiles3DLoader,
extruded: true, // 设置3D功能
opacity: 1, // 设置透明度
loadOptions: {
'3d-tiles': {
loadGLTF: false,
decodeQuantizedPositions: false,
isTileset: true,
assetGltfUpAxis: 'Z'
}
},
pickable: true, // 设置可选取
onTilesetError: (err) => {
console.log(22, err)
},
onTilesetLoad: (tileset) => {
console.log(55, tileset)
const { cartographicCenter, zoom } = tileset
deckOverlay.setProps({
initialViewState: {
longitude: cartographicCenter[0],
latitude: cartographicCenter[1],
zoom
}
})
this.map?.jumpTo({
center: [cartographicCenter[0], cartographicCenter[1]],
zoom
})
},
pointSize: 2
})
deckOverlay.setProps({ layers: [layer] })
})
but model did't show on the map, but the method 'onTilesetLoad' invoked,what should i do to solve the problem,waiting for your reply,thanks a lot
Flavors
- [ ] Script tag
- [x] React
- [ ] Python/Jupyter notebook
- [x] MapboxOverlay
- [ ] GoogleMapsOverlay
- [ ] CARTO
- [ ] ArcGIS
Expected Behavior
can show model
Steps to Reproduce
please look at above code
Environment
- Framework version: 15.0.1
- Browser: chrome
- OS: macos
Logs
No response