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

Fixed cover bug. Renamed mapdata to mapprojection.

Browse Source
This commit is contained in:
Severin Opel
2019-12-11 16:45:26 +01:00
parent a85569e54d
commit 1e80845aa6
82 changed files with 5473 additions and 5059 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/bundle.js
+3 -3
View File
@@ -63,10 +63,10 @@ window.Text = Text
//Maps
import { GeoMap, ImageMap, DeepZoomMap } from './maps/map.js'
import { MapData, DeepZoomMapData } from './maps/mapdata.js'
import { MapProjection, DeepZoomMapProjection } from './maps/mapprojection'
window.MapData = MapData
window.DeepZoomMapData = DeepZoomMapData
window.MapProjection = MapProjection
window.DeepZoomMapProjection = DeepZoomMapProjection
window.GeoMap = GeoMap
window.ImageMap = ImageMap
lib/pixi/maps/geographics.html
+4 -4
View File
@@ -131,10 +131,10 @@
const MercatorProjection = new Projection.Mercator()
const RobinsonProjection = new Projection.Robinson(10)
// In the MapDataOptions specific behaviour can be enforced.
// In the MapProjectionOptions specific behaviour can be enforced.
// E.g. Setting cover to false removes the enforcement of the map to cover the
// whole mapLayer.
const mapDataOptions = { cover: true, debug: true }
const mapProjectionOptions = { cover: true, debug: true }
// Specifies a common zoom height for both maps.
@@ -146,8 +146,8 @@
}
// Create the actual map objects.
let osmMap = new ImageMap(sprites.get(osmworld), new MapData(MercatorProjection, mapDataOptions), mapOptions)
let wikimediaMap = new ImageMap(sprites.get(wikimedia), new MapData(RobinsonProjection, mapDataOptions), mapOptions)
let osmMap = new ImageMap(sprites.get(osmworld), new MapProjection(MercatorProjection, mapProjectionOptions), mapOptions)
let wikimediaMap = new ImageMap(sprites.get(wikimedia), new MapProjection(RobinsonProjection, mapProjectionOptions), mapOptions)
// Add the maps to the mapapp.
// An object is used to have a key, that identifies the maps.
lib/pixi/maps/geojson.html
+2 -2
View File
@@ -156,7 +156,7 @@
// As map an image of europe is used.
let europe = "../../../../var/examples/maps/europe/europe.jpg"
let europeData = new MapData(MERCATOR, {
let europeMapProjection = new MapProjection(MERCATOR, {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
@@ -182,7 +182,7 @@
window.readyHandler = new EventHandler("onReady")
function ready(textures) {
let europeMap = new ImageMap(new PIXI.Sprite(textures.get(europe)), europeData)
let europeMap = new ImageMap(new PIXI.Sprite(textures.get(europe)), europeMapProjection)
app.setMap("germany", europeMap)
app.setup().run()
lib/pixi/maps/index.html
+1 -1
View File
@@ -99,7 +99,7 @@
["GeoJson", "geojson.html"],
["GeoMap", "map.html"],
["MapApp", "mapapp.html"],
["MapData", "mapdata.html"],
["MapProjection", "mapprojection.html"],
["MapViewport", "mapviewport.html"],
["Overlay", "overlay.html"],
["Scatter", "scatter.html"]
lib/pixi/maps/map.html
+4 -4
View File
@@ -71,10 +71,10 @@
const projection = new Projection.Mercator()
// Create a map data object.
const osmDeepZoomMapData = new DeepZoomMapData(projection, tilesConfig, { app })
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
// Create the map
const osmMap = new DeepZoomMap(osmDeepZoomMapData, tilesConfig)
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
// Add the map to the app.
app.addMap("osm", osmMap)
@@ -122,10 +122,10 @@
const projection = new Projection.Robinson(10)
// Create a map data object.
let mapData = new MapData(projection)
let mapProjection = new MapProjection(projection)
// Create the map
let imageMap = new ImageMap(sprites.get(mapTexture), mapData)
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
// Add the map to the app.
lib/pixi/maps/map.js
+49 -36
View File
@@ -1,12 +1,12 @@
import { MapObjectScatter } from './scatter.js'
import { DeepZoomImage, DeepZoomInfo } from '../deepzoom/image.js'
import { MapData, DeepZoomMapData } from './mapdata.js'
import { MapProjection, DeepZoomMapProjection } from './mapprojection.js'
import { Points } from '../../utils.js'
import { EventHandler } from './utils.js'
import Mercator from './projections/mercator.js'
/**
* The GeoMap class displays a map, that it gets from MapData object.
* The GeoMap class displays a map, that it gets from MapProjection object.
* It handles the current location on the map, the zoom factor, interactions and
* the viewport, the area of the map, the user can see and navigate to.
*
@@ -26,12 +26,12 @@ export class GeoMap {
* Creates instance of GeoMap
*
* @constructor
* @param {MapData}[mapdata={}] - The mapdata describes how the map has to be interpreted by the Map class. E.g. what are the boundaries of the map?
* @param {MapProjection}[mapProjection={}] - The map projection describes how the map has to be interpreted by the Map class. E.g. what are the boundaries of the map?
* @param {object}[opts={}] - With the opts, the created MapObjectScatter can be adjusted.
* @param {boolean}[opts.cover=false] - Enables covering behaviour of a map object. Normally maps should cover the whole app.
*/
constructor(
mapdata = {},
mapProjection = {},
{
debug = true,
cover = true,
@@ -43,7 +43,7 @@ export class GeoMap {
translatable = true,
scalable = true,
rotatable = false, // Many functionalities are not supported when rotating the map. Mainly the cover mechanism.
viewport = mapdata.maxViewport,
viewport = mapProjection.maxViewport,
// Events
onLoad = null,
onTransform = null
@@ -54,6 +54,7 @@ export class GeoMap {
this.onTransform = new EventHandler('transform', { listeners: onTransform })
this._alpha = alpha
this._cover = cover
this.debug = debug
//TODO discuss if this is required here.
@@ -67,15 +68,15 @@ export class GeoMap {
this.scalable = scalable
this.viewport = viewport
this._mapdata = mapdata
this._mapProjection = mapProjection
this.overlays = {}
/**
* Adjust the viewport depending on the mapdata clipping.
* Adjust the viewport depending on the mapProjection clipping.
*/
if (this.mapdata.clip) {
if (this.mapProjection.clip) {
const vp = this.viewport
const cp = this.mapdata.clip
const cp = this.mapProjection.clip
let bounds = {
min: {
x: vp.min.x > cp.min.x ? vp.min.x : cp.min.x,
@@ -91,6 +92,18 @@ export class GeoMap {
}
}
/**
* Determines if the scatter covers the container.
* @member {boolean}
* @readonly
* @memberof GeoMap
*/
get cover() {
return this._cover
}
/**
* Returns the image object used by the GeoMap.
*
@@ -102,14 +115,14 @@ export class GeoMap {
}
/**
* The mapdata of the map.
* The mapProjection of the map.
*
* @member {MapData}
* @member {MapProjection}
* @readonly
* @memberof GeoMap
*/
get mapdata() {
return this._mapdata
get mapProjection() {
return this._mapProjection
}
/**
@@ -279,7 +292,7 @@ export class GeoMap {
* @returns {object} - Coordinates on the map in form of {x: latitude, y: longitude}.
*/
coordinatesFromPoint(point) {
let coords = this.mapdata.toCoordinates(this.toRelativePosition(point))
let coords = this.mapProjection.toCoordinates(this.toRelativePosition(point))
return coords
}
@@ -290,7 +303,7 @@ export class GeoMap {
* @return {Point} - Returns a image position in form of {x: x, y: y}.
*/
coordinatesToPoint(coordinates) {
return this.toAbsolutePixelCoordinates(this.mapdata.toPixel(coordinates))
return this.toAbsolutePixelCoordinates(this.mapProjection.toPixel(coordinates))
}
toRelativePosition(point) {
@@ -549,8 +562,8 @@ export class GeoMap {
const tilesConfig = data.tiles
const options = data.options
const mapdata = new DeepZoomMapData(projection, tilesConfig)
return new DeepZoomMap(mapdata, tilesConfig, options)
const mapProjection = new DeepZoomMapProjection(projection, tilesConfig)
return new DeepZoomMap(mapProjection, tilesConfig, options)
}
static _getProjectionByName(projection) {
@@ -578,31 +591,31 @@ export class DeepZoomMap extends GeoMap {
/**
* @constructor
* @param {object} tilesConfig - The tiles config object, that defines at what path and in which format the tiles are.
* @param {MapData} mapdata - A MapData object, that contains informations of how the given map has to be interpreted.
* @param {MapProjection} mapProjection - A MapProjection object, that contains informations of how the given map has to be interpreted.
* @param {object} opts - Additional options to specify the behaviour of the deep zoom image.
*/
constructor(mapdata, tilesConfig, opts = {}) {
constructor(mapProjection, tilesConfig, opts = {}) {
opts = Object.assign(
{
maxScale: Math.min(tilesConfig.width, tilesConfig.height) / tilesConfig.tileSize,
minScale: mapdata.getMinScale,
minScale: mapProjection.getMinScale,
highResolution: true,
debug: false
},
opts
)
super(mapdata, opts)
super(mapProjection, opts)
this.tilesConfig = tilesConfig
this._verifyMapdata()
this._verifyMapProjection()
}
_verifyMapdata() {
if (!(this.mapdata instanceof MapData)) {
console.error('Use the MapData object for creating maps!')
_verifyMapProjection() {
if (!(this.mapProjection instanceof MapProjection)) {
console.error('Use the MapProjection object for creating maps!')
} else {
if (!(this.mapdata instanceof DeepZoomMapData)) {
console.error('Use the DeepZoomMapData object.')
if (!(this.mapProjection instanceof DeepZoomMapProjection)) {
console.error('Use the DeepZoomMapProjection object.')
}
}
}
@@ -613,10 +626,10 @@ export class DeepZoomMap extends GeoMap {
* @private
*/
load(container = null, scatter = null) {
if (!this.mapdata.app) console.error('App was not set in the mapdata.')
if (!this.mapProjection.app) console.error('App was not set in the mapProjection.')
this.info = new DeepZoomInfo(this.tilesConfig)
let image = new DeepZoomImage(this.info, {
app: this.mapdata.app,
app: this.mapProjection.app,
alpha: this.alpha,
debug: this.debug,
world: scatter == null ? scatter : scatter.getWorldScatter()
@@ -734,9 +747,9 @@ export class DeepZoomMap extends GeoMap {
}
clone(container, scatter = null) {
const map = new DeepZoomMap(this.mapdata, this.tilesConfig, {
const map = new DeepZoomMap(this.mapProjection, this.tilesConfig, {
alpha: this.alpha,
cover: this.cover,
cover: this.image.scatter.cover,
debug: this.debug,
startScale: this.startScale,
minScale: this.minScale,
@@ -802,9 +815,9 @@ DeepZoomMap.tintcolor = 0
* @extends {GeoMap}
*/
export class ImageMap extends GeoMap {
constructor(sprite, mapdata, opts = {}) {
super(mapdata, opts)
if (this.debug) console.log('Construct Image Map', sprite, mapdata, opts)
constructor(sprite, mapProjection, opts = {}) {
super(mapProjection, opts)
if (this.debug) console.log('Construct Image Map', sprite, mapProjection, opts)
this.sprite = sprite
@@ -818,9 +831,9 @@ export class ImageMap extends GeoMap {
}
clone(container = null, scatter = null) {
const map = new ImageMap(new PIXI.Sprite(this.sprite.texture), this.mapdata, {
const map = new ImageMap(new PIXI.Sprite(this.sprite.texture), this.mapProjection, {
alpha: this.alpha,
cover: this.cover,
cover: this.image.cover,
debug: this.debug,
startScale: this.startScale,
minScale: this.minScale,
lib/pixi/maps/mapapp.html
+5 -5
View File
@@ -102,7 +102,7 @@
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapData(new Projection.Mercator(), {
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
@@ -120,16 +120,16 @@
cover
})
let testMapData = new DeepZoomMapData(new Projection.Mercator(), testConfig.tiles, {
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapData, Object.assign({}, testConfig.tiles, { app }), { cover })
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
app.addMap("test", testMap)
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app }), { cover })
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
app.addMap("osm", deepZoomMap)
// Finally apply the map to the MapApp
lib/pixi/maps/mapdata.html → lib/pixi/maps/mapprojection.html
+12 -12
View File
@@ -3,7 +3,7 @@
<head>
<meta charset='UTF-8'>
<title>MapData</title>
<title>MapProjection</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
@@ -37,8 +37,8 @@
</head>
<body onload='Doctest.run()'>
<h1>MapData</h1>
<p>Mapdata calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
<h1>MapProjection</h1>
<p>The map projection calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
<h2>Static Squared World Map</h2>
<p>The most simple example is a squared world map, thats projected with mercator transformation. Ranging from
@@ -73,9 +73,9 @@
//Helper function to print the coordinates to a dom element.
function printCoordinates(element, mapdata, out_dom) {
function printCoordinates(element, mapProjection, out_dom) {
element.addEventListener("mousemove", (event) => {
let coords = mapdata.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
let coords = mapProjection.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
out_dom.innerHTML = "Lat: " + coords.x.toFixed(4) + " Lng: " + coords.y.toFixed(4)
})
}
@@ -99,8 +99,8 @@
</script>
<script class="doctest">
// Instantiate our mapdata.
let squared_world = new MapData(new Projection.Mercator());
// Instantiate our map projection.
let squared_world = new MapProjection(new Projection.Mercator());
// Define a position, we are interested in in {x: latitude, y: longitude}
let iceland = { x: 64.514979, y: -19.020796 }
@@ -116,7 +116,7 @@
printCoordinates(map_image_0, squared_world, map_coords_0)
</script>
<h2 id="germany">Clipped Map</h2>
<p>Often we don't use the whole map, or our map is a subsection of the world. MapData can clip those cases, using
<p>Often we don't use the whole map, or our map is a subsection of the world. MapProjection can clip those cases, using
the a
bounding box of min and max coordinates.</p>
<p>Coordinates:
@@ -127,8 +127,8 @@
</div>
<script class="doctest">
//Same procedure as above, just add a clipping parameter to the MapData object.
let europe = new MapData(new Projection.Mercator(), {
//Same procedure as above, just add a clipping parameter to the MapProjection object.
let europe = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
@@ -159,7 +159,7 @@
const size = 256
// Fake offset by using the old mapdata.
// Fake offset by using the old map projection.
let translation = squared_world.toPixel({ x: 90-10, y: -140 })
console.log(translation)
@@ -167,7 +167,7 @@
//This map is clipped at the bottom
// And also translated in hoizontal direction.
// The translate option corrects that.
let translated_world = new MapData(new Projection.Mercator(), {
let translated_world = new MapProjection(new Projection.Mercator(), {
translate: { x: -10, y: 40 },
})
lib/pixi/maps/mapdata.js → lib/pixi/maps/mapprojection.js
+15 -15
View File
@@ -1,15 +1,15 @@
/**
* MapData contains the informations about how
* MapProjection contains the informations about how
* a Map has to be interpreted. What are the bounds of the
* map and how to translate coordinates into
* image positions.
*
* @class
* @see {@link mapdata.html}
* @see {@link mapprojection.html}
*/
export class MapData {
export class MapProjection {
/**
* Creates instance of MapData
* Creates instance of MapProjection
*
* @constructor
* @param {Projection}[projection] - Specifies the projection of the map (e.g. Mercator Projection).
@@ -50,11 +50,11 @@ export class MapData {
}
/**
* The projection used by the mapdata.
* The projection used by the map projection.
*
* @member {Projection}
* @readonly
* @memberof MapData
* @memberof MapProjection
*/
get projection() {
return this._projection
@@ -66,7 +66,7 @@ export class MapData {
* @public
* @param {Point} point - A pixel position on the map.
* @returns {CoordinatePoint} A geographical coordinate.
* @memberof MapData
* @memberof MapProjection
*/
toCoordinates(point) {
if (this.opts.clip) {
@@ -99,7 +99,7 @@ export class MapData {
* @public
* @param {CoordinatePoint} coordinates - A point in the form of {x:lat,y:lng}.
* @returns {Point} A pixel position on the map.
* @memberof MapData
* @memberof MapProjection
*/
toPixel(coordinates) {
let coords = { x: coordinates.x, y: coordinates.y }
@@ -140,7 +140,7 @@ export class MapData {
*
* @readonly
* @member {object}
* @memberof MapData
* @memberof MapProjection
*/
get clip() {
let unclipped = {
@@ -152,11 +152,11 @@ export class MapData {
}
/**
* Returns the biggest viewport the mapdata allows.
* Returns the biggest viewport the map projection allows.
* This is determined by the projecton or the clipping on the mapapp.
*
* @readonly
* @memberof MapData
* @memberof MapProjection
*/
get maxViewport() {
return this.opts.clip ? this.opts.clip : this.projection.maxViewport
@@ -164,16 +164,16 @@ export class MapData {
}
/**
* Special mapdata for DeepZoomMap objects.
* Special map projection 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 DeepZoomMapProjection
* @extends {MapProjection}
*/
export class DeepZoomMapData extends MapData {
export class DeepZoomMapProjection extends MapProjection {
constructor(projection, tilesConfig, opts = {}) {
if (tilesConfig.clip) {
opts.clip = {
lib/pixi/maps/maps.html
+9 -9
View File
@@ -81,11 +81,11 @@
})
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app: app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app: app }), { cover: true })
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app: app }), { cover: true })
app.setMap("deepzoom", deepZoomMap)
@@ -127,11 +127,11 @@
const app = new MapApp(opts)
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app: app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app: app }), Object.assign({ cover: false }, mapOptipns))
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app: app }), Object.assign({ cover: false }, mapOptipns))
app.setMap("deepzoom", deepZoomMap)
@@ -216,8 +216,8 @@
// Called when all textures are loaded.
let ready = (sprites) => {
// Define the mapdata for the map.
let europeData = new MapData(new Projection.Mercator(), {
// Define the map projection for the map.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
@@ -225,7 +225,7 @@
})
// Create the map using the texture and the mapdata.
// Create the map using the texture and the map projection.
// Optionally customize the map by supplying secific options.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
cover: false
@@ -270,12 +270,12 @@
})
// Create the deepzoomdata.
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), mapConfig.tiles, {
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), mapConfig.tiles, {
app
})
// Create the app.
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, mapConfig.tiles, { app }), { cover: false })
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, mapConfig.tiles, { app }), { cover: false })
// Set the map in the app.
app.setMap("deepzoom", deepZoomMap)
lib/pixi/maps/mapviewport.html
+6 -6
View File
@@ -98,11 +98,11 @@
resolutionDependent: false
})
// The mapdata object contains informations,
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapData(new Projection.Mercator(), {
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
@@ -120,16 +120,16 @@
cover
})
let testMapData = new DeepZoomMapData(new Projection.Mercator(), testConfig.tiles, {
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapData, Object.assign({}, testConfig.tiles, { app }), { cover })
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), { cover })
app.addMap("test", testMap)
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app }), { cover })
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), { cover })
app.addMap("osm", deepZoomMap)
// Finally apply the map to the MapApp
lib/pixi/maps/mapviewport.js
+1 -1
View File
@@ -170,7 +170,7 @@ export default class MapViewport {
y: position.y / (map.height * map.scatter.scale)
}
let coordinates = map.mapdata.toCoordinates(normalized)
let coordinates = map.mapProjection.toCoordinates(normalized)
return coordinates
}
lib/pixi/maps/overlay.html
+1 -1
View File
@@ -47,7 +47,7 @@
coordsLogging: true
})
var osmworld = '../assets/maps/osm/0/0/0.png'
let worlOSMData = new MapData(new Projection.Mercator())
let worlOSMData = new MapProjection(new Projection.Mercator())
function setupMap(textures) {
lib/pixi/maps/projections/projections.html
+1 -1
View File
@@ -77,7 +77,7 @@
<body onload="Doctest.run()">
<h1>Projections</h1>
<p>
Projections are used on the mapdata to translate coordinates to pixelpositions. There are various
Projections are used on the map projection to translate coordinates to pixelpositions. There are various
projections that can be used. All implemented ones are showcased here.
</p>