340 lines
10 KiB
HTML
340 lines
10 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang='en'>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset='UTF-8'>
|
||
|
|
<title>Maps</title>
|
||
|
|
|
||
|
|
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
|
||
|
|
<link rel='stylesheet' href='../../../css/doctest.css'>
|
||
|
|
|
||
|
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||
|
|
<script src="../../../dist/iwmlib.js"></script>
|
||
|
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.inline-showcase {
|
||
|
|
display: flex
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-example {
|
||
|
|
display: inline-block;
|
||
|
|
width: 256px;
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload='Doctest.run()'>
|
||
|
|
<h1>Maps</h1>
|
||
|
|
<p>Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods to
|
||
|
|
handle the maps.</p>
|
||
|
|
|
||
|
|
<h2>Cover Test</h2>
|
||
|
|
<p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option.
|
||
|
|
This option allows the
|
||
|
|
</p>
|
||
|
|
<canvas id="big_map">
|
||
|
|
|
||
|
|
</canvas>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// let iwm = { x: 48.52454, y: 9.05468 }
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// let luftbildMap = new DeepZoomMap(luftbildData, luftbildConfig, { alpha: 0.8, cover: true, onTransform: transformed.bind(this) })
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// const app = window.app = new MapApp({
|
||
|
|
// transparent: false,
|
||
|
|
// backgroundColor: 0x00ffff,
|
||
|
|
// view: big_map,
|
||
|
|
// root: "../",
|
||
|
|
// width: 512,
|
||
|
|
// height: 512,
|
||
|
|
// coordsLogging: true,
|
||
|
|
// focus: iwm,
|
||
|
|
// zoom: 18
|
||
|
|
// })
|
||
|
|
// app.setup().run()
|
||
|
|
|
||
|
|
// let markerLayer = new GeoLayer({ name: "Marker Layer" })
|
||
|
|
// let iwmMarker = new GeoPoint(iwm)
|
||
|
|
|
||
|
|
// let marker = new PIXI.Graphics()
|
||
|
|
// marker.beginFill(0xFF6900)
|
||
|
|
// marker.drawCircle(0, 0, 1)
|
||
|
|
// marker.endFill()
|
||
|
|
// iwmMarker.graphics.addChild(marker)
|
||
|
|
|
||
|
|
// markerLayer.place(iwmMarker)
|
||
|
|
// app.mapLayer.place(markerLayer)
|
||
|
|
|
||
|
|
// app.setMap("luftbild", luftbildMap)
|
||
|
|
|
||
|
|
// function transformed(e) {
|
||
|
|
// markerLayer.adapt(app.map)
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
<h2>Map Types</h2>
|
||
|
|
<div class="inline-showcase">
|
||
|
|
<div class="map-example">
|
||
|
|
<canvas id="imagemap_canvas"></canvas>
|
||
|
|
|
||
|
|
<h3>Image Map</h3>
|
||
|
|
<p>A map, that is represented by a single image.</p>
|
||
|
|
</div>
|
||
|
|
<div class="map-example">
|
||
|
|
<canvas id="dzi_canvas"></canvas>
|
||
|
|
<h3>Deep Zoom Map</h3>
|
||
|
|
<p>The map representation is a DeepZoomImage, that can be scaled much more deeply, without losing quality by increasing
|
||
|
|
the amount of tiles, that represent the image.</p>
|
||
|
|
<p>
|
||
|
|
You should see a map of the world with a set of cities highlighted with dots. When pressing the button all views should jump
|
||
|
|
to the same point.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script class='doctest'>
|
||
|
|
|
||
|
|
let osmConfig = {
|
||
|
|
"projection": "mercator",
|
||
|
|
"type": "deepzoom",
|
||
|
|
"tiles": {
|
||
|
|
"tileSize": 256,
|
||
|
|
"format": "png",
|
||
|
|
"overlap": 0,
|
||
|
|
"type": "map",
|
||
|
|
"height": 1024,
|
||
|
|
"width": 1024,
|
||
|
|
"path": "../../examples/osm",
|
||
|
|
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const Berlin = { x: 52.514961, y: 13.401366 }
|
||
|
|
|
||
|
|
const deepZoomExampleApp = new MapApp({
|
||
|
|
view: dzi_canvas,
|
||
|
|
root: "../",
|
||
|
|
width: 256,
|
||
|
|
height: 256,
|
||
|
|
coordsLogging: true,
|
||
|
|
focus: Berlin
|
||
|
|
})
|
||
|
|
|
||
|
|
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles,{
|
||
|
|
app:deepZoomExampleApp
|
||
|
|
})
|
||
|
|
|
||
|
|
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:deepZoomExampleApp}), { cover: false })
|
||
|
|
|
||
|
|
deepZoomExampleApp.setMap("deepzoom", deepZoomMap)
|
||
|
|
|
||
|
|
|
||
|
|
deepZoomExampleApp.setup().run()
|
||
|
|
console.log(deepZoomMap)
|
||
|
|
|
||
|
|
|
||
|
|
// let imageApp = new MapApp({
|
||
|
|
// view: imagemap_canvas,
|
||
|
|
// width: 256,
|
||
|
|
// height: 256,
|
||
|
|
// focus: constanceRhineBridge,
|
||
|
|
// coordsLogging: true,
|
||
|
|
// })
|
||
|
|
|
||
|
|
// imageApp.setup().run()
|
||
|
|
|
||
|
|
// let germany = "./examples/germany.jpg"
|
||
|
|
|
||
|
|
// imageApp.loadSprites([
|
||
|
|
// germany
|
||
|
|
// ], (sprites) => ready(sprites), { resolutionDependent: false })
|
||
|
|
|
||
|
|
// let ready = (sprites) => {
|
||
|
|
// let imageMap = new ImageMap(sprites.get(germany), germanyData,{
|
||
|
|
// cover: false
|
||
|
|
// })
|
||
|
|
// imageApp.setMap("germany", imageMap)
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// TODO Fix this when 'stadtplan' is available again.
|
||
|
|
// let stadtplanConfig = tilesConfig["luftbild_2017"]
|
||
|
|
// stadtplanConfig.path = "../" + stadtplanConfig.path
|
||
|
|
// let dziData = new MapData(MERCATOR, {
|
||
|
|
// clip: {
|
||
|
|
// "min": { x: 48.464967, y: 8.979732 },
|
||
|
|
// "max": { x: 48.5674, y: 9.2817 }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<h1>Movement</h1>
|
||
|
|
<p>
|
||
|
|
Its crucial to focus certain points in a map application. The following tests the behavioud of maps inside a mapapp and maps
|
||
|
|
inside of windows.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
<h2>Map Frame</h2>
|
||
|
|
<p>
|
||
|
|
The map's frame specifies the stage of the map. When moving to the focus point normally, the map focuses in the center, the
|
||
|
|
frame defines the new area, the map will be centered in. This is important when trying to mask a map.
|
||
|
|
</p>
|
||
|
|
<canvas id="canv_0"></canvas>
|
||
|
|
<div class="controls">
|
||
|
|
<button id="swapBtn_0">Change Map</button>
|
||
|
|
<button id="nextCapital">Next Capital</button>
|
||
|
|
<input type="number" name="0" id="animationTime" min="0" value="0.35">
|
||
|
|
<span id="msg"></span>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
let visiting = 0
|
||
|
|
|
||
|
|
capitals = {
|
||
|
|
abidjan: { x: 5.349470, y: -4.006472 },
|
||
|
|
berlin: { x: 52.525430, y: 13.385291 },
|
||
|
|
canberra: { x: -35.282025, y: 149.128648 },
|
||
|
|
capetown: { x: -33.925448, y: 18.416962 },
|
||
|
|
moscow: { x: 55.750892, y: 37.622799 },
|
||
|
|
washington: { x: 38.895650, y: -77.031407 },
|
||
|
|
rio: { x: -22.871400, y: -43.280490 },
|
||
|
|
tokio: { x: 35.696278, y: 139.731366 }
|
||
|
|
}
|
||
|
|
|
||
|
|
let pointApp = window.app = new MapApp({
|
||
|
|
view: canv_0,
|
||
|
|
width: 512,
|
||
|
|
height: 512,
|
||
|
|
coordsLogging: true
|
||
|
|
})
|
||
|
|
|
||
|
|
let movementMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:pointApp}), { cover: false })
|
||
|
|
|
||
|
|
pointApp.setMap("deepzoom", movementMap)
|
||
|
|
pointApp.setup().run()
|
||
|
|
|
||
|
|
// var osmworld = "examples/world_square.png"
|
||
|
|
// var world2 = "examples/world.jpg"
|
||
|
|
|
||
|
|
// let worlOSMdData = new MapData(MERCATOR)
|
||
|
|
|
||
|
|
// let world2Data = new MapData(MERCATOR, {
|
||
|
|
// translate: { x: 0, y: -11.035417 },
|
||
|
|
// clip: {
|
||
|
|
// min: { x: -69.870531, y: -180 },
|
||
|
|
// max: { x: 85, y: 180 }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
|
||
|
|
// // The sprites of image maps should be loaded by the
|
||
|
|
// // apps resources loader.
|
||
|
|
// pointApp.loadSprites([
|
||
|
|
// osmworld,
|
||
|
|
// world2
|
||
|
|
// ], (sprites) => point_ready(sprites), { resolutionDependent: false })
|
||
|
|
|
||
|
|
|
||
|
|
let frame = new PIXI.Graphics()
|
||
|
|
frame.beginFill(0xFFFFFF, 0.5)
|
||
|
|
const border = 4
|
||
|
|
frame.lineStyle(border, 0xff0000, 0.8)
|
||
|
|
frame.drawRect(border / 2, border / 2, pointApp.width / 2, pointApp.height / 2)
|
||
|
|
const focusWidth = 4
|
||
|
|
frame.endFill()
|
||
|
|
frame.drawCircle(pointApp.width / 4 + border / 2, pointApp.height / 4 + border / 2, 10)
|
||
|
|
|
||
|
|
frame.interactive = true
|
||
|
|
|
||
|
|
new DisplayObjectScatter(frame)
|
||
|
|
frame.scatter.position = { x: 50, y: 50 }
|
||
|
|
|
||
|
|
function placeCapitals(maplayer){
|
||
|
|
let capitalLayer = new GeoLayer({ name: "Capital Overlay" })
|
||
|
|
|
||
|
|
for (key in capitals) {
|
||
|
|
let capitalPoint = new GeoPoint(capitals[key], {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* To style GeoGraphics, the fill has to be set in the
|
||
|
|
* onDraw callback.
|
||
|
|
*
|
||
|
|
* Note: GeoPoints are the only GeoGraphic with no
|
||
|
|
* initial geometry attached. These have to be drawn to
|
||
|
|
* the graphics object manually.
|
||
|
|
*/
|
||
|
|
onDraw: function () {
|
||
|
|
this.graphics.beginFill(0xFF0000)
|
||
|
|
this.graphics.drawCircle(0, 0, 5)
|
||
|
|
this.graphics.endFill()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
capitalLayer.place(capitalPoint)
|
||
|
|
}
|
||
|
|
|
||
|
|
maplayer.place(capitalLayer)
|
||
|
|
capitalLayer.adapt(pointApp.map)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script class="doctest">
|
||
|
|
// function point_ready(sprites) {
|
||
|
|
// let maps_0 = ["world", "world2"]
|
||
|
|
|
||
|
|
// let sprite = sprites.get(osmworld)
|
||
|
|
|
||
|
|
// let worldOSMMap = new ImageMap(sprite, worlOSMdData, {
|
||
|
|
// cover: false,
|
||
|
|
// onLoaded: () => {
|
||
|
|
// worldOSMMap.setFrame(frame)
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// pointApp.setMap(maps_0[0], worldOSMMap)
|
||
|
|
|
||
|
|
// let world2Map = new ImageMap(sprites.get(world2), world2Data, {
|
||
|
|
// cover: false,
|
||
|
|
// startScale: 1,
|
||
|
|
// onLoaded: function () {
|
||
|
|
// this.setFrame(frame)
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
|
||
|
|
// pointApp.addMap(maps_0[1], world2Map)
|
||
|
|
// pointApp.pixiLayer.place(frame)
|
||
|
|
|
||
|
|
|
||
|
|
placeCapitals(pointApp.mapLayer)
|
||
|
|
|
||
|
|
let active_0 = 0
|
||
|
|
swapBtn_0.addEventListener("click", () => {
|
||
|
|
active_0++
|
||
|
|
pointApp.selectMap(maps_0[active_0 % maps_0.length])
|
||
|
|
})
|
||
|
|
|
||
|
|
nextCapital.addEventListener("click", () => {
|
||
|
|
let keys = Object.keys(capitals)
|
||
|
|
visiting = (++visiting) % keys.length
|
||
|
|
let key = keys[visiting]
|
||
|
|
console.log(key)
|
||
|
|
|
||
|
|
pointApp.map.moveTo(capitals[key], null, { animate: parseFloat(animationTime.value) })
|
||
|
|
msg.innerHTML = "Visiting " + key + "."
|
||
|
|
})
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|