IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Ongoing cleanup and refactoring of maps.

Browse Source
This commit is contained in:
Severin Opel 2019-11-25 18:04:11 +01:00
parent 88048f14ec
commit 5305561619
16 changed files with 462 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/doctest.css
View File

@ -22,6 +22,19 @@ html.dark-mode {
color: white;
}
.dark-mode a{
color: #569CD6;
font-weight: bold;
}
.dark-mode a:hover{
color: white;
}
a{
text-decoration: none;
}
.title {
position: relative;
font-size: 2.5rem;

172
dist/iwmlib.pixi.js vendored
View File

@ -17203,22 +17203,21 @@
this.debugGraphics.endFill();
}
// if (this.cover) {
// // The reference to the element handler needs to be stored,
// // that we can remove it later on.
// this._applyInitialCover = this._applyInitialCover.bind(this)
// }
if (this.cover) {
// The reference to the element handler needs to be stored,
// that we can remove it later on.
this._applyInitialCover = this._applyInitialCover.bind(this);
this.displayObject.on('added', this._applyInitialCover);
this._applyInitialCover();
}
}
// _applyInitialCover() {
// if (this.debug) console.log('ApplyInitialCover: ', parent)
_applyInitialCover() {
if (this.debug) console.log('ApplyInitialCover: ', parent);
// if (this.displayObject.parent)
// this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height)
// else {
// this.displayObject.on('added', eventHandler)
// }
// }
if (this.displayObject.parent)
this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height);
}
get boundaries() {
if (this._boundaries) return this._boundaries
@ -17341,8 +17340,6 @@
if (this.cover) {
let minCoverScale = this.calculateMinCoverScale(this.parent.width, this.parent.height);
if (scale < minCoverScale) {
console.error('USE MIN COVER SCALE', minCoverScale, scale);
scale = minCoverScale;
}
}
@ -17458,7 +17455,7 @@
this.projection = projection;
if (this.clip) {
if (this.opts.clip) {
let _cmin = this.projection.forward(this.opts.clip.min);
let _cmax = this.projection.forward(this.opts.clip.max);
@ -17481,7 +17478,7 @@
}
toCoordinates(point) {
if (this.clip) {
if (this.opts.clip) {
let min = this.clipExt.point.min;
let max = this.clipExt.point.max;
@ -17534,24 +17531,28 @@
}
get clip() {
return this.opts.clip
let unclipped = {
min: { x: 0, y: 0 },
max: { x: 1, y: 1 }
};
return this.opts.clip ? this.opts.clip : unclipped
}
/**
* Bounds to pixel transforms some bounds in form of {min:{x:minLat, y:minLng},max:{x:maxLat, y:maxLng}}
* to pixel coordinates.
*
* @param {*} bounds
*/
boundsToPixel(bounds) {
let min = this.toPixel(bounds.min);
let max = this.toPixel(bounds.max);
getBoundaries() {
// let min = this.toPixel(bounds.min)
// let max = this.toPixel(bounds.max)
// Y values needs to be swapped, as PIXI has it's origin
// in the top-left corner and a regular map in the bottom-left corner.
let boundaries = {
min: { x: min.x, y: max.y },
max: { x: max.x, y: min.y }
min: { x: 0, y: 0 },
max: { x: 1, y: 1 }
};
return boundaries
@ -17613,7 +17614,7 @@
* @memberof Projection
*/
backward(point) {
console.error('You must override the backward fuction in ' + this.name + '.');
console.error('You must override the backward function in ' + this.name + '.');
}
toString() {
@ -17625,7 +17626,7 @@
}
get maxViewport() {
return { min: new PIXI.Point(-90, -180), max: new PIXI.Point(90, 180) }
return { min: new PIXI.Point(0, 0), max: new PIXI.Point(1, 1) }
}
}
@ -17719,10 +17720,12 @@
this.onLoad = new EventHandler('loaded', { listeners: onLoad });
this.onTransform = new EventHandler('transform', { listeners: onTransform });
this.alpha = alpha;
this._alpha = alpha;
this.cover = cover;
this.debug = debug;
//TODO discuss if this is required here.
// Those are just scatter options and the information
// is redundant in the map class and the scatter.
@ -17800,10 +17803,24 @@
if (this.image.parent) {
this.image.parent.removeChild(this.image);
}
this.image.scatter = null;
if (this.scatter) {
this.scatter.killAnimation();
this.image.scatter = null;
}
}
}
remove() {
if (this.image) this.image.mask = null;
this.removeFrame();
this.onTransform.empty();
this.onLoad.empty();
this.unload();
}
/**
* Is called when the scatter object is transformed.
*
@ -17827,12 +17844,7 @@
this.image = image;
if (frame) this.setFrame(frame);
let min = this.mapdata.toPixel(this.viewport.min);
let max = this.mapdata.toPixel(this.viewport.max);
let boundaries = {
min: { x: min.x, y: max.y },
max: { x: max.x, y: min.y }
};
let boundaries = this.mapdata.getBoundaries();
let scatterOpts = Object.assign({
cover: this.cover,
@ -17851,17 +17863,6 @@
this.image.scatter = scatter == null ? this.scatter : scatter;
this.onLoad.call(this);
// Object.assign(this.image, {
// set scatter (value) {
// console.trace("Scatter set.")
// this._scatter = value
// },
// get scatter (){
// console.trace("Get Scatter.")
// return this._scatter
// }
// })
}
/**
@ -17957,8 +17958,8 @@
console.error('Overload get distance in subclass.');
}
set alpha(value) {
console.error('Overload get alpha in subclass.');
get alpha() {
return this._alpha
}
/**
@ -17988,6 +17989,10 @@
return coords
}
removeFrame() {
this.frame = null;
}
setFrame(frame) {
if (this.debug) console.log('Set Frame: ', frame);
this.frame = frame;
@ -18078,10 +18083,6 @@
return null
}
/**
*
*/
/**
* Validates if the map data contains valid data
* for creating the maps.
@ -18414,6 +18415,7 @@
class ImageMap extends GeoMap {
constructor(sprite, mapdata, opts = {}) {
super(mapdata, opts);
if (this.debug) console.log('Construct Image Map', sprite, mapdata, opts);
this.sprite = sprite;
@ -18759,8 +18761,8 @@
_adjustLng(lng, inv = false) {
let moved = inv ? lng + this.lng0 : lng - this.lng0;
if (moved < -180) moved += 360;
if (moved > 180) moved -= 360;
// if (moved < -180) moved += 360
// if (moved > 180) moved -= 360
return moved
}
@ -18781,12 +18783,20 @@
return { low: minIndex, high: maxIndex, ratio, sign }
}
toString() {
return
}
get name() {
return 'Robinson Projection'
}
get maxViewport() {
let min = new PIXI.Point(-90, -180);
let max = new PIXI.Point(90, 180);
max.x += this.lng0;
min.x += this.lng0;
console.log({ min, max });
return { min, max }
}
}
/**
@ -19664,6 +19674,7 @@
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.');
if (this.active == null) this.active = key;
map.name = key;
this.maps[key] = map;
}
@ -19680,6 +19691,13 @@
console.log(keys, idx, next);
return next
}
cleanup() {
for (let key in this.maps) {
let map = this.maps[key];
map.remove();
}
}
}
//import { GeoGraphics } from "../pixi/geographics.js"
@ -19903,9 +19921,11 @@
mapList,
scatterContainer,
displayObject,
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {}
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, name = null } = {}
) {
super(displayObject);
super(displayObject, {
name
});
this.transformHandler = new EventHandler('onTransform', {
listeners: onTransform
@ -19971,6 +19991,17 @@
return mapLayerClone
}
/**
* Helper function to quickly display the next map.
* Order is defined by the key ordering of the maplist.
*
* @memberof MapLayer
*/
next() {
let nextMap = this.mapList.next();
this.changeMap(nextMap);
}
/**
* Changes the map to the specified one, keeping the position and the zoom of the old map.
*
@ -20082,6 +20113,10 @@
get mapLayer() {
return this
}
cleanup() {
this.mapList.cleanup();
}
}
MapLayer.idx = 0;
@ -20167,11 +20202,22 @@
this._setupKeyboardUtils();
}
logMapBoundaries() {
let map = this.mapLayer.map;
let boundaries = {
min: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }),
max: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 })
};
console.log(JSON.stringify(boundaries));
}
_setupMapLayer() {
this.mapContainer = new PIXI.Container();
console.log(this.mapList);
this.mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, {
name: 'Map Layer',
name: 'Root Map Layer',
focus: this.focus,
zoom: this.zoom
});
@ -21123,12 +21169,11 @@
return false
},
informationCallback = null,
adjustItems = null
adjustItems = null,
cleanupItems = null
} = {}) {
const name = this.name[0].toUpperCase() + this.name.slice(1).toLowerCase() + ' Overlay';
let geoLayer = new GeoLayer(new PIXI.Container(), { name });
console.log(this);
geoLayer.visibility = this.zoomVisibility;
if (this.rescale) geoLayer.rescale = this.rescale;
@ -21141,6 +21186,9 @@
item.overlay = this;
let graphics = this.createItem(item, informationCallback);
geoLayer.addChild(graphics);
if (cleanupItems) {
cleanupItems(item);
}
}
});
return geoLayer

1
lib/interaction.js
View File

@ -999,7 +999,6 @@ export class InteractionMapper extends InteractionDelegate {
if (found != null) {
this.interaction.addTarget(key, found)
}
console.log(this.target)
}
let size = this.interaction.current.size
let limit = this.logInteractionsAbove

6
lib/pixi/maps/geographics.html
View File

@ -46,7 +46,7 @@
]
function createApp(view) {
let app = new MapApp({
let app = window.GeoPointApp = new MapApp({
view,
focus: { x: 0, y: 0 },
zoom: 1,
@ -70,11 +70,11 @@
wikimedia
], (sprites) => {
let osmMap = new ImageMap(sprites.get(osmworld), new MapData(new Projection.Mercator()), { cover: true })
let osmMap = new ImageMap(sprites.get(osmworld), new MapData(new Projection.Mercator()), { cover: true, debug: true })
let wikimediaMap = new ImageMap(sprites.get(wikimedia), new MapData(new Projection.Robinson(10)), {
baseZoomHeight: sprites.get(osmworld).texture.height,
cover: true
cover: true, debug: true
})
app.addMaps({

26
lib/pixi/maps/geolayer.js
View File

@ -86,7 +86,6 @@ export class GeoLayer {
set visibility(value) {
let { min = 0, max = Infinity } = value
console.log(min)
this._visibility = { min, max }
}
@ -224,9 +223,11 @@ export class MapLayer extends GeoLayer {
mapList,
scatterContainer,
displayObject,
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {}
{ onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, name = null } = {}
) {
super(displayObject)
super(displayObject, {
name
})
this.transformHandler = new EventHandler('onTransform', {
listeners: onTransform
@ -292,6 +293,17 @@ export class MapLayer extends GeoLayer {
return mapLayerClone
}
/**
* Helper function to quickly display the next map.
* Order is defined by the key ordering of the maplist.
*
* @memberof MapLayer
*/
next() {
let nextMap = this.mapList.next()
this.changeMap(nextMap)
}
/**
* Changes the map to the specified one, keeping the position and the zoom of the old map.
*
@ -304,7 +316,7 @@ export class MapLayer extends GeoLayer {
/* map ,
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.*/
) {
console.log('Change map to: ', name)
console.log('🗺️ Change map to: ', name)
let oldMap = this.map
this.mapList.select(name)
@ -316,10 +328,8 @@ export class MapLayer extends GeoLayer {
let map = this.map
if (map) {
console.log('Load Map')
map.load()
console.log(this, this.scatterContainer)
this.scatterContainer.addChild(map.image)
this.mapview.apply(map)
@ -403,6 +413,10 @@ export class MapLayer extends GeoLayer {
get mapLayer() {
return this
}
cleanup() {
this.mapList.cleanup()
}
}
MapLayer.idx = 0

145
lib/pixi/maps/map.html Normal file
View File

@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>Map</title>
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.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>
.controls {
display: flex;
}
</style>
</head>
<body onload="Doctest.run()">
<h1>Map</h1>
<p>
The Map class shows a geographical map using a scatter element.
</p>
<h2 id="DeepZoomMap">DeepZoomMap</h2>
<p>Usually a DeepZoomMap will be used to display maps. It uses a <a
href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
the zoom factor.</p>
<canvas id="deepZoomCanvas">
</canvas>
<script>
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
(function () {
// Create the mapapp.
let app = window.DeepZoomMapApp = new MapApp({
view: deepZoomCanvas,
coordsLogging: true,
width: 512,
height: 512
})
// Load or specify a tilesConfig as required by the DeepZoomImage.
const tilesConfig = {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
}
// Create a projection.
const projection = new Projection.Mercator()
// Create a map data object.
const osmDeepZoomMapData = new DeepZoomMapData(projection, tilesConfig, { app })
// Create the map
const osmMap = new DeepZoomMap(osmDeepZoomMapData, tilesConfig)
// Add the map to the app.
app.addMap("osm", osmMap)
// Run the app when at least one map is set.
app.setup().run()
})()
</script>
<h2 id="imageMap">ImageMap</h2>
<p>Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
when there are no different tiles required or available.</p>
<canvas id="imageMapCanvas">
</canvas>
<script>
</script>
<script class="doctest" data-collapsible data-collapsed data-title="Script">
(function () {
// Create the mapapp.
let app = window.ImageMapApp = new MapApp({
view: imageMapCanvas,
coordsLogging: true,
width: 512,
height: 512
})
const mapTexture = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
// The images used by the image map need to be loaded beforehand.
// Therefore this loading step is required.
app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
resolutionDependent: false
})
spritesLoaded = (sprites) => {
// Create a projection.
const projection = new Projection.Robinson(10)
// Create a map data object.
let mapData = new MapData(projection)
// Create the map
let imageMap = new ImageMap(sprites.get(mapTexture), mapData)
// Add the map to the app.
app.addMap("europe", imageMap)
// Run the app when at least one map is set.
app.setup().run()
}
})()
</script>
</body>
</html>

57
lib/pixi/maps/map.js
View File

@ -53,7 +53,7 @@ export class GeoMap {
this.onLoad = new EventHandler('loaded', { listeners: onLoad })
this.onTransform = new EventHandler('transform', { listeners: onTransform })
this.alpha = alpha
this._alpha = alpha
this.cover = cover
this.debug = debug
@ -134,10 +134,24 @@ export class GeoMap {
if (this.image.parent) {
this.image.parent.removeChild(this.image)
}
this.image.scatter = null
if (this.scatter) {
this.scatter.killAnimation()
this.image.scatter = null
}
}
}
remove() {
if (this.image) this.image.mask = null
this.removeFrame()
this.onTransform.empty()
this.onLoad.empty()
this.unload()
}
/**
* Is called when the scatter object is transformed.
*
@ -161,12 +175,7 @@ export class GeoMap {
this.image = image
if (frame) this.setFrame(frame)
let min = this.mapdata.toPixel(this.viewport.min)
let max = this.mapdata.toPixel(this.viewport.max)
let boundaries = {
min: { x: min.x, y: max.y },
max: { x: max.x, y: min.y }
}
let boundaries = this.mapdata.getBoundaries()
let scatterOpts = Object.assign({
cover: this.cover,
@ -185,17 +194,6 @@ export class GeoMap {
this.image.scatter = scatter == null ? this.scatter : scatter
this.onLoad.call(this)
// Object.assign(this.image, {
// set scatter (value) {
// console.trace("Scatter set.")
// this._scatter = value
// },
// get scatter (){
// console.trace("Get Scatter.")
// return this._scatter
// }
// })
}
/**
@ -291,8 +289,8 @@ export class GeoMap {
console.error('Overload get distance in subclass.')
}
set alpha(value) {
console.error('Overload get alpha in subclass.')
get alpha() {
return this._alpha
}
/**
@ -322,6 +320,10 @@ export class GeoMap {
return coords
}
removeFrame() {
this.frame = null
}
setFrame(frame) {
if (this.debug) console.log('Set Frame: ', frame)
this.frame = frame
@ -383,7 +385,6 @@ export class GeoMap {
let maps = {}
if (GeoMap._validateJson(json, error)) {
for (let [mapname, data] of Object.entries(json)) {
console.log(data.tiles, data.tiles.path, root + data.tiles.path)
data.tiles.path = root + data.tiles.path
maps[mapname] = GeoMap._createMap(data)
maps[mapname].name = mapname
@ -412,10 +413,6 @@ export class GeoMap {
return null
}
/**
*
*/
/**
* Validates if the map data contains valid data
* for creating the maps.
@ -525,7 +522,6 @@ export class DeepZoomMap extends GeoMap {
* @param {object} opts - Additional options to specify the behaviour of the deep zoom image.
*/
constructor(mapdata, tilesConfig, opts = {}) {
if (!tilesConfig.app) console.error('App was not set in the tilesConfig.')
opts = Object.assign(
{
maxScale: Math.min(tilesConfig.width, tilesConfig.height) / tilesConfig.tileSize,
@ -545,9 +541,7 @@ export class DeepZoomMap extends GeoMap {
if (!(this.mapdata instanceof MapData)) {
console.error('Use the MapData object for creating maps!')
} else {
if (this.mapdata instanceof DeepZoomMapData) {
if (!this.mapdata.app) console.error('No app was set on the mapdata!')
} else {
if (!(this.mapdata instanceof DeepZoomMapData)) {
console.error('Use the DeepZoomMapData object.')
}
}
@ -559,6 +553,7 @@ export class DeepZoomMap extends GeoMap {
* @private
*/
load(container = null, scatter = null) {
if (!this.mapdata.app) console.error('App was not set in the mapdata.')
this.info = new DeepZoomInfo(this.tilesConfig)
let image = new DeepZoomImage(this.info, {
app: this.mapdata.app,
@ -569,7 +564,6 @@ export class DeepZoomMap extends GeoMap {
super.load(image, container, scatter)
console.log('LOADED: ', this.image)
if (this.debug) console.log('Loaded image: ', image, 'With options: ', this.info)
}
@ -748,6 +742,7 @@ DeepZoomMap.tintcolor = 0
export class ImageMap extends GeoMap {
constructor(sprite, mapdata, opts = {}) {
super(mapdata, opts)
if (this.debug) console.log('Construct Image Map', sprite, mapdata, opts)
this.sprite = sprite

28
lib/pixi/maps/mapapp.js
View File

@ -88,18 +88,32 @@ export default class MapApp extends PIXIApp {
this._setupKeyboardUtils()
}
/**
* Log boundaries for a shown map.
* This is for development purposes only, if you want
* to find the boundaries of a shown map.
*
* @memberof MapApp
*/
logMapBoundaries() {
let map = this.mapLayer.map
let boundaries = {
min: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }),
max: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 })
}
console.log(JSON.stringify(boundaries))
}
_setupMapLayer() {
this.mapContainer = new PIXI.Container()
console.log(this.mapList)
this.mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, {
name: 'Map Layer',
name: 'Root Map Layer',
focus: this.focus,
zoom: this.zoom
zoom: this.zoom,
onChange: this._mapChanged.bind(this)
})
this.mapLayer.changeHandler.add(this._mapChanged.bind(this))
if (this.mapList.map) this.mapLayer.changeMap(this.mapList.map)
}
setup() {

12
lib/pixi/maps/mapdata.html
View File

@ -145,7 +145,7 @@
<script>
printCoordinates(map_image_1, germany, map_coords_1)
</script>
<h2>Clipped And Translated Map</h2>
<h2>Translated Map</h2>
<p>Maps can be also translated, if the whole world is shown and clipping is not an option.</p>
<p>Coordinates:
<strong id="map_coords_2"></strong>
@ -160,7 +160,7 @@
// Fake offset by using the old mapdata.
let translation = squared_world.toPixel({ x: 0, y: -140 })
let translation = squared_world.toPixel({ x: 90-10, y: -140 })
console.log(translation)
@ -168,7 +168,7 @@
// And also translated in hoizontal direction.
// The translate option corrects that.
let translated_world = new MapData(new Projection.Mercator(), {
translate: { x: 0, y: 40 },
translate: { x: -10, y: 40 },
})
@ -180,7 +180,7 @@
height: size + "px",
backgroundImage: "url(../assets/maps/osm/0/0/0.png)",
backgroundColor: "red",
backgroundPosition: translation.x * size + "px 0"
backgroundPosition: translation.x * size + "px " +translation.y * size + "px"
})
//Same as above
@ -191,7 +191,9 @@
</script>
<script>
map_image_2.addEventListener("mousemove", (event) => {
let coords = translated_world.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
let map = map_image_2
console.log(event.offsetX / map.width)
let coords = translated_world.toCoordinates({ x: event.offsetX / map.offsetWidth, y: event.offsetY / map.offsetHeight })
map_coords_2.innerHTML = "Lat: " + coords.x.toFixed(4) + " Lng: " + coords.y.toFixed(4)
})
</script>

39
lib/pixi/maps/mapdata.js
View File

@ -27,7 +27,7 @@ export class MapData {
this.projection = projection
if (this.clip) {
if (this.opts.clip) {
let _cmin = this.projection.forward(this.opts.clip.min)
let _cmax = this.projection.forward(this.opts.clip.max)
@ -49,8 +49,15 @@ export class MapData {
}
}
/**
* Transforms a pixel point on the map to a geographical coordinate.
*
* @param {{x,y} | PIXI.Point} point - A pixel position on the map.
* @returns {{x,y} | PIXI.Point} - A geographical coordinate.
* @memberof MapData
*/
toCoordinates(point) {
if (this.clip) {
if (this.opts.clip) {
let min = this.clipExt.point.min
let max = this.clipExt.point.max
@ -74,6 +81,13 @@ export class MapData {
return coordinates
}
/**
* Transform a geographical coordinate to a pixel point on the map.
*
* @param {{x,y} | PIXI.Point} coordinates - A point in the form of {x:lat,y:lng}.
* @returns {{x,y} | PIXI.Point} point - A pixel position on the map.
* @memberof MapData
*/
toPixel(coordinates) {
let coords = { x: coordinates.x, y: coordinates.y }
if (this.opts.translate) {
@ -103,24 +117,28 @@ export class MapData {
}
get clip() {
return this.opts.clip
let unclipped = {
min: { x: 0, y: 0 },
max: { x: 1, y: 1 }
}
return this.opts.clip ? this.opts.clip : unclipped
}
/**
* Bounds to pixel transforms some bounds in form of {min:{x:minLat, y:minLng},max:{x:maxLat, y:maxLng}}
* to pixel coordinates.
*
* @param {*} bounds
*/
boundsToPixel(bounds) {
let min = this.toPixel(bounds.min)
let max = this.toPixel(bounds.max)
getBoundaries() {
// let min = this.toPixel(bounds.min)
// let max = this.toPixel(bounds.max)
// Y values needs to be swapped, as PIXI has it's origin
// in the top-left corner and a regular map in the bottom-left corner.
let boundaries = {
min: { x: min.x, y: max.y },
max: { x: max.x, y: min.y }
min: { x: 0, y: 0 },
max: { x: 1, y: 1 }
}
return boundaries
@ -133,7 +151,6 @@ export class MapData {
export class DeepZoomMapData extends MapData {
constructor(projection, tilesConfig, opts = {}) {
if (!opts.app) console.error('Deepzoom Mapdata needs an app set in the options.')
if (tilesConfig.clip) {
opts.clip = {
min: {
@ -147,8 +164,6 @@ export class DeepZoomMapData extends MapData {
}
}
console.log(tilesConfig, opts)
super(projection, opts)
this.app = opts.app
}

9
lib/pixi/maps/maplist.js
View File

@ -52,6 +52,7 @@ export class MapList {
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
if (this.active == null) this.active = key
map.name = key
this.maps[key] = map
}
@ -65,7 +66,13 @@ export class MapList {
let idx = keys.indexOf(this.active)
let next = idx + 1 < keys.length ? keys[idx + 1] : keys[0]
console.log(keys, idx, next)
return next
}
cleanup() {
for (let key in this.maps) {
let map = this.maps[key]
map.remove()
}
}
}

8
lib/pixi/maps/overlay.js
View File

@ -184,12 +184,11 @@ export default class Overlay {
return false
},
informationCallback = null,
adjustItems = null
adjustItems = null,
cleanupItems = null
} = {}) {
const name = this.name[0].toUpperCase() + this.name.slice(1).toLowerCase() + ' Overlay'
let geoLayer = new GeoLayer(new PIXI.Container(), { name })
console.log(this)
geoLayer.visibility = this.zoomVisibility
if (this.rescale) geoLayer.rescale = this.rescale
@ -202,6 +201,9 @@ export default class Overlay {
item.overlay = this
let graphics = this.createItem(item, informationCallback)
geoLayer.addChild(graphics)
if (cleanupItems) {
cleanupItems(item)
}
}
})
return geoLayer

4
lib/pixi/maps/projections/projection.js
View File

@ -26,7 +26,7 @@ export default class Projection {
* @memberof Projection
*/
backward(point) {
console.error('You must override the backward fuction in ' + this.name + '.')
console.error('You must override the backward function in ' + this.name + '.')
}
toString() {
@ -38,6 +38,6 @@ export default class Projection {
}
get maxViewport() {
return { min: new PIXI.Point(-90, -180), max: new PIXI.Point(90, 180) }
return { min: new PIXI.Point(0, 0), max: new PIXI.Point(1, 1) }
}
}

47
lib/pixi/maps/projections/projections.html
View File

@ -92,6 +92,10 @@
</div>
<script>
window.examples = []
let boundaries = [
{ x: -90, y: -180 },
{ x: 90, y: 180 },
@ -247,6 +251,8 @@
let point = createPointAtPoisition(relativePosition)
mercatorMap.appendChild(point)
window.examples.push({ map: mercatorMap, projection: mercatorProjection })
}
})()
@ -317,14 +323,53 @@
let relativePosition = robinsonProjection.forward(position)
// Run Test Cases
Doctest.expectPointPrecision(robinsonTruth[key], relativePosition,0)
Doctest.expectPointPrecision(robinsonTruth[key], relativePosition, 0)
let point = createPointAtPoisition(relativePosition)
robinsonMap.appendChild(point)
}
window.examples.push({ projection: robinsonProjection, map: robinsonMap })
})()
</script>
</section>
<script>
// Put it in a self executing anonymous function to not pollute the window element.
(function () {
window.examples.forEach(({ map, projection }) => {
let display = document.createElement("p")
Object.assign(display.style, {
position: "absolute",
left: 0,
top: 0
})
map.parentNode.appendChild(display)
Object.assign(map.parentNode.style, {
position: "relative"
})
display.innerText = "Hover over Map to display coordinates."
map.addEventListener("mousemove", (event) => {
let mousePosition = { x: event.offsetX, y: event.offsetY }
let normalizedPosition = {
x: mousePosition.x / map.offsetWidth,
y: mousePosition.y / map.offsetHeight
}
let coordinates = projection.backward(normalizedPosition)
display.innerHTML = `<b>lat:</b> ${coordinates.x.toFixed(3)} <br><b>lng:</b> ${coordinates.y.toFixed(3)}`
})
})
})()
</script>
</body>
</html>

18
lib/pixi/maps/projections/robinson.js
View File

@ -117,8 +117,8 @@ export default class Robinson extends Projection {
_adjustLng(lng, inv = false) {
let moved = inv ? lng + this.lng0 : lng - this.lng0
if (moved < -180) moved += 360
if (moved > 180) moved -= 360
// if (moved < -180) moved += 360
// if (moved > 180) moved -= 360
return moved
}
@ -139,10 +139,18 @@ export default class Robinson extends Projection {
return { low: minIndex, high: maxIndex, ratio, sign }
}
toString() {
return
}
get name() {
return 'Robinson Projection'
}
get maxViewport() {
let min = new PIXI.Point(-90, -180)
let max = new PIXI.Point(90, 180)
max.x += this.lng0
min.x += this.lng0
console.log({ min, max })
return { min, max }
}
}

35
lib/pixi/maps/scatter.js
View File

@ -349,22 +349,21 @@ export class CoverScatter extends AdvancedScatter {
this.debugGraphics.endFill()
}
// if (this.cover) {
// // The reference to the element handler needs to be stored,
// // that we can remove it later on.
// this._applyInitialCover = this._applyInitialCover.bind(this)
// }
if (this.cover) {
// The reference to the element handler needs to be stored,
// that we can remove it later on.
this._applyInitialCover = this._applyInitialCover.bind(this)
this.displayObject.on('added', this._applyInitialCover)
this._applyInitialCover()
}
}
// _applyInitialCover() {
// if (this.debug) console.log('ApplyInitialCover: ', parent)
_applyInitialCover() {
if (this.debug) console.log('ApplyInitialCover: ', parent)
// if (this.displayObject.parent)
// this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height)
// else {
// this.displayObject.on('added', eventHandler)
// }
// }
if (this.displayObject.parent)
this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height)
}
get boundaries() {
if (this._boundaries) return this._boundaries
@ -487,8 +486,6 @@ export class CoverScatter extends AdvancedScatter {
if (this.cover) {
let minCoverScale = this.calculateMinCoverScale(this.parent.width, this.parent.height)
if (scale < minCoverScale) {
console.error('USE MIN COVER SCALE', minCoverScale, scale)
scale = minCoverScale
}
}
@ -546,10 +543,10 @@ export class MapObjectScatter extends CoverScatter {
)
super(displayObject, renderer, opts)
if (!renderer) {
console.error('Renderer was not set!')
return
}
// if (!renderer) {
// console.error('Renderer was not set!')
// return
// }
this.cover = opts.cover
}