From 58cbd44a7b38aaf87f347ee6b15304faa1d43119 Mon Sep 17 00:00:00 2001
From: Severin Opel
Date: Mon, 11 Nov 2019 12:34:43 +0100
Subject: [PATCH] Fixed map doctest.
---
lib/pixi/assets/maps/osm/tilesConfig.json | 14 +
lib/pixi/assets/maps/pixabay/mapdata.json | 12 +
lib/pixi/maps/geolayer.js | 44 +-
lib/pixi/maps/map.js | 77 +---
lib/pixi/maps/mapapp.html | 61 ++-
lib/pixi/maps/mapapp.js | 30 --
lib/pixi/maps/maps.html | 486 +++++++++++++---------
7 files changed, 394 insertions(+), 330 deletions(-)
create mode 100644 lib/pixi/assets/maps/osm/tilesConfig.json
create mode 100644 lib/pixi/assets/maps/pixabay/mapdata.json
diff --git a/lib/pixi/assets/maps/osm/tilesConfig.json b/lib/pixi/assets/maps/osm/tilesConfig.json
new file mode 100644
index 0000000..98d08f6
--- /dev/null
+++ b/lib/pixi/assets/maps/osm/tilesConfig.json
@@ -0,0 +1,14 @@
+{
+ "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}"
+ }
+}
\ No newline at end of file
diff --git a/lib/pixi/assets/maps/pixabay/mapdata.json b/lib/pixi/assets/maps/pixabay/mapdata.json
new file mode 100644
index 0000000..36bbe5d
--- /dev/null
+++ b/lib/pixi/assets/maps/pixabay/mapdata.json
@@ -0,0 +1,12 @@
+{
+ "clip": {
+ "min": {
+ "x": 32.863294,
+ "y": -18.58
+ },
+ "max": {
+ "x": 57.467973,
+ "y": 44.277158
+ }
+ }
+}
\ No newline at end of file
diff --git a/lib/pixi/maps/geolayer.js b/lib/pixi/maps/geolayer.js
index ab19f4f..319346d 100644
--- a/lib/pixi/maps/geolayer.js
+++ b/lib/pixi/maps/geolayer.js
@@ -163,26 +163,33 @@ export class MapLayer extends GeoLayer {
const min = visibility.min || 0
const max = visibility.max || Number.MAX_VALUE
- if (zoom > min && zoom < max) {
- this.elements.forEach(it => (it.visible = true))
+ // TODO
+ // Currently I dont know what elemnts was.
+ // We just log an error and resolve this on a later point.
+ if (this.elements) {
+ if (zoom > min && zoom < max) {
+ this.elements.forEach(it => (it.visible = true))
- this.elements.forEach(it => {
- const scale = 1 / it.parent.scale.x
+ this.elements.forEach(it => {
+ const scale = 1 / it.parent.scale.x
- // it.children are poi groups
- // it.children[0] is the poi group of the tübingen poi
- // it.children[0].children are the text containers (not PIXI.Text), about 20 pieces
+ // it.children are poi groups
+ // it.children[0] is the poi group of the tübingen poi
+ // it.children[0].children are the text containers (not PIXI.Text), about 20 pieces
- if (it.children.length > 0) {
- it.children[0].children.forEach(poi => {
- if (poi.children.length === 1) {
- poi.scale.set(scale, scale)
- }
- })
- }
- })
- } else {
- this.elements.forEach(it => (it.visible = false))
+ if (it.children.length > 0) {
+ it.children[0].children.forEach(poi => {
+ if (poi.children.length === 1) {
+ poi.scale.set(scale, scale)
+ }
+ })
+ }
+ })
+ } else {
+ this.elements.forEach(it => (it.visible = false))
+ }
+ }else{
+ console.error("DEBUG: Elements was not defined.")
}
}
}
@@ -236,6 +243,8 @@ export class MapLayer extends GeoLayer {
useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.*/
) {
if (map instanceof GeoMap) {
+
+ console.log("Change map to: " , map)
let oldMap = this.map
if (oldMap) oldMap.unload()
@@ -243,6 +252,7 @@ export class MapLayer extends GeoLayer {
this.map.load()
this.scatterContainer.addChild(this.map.image)
+ console.log(this.map.image.parent)
map.image.addChild(this.displayObject)
this.mapview.update(this.map)
diff --git a/lib/pixi/maps/map.js b/lib/pixi/maps/map.js
index 578de7c..349b125 100644
--- a/lib/pixi/maps/map.js
+++ b/lib/pixi/maps/map.js
@@ -130,11 +130,8 @@ export class GeoMap {
}
unload() {
- console.log('unload', this, this.image)
if (this.image) {
- console.log('removeScatter')
if (this.image.parent) {
- console.log('Remove from parent')
this.image.parent.removeChild(this.image)
}
this.image.scatter = null
@@ -383,6 +380,7 @@ export class GeoMap {
if (GeoMap._validateJson(json, error)) {
for (let [mapname, data] of Object.entries(json)) {
maps[mapname] = GeoMap._createMap(data)
+ maps[mapname].name = mapname
}
} else console.error('Could not validate JSON: ' + error.message)
@@ -556,7 +554,6 @@ export class DeepZoomMap extends GeoMap {
*/
load(container = null, scatter = null) {
this.info = new DeepZoomInfo(this.tilesConfig)
- console.log('APP:', this.mapdata.app)
let image = new DeepZoomImage(this.info, {
app: this.mapdata.app,
alpha: this.alpha,
@@ -614,7 +611,6 @@ export class DeepZoomMap extends GeoMap {
// Don't scale beyond boundaries.
if (this.maxScale) targetScale = Math.min(this.maxScale, targetScale)
-
if (this.minScale) targetScale = Math.max(targetScale, this.minScale)
this.image.scatter.requestScale(targetScale)
@@ -626,15 +622,12 @@ export class DeepZoomMap extends GeoMap {
let containerCenter
if (this.frame) {
- containerCenter = this.getFrame().localCenter
- //console.log("HAS FRAME: ", containerCenter)
+ containerCenter = this.getFrame().center
} else {
containerCenter = {
x: this.image.parent.width / 2,
y: this.image.parent.height / 2
}
-
- //console.log("GET CONTAINER CENTER")
}
//Calculate the delta depending on image position and center the
@@ -643,7 +636,6 @@ export class DeepZoomMap extends GeoMap {
x: containerCenter.x - point.x * this.image.scatter.scale - this.scatter.position.x,
y: containerCenter.y - point.y * this.image.scatter.scale - this.scatter.position.y
}
- // console.log("MOVE TO: " , this.image.scatter.translatable,point, delta)
if (animate > 0) {
let last = 0
@@ -694,25 +686,6 @@ export class DeepZoomMap extends GeoMap {
viewport: this.viewport
})
- //TODO: If frame is not set, the map does not work anymore.
-
- //map.load(container, scatter)
-
- // this.image.parent.children.forEach(child=>{
- // if(child instanceof PIXI.DisplayObject){
-
- // if(child instanceof PIXI.Graphics){
- // // let clone = child.clone()
- // // const position = child.position
- // // clone.position.set(position.x, position.y)
- // // map.addChild(clone)
- // // console.log(map.mapLayer)
-
- // }else console.log("DisplayObject is not yet implemented for cloning.", child)
-
- // }else console.error("Not implemented object to clone: ", child)
- // })
-
return map
}
@@ -765,7 +738,6 @@ export class ImageMap extends GeoMap {
load(container = null, scatter = null) {
super.load(this.sprite, container, scatter)
- console.log('LOADED')
this.image.alpha = this.alpha
this.image.interactive = true
}
@@ -785,19 +757,9 @@ export class ImageMap extends GeoMap {
})
map.load(container, scatter)
- console.log(map.image)
return map
}
- // transformed(e) {
- // for (let key in this.overlays) {
- // this.overlays[key].forEach((overlay) => {
- // overlay.sprite.scale.x = overlay.scale / e.scale
- // overlay.sprite.scale.y = overlay.scale / e.scale
- // })
- // }
- // }
-
/**
*
*
@@ -807,37 +769,6 @@ export class ImageMap extends GeoMap {
* @memberof ImageMap
*/
moveTo(coordinates, zoom = null, { animate = 0 } = {}) {
- // console.log('Coordinates: ', coordinates)
-
- // if (zoom) {
- // this.image.scatter.requestScale(zoom)
- // }
-
- // if (coordinates) {
- // //Get pixel position of lat lang values
- // let offset = Points.multiplyScalar(this.coordinatesToPoint(coordinates), this.scatter.scale)
-
- // let frame = this.getFrame()
- // console.log(frame)
-
- // //Calculate the delta depending on image position and center the
- // // desired position in the frame.
- // let delta = {
- // x: frame.center.x - offset.x - this.scatter.position.x,
- // y: frame.center.y - offset.y - this.scatter.position.y
- // }
-
- // console.log('Move to: ', offset, frame, delta)
-
- // if (this.image) {
- // if (animate > 0) {
- // console.log(animate)
- // //TODO Replace this with a more robus manipulation method (RequestMovement + animation)
- // this.image.scatter.move(delta, { animate })
- // //Requesting the transform dhoul be okay. Maybe also replace with an request mehtod.
- // } else this.image.scatter.transform(delta, /*ratio*/ 1, 0, { x: 0, y: 0 })
- // } else console.error('Imge was not loaded yet.')
- // }
if (this.image.scatter == null) {
return
@@ -867,14 +798,11 @@ export class ImageMap extends GeoMap {
let containerCenter
if (this.frame) {
containerCenter = this.getFrame().localCenter
- //console.log("HAS FRAME: ", containerCenter)
} else {
containerCenter = {
x: this.image.parent.width / 2,
y: this.image.parent.height / 2
}
-
- //console.log("GET CONTAINER CENTER")
}
//Calculate the delta depending on image position and center the
@@ -884,7 +812,6 @@ export class ImageMap extends GeoMap {
x: containerCenter.x - point.x * this.image.scatter.scale - this.scatter.position.x,
y: containerCenter.y - point.y * this.image.scatter.scale - this.scatter.position.y
}
- // console.log("MOVE TO: " , this.image.scatter.translatable,point, delta)
if (animate > 0) {
let last = 0
diff --git a/lib/pixi/maps/mapapp.html b/lib/pixi/maps/mapapp.html
index b261783..309cd39 100644
--- a/lib/pixi/maps/mapapp.html
+++ b/lib/pixi/maps/mapapp.html
@@ -1,11 +1,14 @@
-
+
MapApp
-
+
+
+
+
@@ -28,8 +31,41 @@
for an easier handling of maps in the canvas.
+
WHAT TO SEE: The map should focus Paris.
+
+
+
+
+
@@ -28,58 +31,142 @@
Maps
-
Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods to
+
Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods
+ to
handle the maps.
Cover Test
Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option.
- This option allows the
+ This option allows the