// ROOT_URL = 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/image-tiles/moon.image'
// //deck.gl-data/website/image-tiles/moon.image/
// ROOT_URL = 'https://raw.githubusercontent.com/cornhundred/test_vips/main/'
// // https://github.com/cornhundred/test_vips/tree/main/brain.image_files
ROOT_URL = 'https://raw.githubusercontent.com/cornhundred/test_vips/main/ffpe_showcase/'
autoHighlight = false
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,
renderSubLayers: renderSubLayers,
// onViewportLoad: getMetaData,
// opacity: 0.2
});
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
// 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: [20000, 20000, 0],
zoom: -6
})
max_zoom = 16
image_name = 'dapi'
// 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}/${image_name}.image_files/${max_zoom + z}/${x}_${y}.jpeg`
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)
]
});
}
response_2 = await fetch('https://raw.githubusercontent.com/cornhundred/test_vips/main/ffpe_showcase//dapi.image.dzi')
response_2.text()
response = await fetch(`${ROOT_URL}/${image_name}.image.dzi`)
xmlText = response.text()
dziXML = new DOMParser().parseFromString(xmlText, 'text/xml')
// dimensions = ({
// 'height': 30655,
// 'width': 44543,
// 'tileSize':512
// })
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
}
// getMetaData = async () => {
// // console.log('getMetaData')
// const dziSource = `${ROOT_URL}/brain.image.dzi`;
// const response = await fetch(dziSource);
// const xmlText = await response.text();
// const dziXML = new DOMParser().parseFromString(xmlText, 'text/xml');
// // console.log('XML metadata')
// // console.log(dziXML)
// 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)
// console.log(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')
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.
