ROOT_URL = original_url
autoHighlight = true
moonLayer = new deck.TileLayer({
pickable: autoHighlight,
tileSize: dimensions.tileSize,
autoHighlight,
highlightColor: [0, 0, 255, 100],
minZoom: -7,
maxZoom: 0,
extent: [0, 0, dimensions.width, dimensions.height],
getTileData: getTileData,
onViewportLoad: getMetaData,
renderSubLayers: renderSubLayers
});
layers = [moonLayer]
deckgl.setProps({layers: layers});
deckgl = {
// This is an Observable hack: clear previously generated content
// reference: https://observablehq.com/@tomvantilburg/deckgl-mapbox-and-3d-tiles
container.innerHTML = '';
const view = new deck.OrthographicView({id: 'ortho'})
return new deck.DeckGL({
container,
views:[view],
initialViewState:INITIAL_VIEW_STATE,
controller: true,
});
}
inst_height = 850
dimensions = ({
'height': 24000,
'width': 24000,
'tileSize':512
})
original_url = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'
new_url = 'https://raw.githubusercontent.com/cornhundred/deck.gl-data/master/website/image-tiles/moon.image'
INITIAL_VIEW_STATE = ({
target: [13000, 13000, 0],
zoom: -5
})
ROOT_URL
// 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;
var full_url = `${ROOT_URL}/moon.image_files/${15 + z}/${x}_${y}.jpeg`
// console.log('x', x)
// console.log('y', y)
// console.log('z', z)
// console.log('full url', full_url)
return loaders.load(full_url);
}
renderSubLayers = props => {
console.log('renderSubLayers')
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)
]
});
}
getMetaData = async () => {
// console.log('getMetaData')
const dziSource = `${ROOT_URL}/moon.image.dzi`;
const response = await fetch(dziSource);
const xmlText = await response.text();
const dziXML = new DOMParser().parseFromString(xmlText, 'text/xml');
if (Number(dziXML.getElementsByTagName('Image')[0].attributes.Overlap.value) !== 0) {
// eslint-disable-next-line no-undef, no-console
console.warn('Overlap parameter is nonzero and should be 0');
}
// may set dimensions here using mutable
// console.log(Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value))
// // trying to bring in getMetaData function
// 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)
};
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')
clamp = mathGl.clamp
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.
