<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DeepZoomImage Worker 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="../../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../../dist/iwmlib.js"></script>
<script src="../../../../dist/iwmlib.pixi.js"></script>
<style>
#app {
display: table;
margin: 0 auto;
}
#app > * {
margin-bottom: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>DeepZoomImage with tiles loaded by a worker...</h1>
<p>...using the dist variants.</p>
<br />
<div id="div1"></div>
<script class="doctest">
// deepZoom
//--------------------
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: "../../../../Tuesch/var/luftbild/2018",
urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
})
// app
//--------------------
const app = new PIXIApp({
width: 800,
height: 500
}).setup().run()
div1.appendChild(app.view)
// create the ScatterContainer
//--------------------
const scatterContainer = new ScatterContainer(app.renderer, {showBounds: true, app: app})
app.scene.addChild(scatterContainer)
// Create the DeepZoomImage
//--------------------
const deepZoomImage = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer, useWorker: '../tileloader.js'})
deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
minScale: 0,
maxScale: 50,
onTransform: event => {
deepZoomImage.transformed(event)
}
})
scatterContainer.addChild(deepZoomImage)
</script>
</body>
</html>