moonLayer = new deck.TileLayer({
pickable: autoHighlight,
tileSize: dimensions.tileSize,
autoHighlight,
highlightColor: [0, 0, 255, 25],
minZoom: -7,
maxZoom: 0,
extent: [0, 0, dimensions.width, dimensions.height],
getTileData: getTileData,
// onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers,
});
layers = [moonLayer]
deckgl.setProps({layers: layers});
view = new deck.OrthographicView({id: 'ortho'})
deckgl = {
// This is an Observable hack: clear previously generated content
// reference: https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
container.innerHTML = '';
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
});
}
autoHighlight = false
ROOT_URL = 'https://raw.githubusercontent.com/cornhundred/test_vips/main/'
inst_height = 850
INITIAL_VIEW_STATE = ({
target: [13000, 13000, 0],
zoom: -6
})
clamp = mathGl.clamp
max_zoom = 16
// the getTileData function has been updated to use a single index
// see https://deck.gl/docs/api-reference/geo-layers/tile-layer#gettiledata
getTileData = ({index}) => {
const {x, y, z} = index;
// console.log('xyz', x, y, z)
var full_url = `${ROOT_URL}/brain.image_files/${max_zoom + z}/${x}_${y}.jpeg`
return loaders.load(full_url);
}
renderSubLayers = props => {
const {
bbox: {left, bottom, right, top}
} = props.tile;
const {width, height} = dimensions;
return new deck.BitmapLayer(props, {
data: null,
image: props.data,
bounds: [
clamp(left, 0, width),
clamp(bottom, 0, height),
clamp(right, 0, width),
clamp(top, 0, height)
]
});
}
response = await fetch(`${ROOT_URL}/brain.image.dzi`)
xmlText = response.text()
dziXML = new DOMParser().parseFromString(xmlText, 'text/xml')
dimensions = {
var dimensions = {}
dimensions.height = Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value),
dimensions.width = Number(dziXML.getElementsByTagName('Size')[0].attributes.Width.value),
dimensions.tileSize = Number(dziXML.getElementsByTagName('Image')[0].attributes.TileSize.value)
return dimensions
}
deck = require.alias({
// optional dependencies
h3: {}
})('deck.gl@latest/dist.min.js')
// https://observablehq.com/@jamesleesaunders/calculating-vector-rotations
mathGl = require('https://bundle.run/math.gl@2.3.3')
loaders = deck && window.loaders
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
