Renamed 'MapView' to 'MapViewport'. Added documentation to the maps module.

This commit is contained in:
2019-12-09 18:15:28 +01:00
parent 60e28f8fe5
commit 65fac2f406
16 changed files with 638 additions and 151 deletions
+121 -49
View File
@@ -17444,7 +17444,7 @@
* @constructor
* @param {Projection}[projection] - Specifies the projection of the map (e.g. Mercator Projection).
* @param {object}[opts] - Addiditonal options.
* @param {[[minLat, minLng],[maxLat, maxLng]]}[opts.bounds] - Describes the minimum and maximum coordinates on the map
* @param {array}[opts.bounds] - Describes the minimum and maximum coordinates on the map in the form of {[[minLat, minLng],[maxLat, maxLng]]}.
* @param {Point}[opts.translate] - Defines a translation, when clipping is not an option (e.g. when the whole world is shown, but translated.)
*/
constructor(projection, opts = {}) {
@@ -17482,6 +17482,7 @@
/**
* Transforms a pixel point on the map to a geographical coordinate.
*
* @public
* @param {{x,y} | PIXI.Point} point - A pixel position on the map.
* @returns {{x,y} | PIXI.Point} - A geographical coordinate.
* @memberof MapData
@@ -17514,6 +17515,7 @@
/**
* Transform a geographical coordinate to a pixel point on the map.
*
* @public
* @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
@@ -17546,6 +17548,18 @@
return point
}
/**
* Get's the clipping of the map data. Clipping describes the
* piece of the map that is shown. E.g. if we just show a map of
* europe, then we have to set the clipping properly, otherwise
* the preojection would produce the wrong results when transforming
* from a point to coordinates or the other way around.
*
* @readonly
* @memberof MapData
* @returns {object} - Object that contains a min and max value of the clipping in form of: {min: {x,y}, max:{x,y}}. Where x and y are in between 0 and 1.
*/
get clip() {
let unclipped = {
min: { x: 0, y: 0 },
@@ -17555,30 +17569,30 @@
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.
* Returns the biggest viewport the mapdata allows.
* This is determined by the projecton or the clipping on the mapapp.
*
* @readonly
* @memberof MapData
*/
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: 0, y: 0 },
max: { x: 1, y: 1 }
};
return boundaries
}
get maxViewport() {
return this.opts.clip ? this.opts.clip : this.projection.maxViewport
}
}
/**
* Special mapdata for DeepZoomMap objects.
*
* Note: It just transform the clipping parameter of the tiles config
* to the clipping of the mapapp.
*
* @export
* @class DeepZoomMapData
* @extends {MapData}
*/
class DeepZoomMapData extends MapData {
constructor(projection, tilesConfig, opts = {}) {
if (tilesConfig.clip) {
@@ -17773,10 +17787,18 @@
}
flushHandlers() {
// this.onLoaded
this.onLoad.empty();
this.onTransform.empty();
}
/**
* Locks all transformations on the map.
* Single parameters can be set if necessary. False means the value is locked, true means they can be modified.
*
* @public
* @param {object} [{ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false }={}]
* @memberof GeoMap
*/
lock({ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false } = {}) {
if (this.image && this.image.scatter) {
this.image.scatter.translatable = rotatable;
@@ -17785,30 +17807,26 @@
this.image.scatter.rotatable = movableY;
this.image.scatter.scalable = scalable;
}
// Issue #001: This causes the map to not be displayed at the correct position on
// map change.
// // Rotation does not yet work with the cover mechanism.
// //this.rotatable = false
// this.translatable = false
// this.scalable = false
}
/**
* Unlocks all transformations on the map.
* Single parameters can be set if necessary. False means the value is locked, true means they can be modified.
*
* @public
* @param {object} [{ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false }={}]
* @memberof GeoMap
*/
unlock({ rotatable = true, translatable = true, movableX = true, movableY = true, scalable = true } = {}) {
if (this.image && this.image.scatter) {
this.image.scatter.translatable = translatable;
this.image.scatter.movableX = movableX;
this.image.scatter.movableY = movableY;
this.image.scatter.rotatable = rotatable;
this.image.scatter.scalable = scalable;
}
// Issue #001
// // Rotation does not yet work with the cover mechanism.
// //this.rotatable = true
// this.translatable = true
// this.scalable = true
this.lock({ rotatable, translatable, movableX, movableY, scalable });
}
/**
* Unloads the image of the map.
*
* @public
* @memberof GeoMap
*/
unload() {
if (this.image) {
if (this.image.parent) {
@@ -17822,6 +17840,12 @@
}
}
/**
* Removes the map, freeing all memory ba flushing handlers and removing the image.
*
* @public
* @memberof GeoMap
*/
remove() {
if (this.image) this.image.mask = null;
@@ -17855,8 +17879,6 @@
this.image = image;
if (frame) this.setFrame(frame);
let boundaries = this.mapdata.getBoundaries();
let scatterOpts = Object.assign({
cover: this.cover,
scaleable: this.scaleable,
@@ -17866,7 +17888,6 @@
startScale: this.startScale,
minScale: this.minScale,
maxScale: this.maxScale,
boundaries,
onTransform: this.transformed.bind(this)
});
@@ -17922,7 +17943,7 @@
* to a coordinate with latitude and longitude.
*
*
* @param {object} point - Point in form of {x: x_val, y: y_val}.
* @param {object} point - Point in form of {x, y}.
* @returns {object} - Coordinates on the map in form of {x: latitude, y: longitude}.
*/
coordinatesFromPoint(point) {
@@ -17934,7 +17955,7 @@
* Transform coordinates in the map into pixel positions on the deep zoom image.
*
* @param {object} coords - Coordinates of a map position in form {x: latitude, y: longitude}.
* @return - Returns a image position in form of {x: x_val, y: y_val}.
* @return {Point} - Returns a image position in form of {x: x, y: y}.
*/
coordinatesToPoint(coordinates) {
return this.toAbsolutePixelCoordinates(this.mapdata.toPixel(coordinates))
@@ -19630,6 +19651,13 @@
}
}
/**
* MapList is a list of maps with one active index.
* It contains some utility functions to change the map.
*
* @export
* @class MapList
*/
class MapList {
constructor(active = null, maps = {}) {
this.maps = maps;
@@ -19641,8 +19669,9 @@
/**
* Selects a map from the map list.
*
* @public
* @param {string} active - Name of the map to select.
* @returns
* @returns {Map} - Returns the active map. Returns null if no map was added to the MapList.
* @memberof MapList
*/
select(active) {
@@ -19672,6 +19701,13 @@
return map
}
/**
* Clones the entire maplist.
*
* @public
* @returns {MapList} - Returns a cloned instance of this map list.
* @memberof MapList
*/
clone() {
let maps = {};
@@ -19682,6 +19718,14 @@
return new MapList(this.active, maps)
}
/**
* Adds a new map to the map list.
*
* @public
* @param {string} key - Key to identify the map.
* @param {GeoMap} map - The GeoMap to add.
* @memberof 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;
@@ -19689,10 +19733,25 @@
this.maps[key] = map;
}
/**
* Returns the the active map.
* If none is set, it returns null.
*
*@public
* @readonly
* @memberof MapList
*/
get map() {
return this.maps && this.maps[this.active] ? this.maps[this.active] : null
}
/**
* Selects the next map in the map array.
*
* @public
* @returns {GeoMap} - Returns the next map in the list.
* @memberof MapList
*/
next() {
let keys = Object.keys(this.maps);
let idx = keys.indexOf(this.active);
@@ -19701,6 +19760,13 @@
return next
}
/**
* Removes all maps from the maplist.
* And cleans up all maps.
*
* @public
* @memberof MapList
*/
cleanup() {
for (let key in this.maps) {
let map = this.maps[key];
@@ -20283,9 +20349,9 @@
}
selectMap(key) {
if (this.debug) console.log('Select map', key, result);
let result = this.mapList.select(key);
console.log('Select map', key, result);
if (result && this.mapLayer) {
this.mapLayer.changeMap(this.mapList.map);
}
@@ -20318,6 +20384,14 @@
this.onTransform.call(this, event);
}
/**
*
* Called when the mapLayer changed the map.
*
* @private
* @param {*} lastMap
* @memberof MapApp
*/
_mapChanged(lastMap) {
if (lastMap) {
lastMap.flushHandlers();
@@ -20648,8 +20722,7 @@
*
* @static
* @export
* @class GeoJsonGraphics
* @extends {GeoGraphics}
* @class
*/
class GeoJson {
static isLineType(type) {
@@ -20701,7 +20774,6 @@
}
list.push({ type, coordinates });
// console.log({type, coordinates})
});
return list
@@ -20765,7 +20837,7 @@
* considered valid. A complete list is provided in the GeoUtils.
*
* @param {object} point - The point that is tested for validity.
* @returns
* @returns {boolean}
* @memberof GeoJson
*/
static validateAndConvertPoint(point) {
@@ -20944,7 +21016,7 @@
* {latitude: lat, longitude: lng}
*
* @static
* @param {object / array} coordinate - Coordinate to be tested, if it is an valid coordinate.
* @param {object|array} coordinate - Coordinate to be tested, if it is an valid coordinate.
* @returns - Returns the coordinate properly transformed. If transformation was not possible, it returns null.
* @memberof GeoGraphics
*/