220 lines
7.2 KiB
HTML
220 lines
7.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
|
||
|
|
<title>DeepZoomImage Doctests</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css">
|
||
|
|
<link rel="stylesheet" href="../../../css/doctest.css">
|
||
|
|
|
||
|
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
<script src="../../3rdparty/all.js"></script>
|
||
|
|
<script src="../../3rdparty/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<script src="../../all.js"></script>
|
||
|
|
<script src="../all.js"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
#app {
|
||
|
|
display: table;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#app > * {
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="Doctest.run()">
|
||
|
|
<h1>Double DeepZoomImage</h1>
|
||
|
|
<p>
|
||
|
|
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
||
|
|
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
||
|
|
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
||
|
|
as possible.
|
||
|
|
</p>
|
||
|
|
<br />
|
||
|
|
<div id="div1" style="float: left;"></div>
|
||
|
|
<div id="div2" style="float: right;"></div>
|
||
|
|
<div style="clear: left; margin-top: 540px;" />
|
||
|
|
<script class="doctest">
|
||
|
|
|
||
|
|
// deepZoom
|
||
|
|
//--------------------
|
||
|
|
const deepZoomInfo = new DeepZoomInfo({
|
||
|
|
"tileSize": 128,
|
||
|
|
"format": "jpg",
|
||
|
|
"overlap": 0,
|
||
|
|
"type": "map",
|
||
|
|
"height": 4096,
|
||
|
|
"width": 4096,
|
||
|
|
"path": "../assets/maps/test",
|
||
|
|
"urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
|
||
|
|
})
|
||
|
|
// const deepZoomInfo = new DeepZoomInfo({
|
||
|
|
// compression: [
|
||
|
|
// "dds"
|
||
|
|
// ],
|
||
|
|
// clip: {
|
||
|
|
// minLevel: 12,
|
||
|
|
// maxLevel: 20,
|
||
|
|
// startCol: 275215,
|
||
|
|
// startRow: 181050,
|
||
|
|
// bounds: {
|
||
|
|
// min: [48.458353, 8.96484374976547],
|
||
|
|
// max: [48.5747899110263, 9.14062499976523]
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// tileSize: 512,
|
||
|
|
// format: "png",
|
||
|
|
// overlap: 0,
|
||
|
|
// type: "map",
|
||
|
|
// height: 131072,
|
||
|
|
// width: 131072,
|
||
|
|
// path: "../../../var/tuesch/luftbild_2016_full",
|
||
|
|
// urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
|
||
|
|
// })
|
||
|
|
|
||
|
|
// app
|
||
|
|
//--------------------
|
||
|
|
window.app = new PIXIApp({
|
||
|
|
width: 400,
|
||
|
|
height: 500,
|
||
|
|
backgroundColor: 0xFFCCCCCC
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
div1.appendChild(app.view)
|
||
|
|
|
||
|
|
// create the ScatterContainer
|
||
|
|
//--------------------
|
||
|
|
const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
|
||
|
|
app.scene.addChild(scatterContainer1)
|
||
|
|
|
||
|
|
// Create the DeepZoomImage
|
||
|
|
//--------------------
|
||
|
|
setTimeout(() => {
|
||
|
|
const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
|
||
|
|
deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
|
||
|
|
minScale: 0,
|
||
|
|
maxScale: 50,
|
||
|
|
onTransform: event => {
|
||
|
|
console.log('currentLevel', deepZoomImage1.currentLevel)
|
||
|
|
deepZoomImage1.transformed(event)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
scatterContainer1.addChild(deepZoomImage1)
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
|
||
|
|
// app2
|
||
|
|
//--------------------
|
||
|
|
const app2 = new PIXIApp({
|
||
|
|
width: 400,
|
||
|
|
height: 500,
|
||
|
|
backgroundColor: 0xFFCCCCCC
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
div2.appendChild(app2.view)
|
||
|
|
|
||
|
|
// create the ScatterContainer
|
||
|
|
//--------------------
|
||
|
|
const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
|
||
|
|
app2.scene.addChild(scatterContainer2)
|
||
|
|
|
||
|
|
// Create the DeepZoomImage
|
||
|
|
//--------------------
|
||
|
|
const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
|
||
|
|
deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
|
||
|
|
minScale: 0,
|
||
|
|
maxScale: 100,
|
||
|
|
onTransform: (event) => {
|
||
|
|
deepZoomImage2.transformed(event)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
scatterContainer2.addChild(deepZoomImage2)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<h1>DeepZoomImage in DeepZoomImage</h1>
|
||
|
|
<p>
|
||
|
|
The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
|
||
|
|
the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
|
||
|
|
tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
|
||
|
|
as possible.
|
||
|
|
</p>
|
||
|
|
<br />
|
||
|
|
<div id="div3"></div>
|
||
|
|
<script class="doctest">
|
||
|
|
|
||
|
|
// app3
|
||
|
|
//--------------------
|
||
|
|
const app3 = new PIXIApp({
|
||
|
|
width: 900,
|
||
|
|
height: 500,
|
||
|
|
backgroundColor: 0xFFCCCCCC
|
||
|
|
}).setup().run()
|
||
|
|
|
||
|
|
window.app3 = app3
|
||
|
|
|
||
|
|
div3.appendChild(app3.view)
|
||
|
|
|
||
|
|
// create the ScatterContainer
|
||
|
|
//--------------------
|
||
|
|
const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
|
||
|
|
app3.scene.addChild(scatterContainer3)
|
||
|
|
|
||
|
|
// Create the DeepZoomImage
|
||
|
|
//--------------------
|
||
|
|
const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
||
|
|
deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
|
||
|
|
minScale: 0,
|
||
|
|
maxScale: 100,
|
||
|
|
startScale: 2,
|
||
|
|
autoBringToFront: false,
|
||
|
|
onTransform: (event) => {
|
||
|
|
deepZoomImage3.transformed(event)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
app3._deepZoomImage3 = deepZoomImage3
|
||
|
|
|
||
|
|
scatterContainer3.addChild(deepZoomImage3)
|
||
|
|
|
||
|
|
// Create the second DeepZoomImage
|
||
|
|
//--------------------
|
||
|
|
const border = new PIXI.Graphics()
|
||
|
|
border.beginFill(0x282828, 1)
|
||
|
|
border.drawRect(0, 0, 264, 244)
|
||
|
|
scatterContainer3.addChild(border)
|
||
|
|
|
||
|
|
const mask = new PIXI.Graphics()
|
||
|
|
mask.beginFill(0x282828, 1)
|
||
|
|
mask.drawRect(0, 0, 260, 240)
|
||
|
|
scatterContainer3.addChild(mask)
|
||
|
|
|
||
|
|
const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
|
||
|
|
deepZoomImage4.x = 4
|
||
|
|
deepZoomImage4.y = 4
|
||
|
|
deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
|
||
|
|
minScale: 0,
|
||
|
|
maxScale: 100,
|
||
|
|
onTransform: (event) => {
|
||
|
|
deepZoomImage4.transformed(event)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
deepZoomImage4.mask = mask
|
||
|
|
|
||
|
|
app3._deepZoomImage4 = deepZoomImage4
|
||
|
|
|
||
|
|
scatterContainer3.addChild(deepZoomImage4)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|