92 lines
2.6 KiB
HTML
92 lines
2.6 KiB
HTML
<!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>
|