Removed PIXIUtils from geographics.
This commit is contained in:
+142
-77
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<html lang='en' class="dark-mode">
|
||||
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
@@ -29,73 +29,7 @@
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
let 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 }
|
||||
}
|
||||
|
||||
window.apps = [
|
||||
|
||||
]
|
||||
|
||||
function createApp(view) {
|
||||
let app = window.GeoPointApp = new MapApp({
|
||||
view,
|
||||
focus: { x: 0, y: 0 },
|
||||
zoom: 1,
|
||||
width: 512,
|
||||
height: 512,
|
||||
coordsLogging: true
|
||||
})
|
||||
|
||||
const osmworld = "../assets/maps/osm/0/0/0.png"
|
||||
const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
||||
|
||||
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
reject("Creating app timed out.")
|
||||
}, 3000)
|
||||
|
||||
app.loadSprites([
|
||||
osmworld,
|
||||
wikimedia
|
||||
], (sprites) => {
|
||||
|
||||
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, debug: true
|
||||
})
|
||||
|
||||
app.addMaps({
|
||||
"osm": osmMap, "wiki": wikimediaMap
|
||||
})
|
||||
app.selectMap("osm")
|
||||
app.setup().run()
|
||||
window.apps.push(app)
|
||||
resolve(app)
|
||||
}, { resolutionDependent: false })
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function enableSwitch(button, app) {
|
||||
button.addEventListener("click", () => {
|
||||
let next = app.mapLayer.next()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body onload='Doctest.run()'>
|
||||
<h1>GeoGraphics</h1>
|
||||
@@ -111,12 +45,139 @@
|
||||
</ul>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<h3>Content</h3>
|
||||
<ol>
|
||||
<li><a href="#geopoint">Gep Point</a></li>
|
||||
<li><a href="#geoline">Geo Line</a></li>
|
||||
<li><a href="#geoshape">Geo Shape</a></li>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Hidden Scripts -->
|
||||
<script>
|
||||
window.apps = []
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h2>Data & Functions</h2>
|
||||
<!-- Capitals Data. -->
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="Capitals Data">
|
||||
|
||||
// Some random capitals of the world.
|
||||
// Coordinates taken from Google Maps.
|
||||
let 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 }
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="enableSwitch(button, app)">
|
||||
|
||||
// Adds an eventlistener to a button, that it changes the map.
|
||||
function enableSwitch(button, app) {
|
||||
button.addEventListener("click", () => {
|
||||
// Always call the next map.
|
||||
let next = app.mapLayer.next()
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="createApp(view)">
|
||||
|
||||
// Creates a MapApp with two predefined maps on a specified canvas element.
|
||||
function createApp(canvas, options) {
|
||||
|
||||
// Create MapApp.
|
||||
let app = window.GeoPointApp = new MapApp(Object.assign({
|
||||
view: canvas,
|
||||
focus: { x: 0, y: 0 },
|
||||
zoom: 1,
|
||||
width: 512,
|
||||
height: 512,
|
||||
coordsLogging: true
|
||||
}, options))
|
||||
|
||||
// Images used for the maps.
|
||||
const osmworld = "../assets/maps/osm/0/0/0.png"
|
||||
const wikimedia = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
||||
|
||||
|
||||
// ImageMaps need to be loaded first. Therefore we return a promise.
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// Add a timeout that cancels the promise when it takes too long.
|
||||
setTimeout(() => {
|
||||
reject("Creating app timed out.")
|
||||
}, 3000)
|
||||
|
||||
// The app's loader loads the sprites.
|
||||
app.loadSprites([
|
||||
osmworld,
|
||||
wikimedia
|
||||
], (sprites) => {
|
||||
|
||||
// For demonstration of the geographics capability,
|
||||
// Two different projections are used.
|
||||
const MercatorProjection = new Projection.Mercator()
|
||||
const RobinsonProjection = new Projection.Robinson(10)
|
||||
|
||||
// In the MapDataOptions 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 }
|
||||
|
||||
|
||||
// Specifies a common zoom height for both maps.
|
||||
// Otherwise the zoomFactor would differ and on mapchange it
|
||||
// would appear as the map zoomes drastically in and out.
|
||||
const osmHeight = sprites.get(osmworld).height
|
||||
const mapOptions = {
|
||||
baseZoomHeight: osmHeight
|
||||
}
|
||||
|
||||
// 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)
|
||||
|
||||
// Add the maps to the mapapp.
|
||||
// An object is used to have a key, that identifies the maps.
|
||||
app.addMaps({
|
||||
"osm": osmMap, "wiki": wikimediaMap
|
||||
})
|
||||
|
||||
// Select a specific map.
|
||||
// The addMaps function sets a 'random' map as startmap.
|
||||
app.selectMap("osm")
|
||||
|
||||
// Run the app after the maps were set.
|
||||
app.setup().run()
|
||||
|
||||
// [DEBUG] Save the app in a global array.
|
||||
window.apps.push(app)
|
||||
|
||||
// Resolve the promise.
|
||||
resolve(app)
|
||||
}, {
|
||||
// Tell the loader to not load the images resolution dependent.
|
||||
// That results in 'weird' naming of the textures.
|
||||
resolutionDependent: false
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
</section>
|
||||
|
||||
<!--GeoPoint -->
|
||||
<section id="geopoint">
|
||||
<h2>GeoPoint</h2>
|
||||
@@ -127,7 +188,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<script class="doctest">
|
||||
<script class="doctest" data-title="GeoPoint Example" data-collapsible>
|
||||
|
||||
; (function () {
|
||||
createApp(geopoint_canvas).then(app => {
|
||||
@@ -168,11 +229,12 @@
|
||||
<canvas id="geoline_canvas"></canvas>
|
||||
<div class="controls">
|
||||
<button id="geoline_switch">Change Map</button>
|
||||
<label>closed
|
||||
<label>
|
||||
<input type="checkbox" id="geoline_close_toggle">
|
||||
</label>
|
||||
</div>
|
||||
<script class="doctest">
|
||||
<div class="checkbox"></div>
|
||||
<span>Close Line</span>
|
||||
</label> </div>
|
||||
<script class="doctest" data-title="GeoLine Example">
|
||||
|
||||
; (function () {
|
||||
createApp(geoline_canvas).then(app => {
|
||||
@@ -242,7 +304,7 @@
|
||||
</div>
|
||||
<button id="geoshape_switch">Change Map</button>
|
||||
|
||||
<script class='doctest'>
|
||||
<script class='doctest' data-title="GeoShape Example">
|
||||
|
||||
|
||||
(function () {
|
||||
@@ -297,7 +359,7 @@
|
||||
<div class="wrapper">
|
||||
<canvas id="geojson_canvas"></canvas>
|
||||
</div>
|
||||
<button id="geojson_switch">changemap</button>
|
||||
<button id="geojson_switch">Change Map</button>
|
||||
|
||||
<script class="doctest" data-title="GeoJson Raw Data" data-collapsed data-collapsible>
|
||||
|
||||
@@ -310,7 +372,10 @@
|
||||
|
||||
; (function () {
|
||||
|
||||
createApp(geojson_canvas).then(app => {
|
||||
createApp(geojson_canvas, {
|
||||
zoom: 6,
|
||||
focus: { x: 50.99, y: -119.9 }
|
||||
}).then(app => {
|
||||
let geoLayer = new GeoLayer(new PIXI.Container())
|
||||
|
||||
let geographics = GeoUtils.transformToGeoGraphics([usaFeatureCollection])
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Points } from '../../utils.js'
|
||||
import { EventHandler } from './utils.js'
|
||||
import { FlagPolygon } from '../graphics/label.js'
|
||||
import { DeepZoomMap } from './map.js'
|
||||
import { PIXIUtils } from '../../../../js/pixi/utils.js'
|
||||
|
||||
/**
|
||||
* GeoGraphics are graphical objects, that does not store the graphics information
|
||||
@@ -441,15 +442,12 @@ export class GeoShape extends GeoGraphics {
|
||||
*/
|
||||
_drawShape(polygon, hole = []) {
|
||||
// We save the fill specified in the onDraw event handler.
|
||||
//
|
||||
// Consider: Maybe it would be a good idea to add a 'onHoleDraw'
|
||||
// callback to make the hole customizable. Maybe you want
|
||||
// to fill it with a different color or an mediocre alpha value.
|
||||
// then feel free to implement it.
|
||||
let { fill, alpha } = PIXIUtils.saveFill(this.graphics)
|
||||
|
||||
/**
|
||||
* This may seem redundant, but it's required
|
||||
* a) Draw the hole with a polygon.
|
||||
*
|
||||
* This may seem redundant to (c), but it's required (in this order(!))
|
||||
* to make the hole clickable.
|
||||
*
|
||||
* It was a bit confusing, so I made a CodePen
|
||||
@@ -460,9 +458,15 @@ export class GeoShape extends GeoGraphics {
|
||||
this.graphics.drawPolygon(hole)
|
||||
}
|
||||
|
||||
/**
|
||||
* b) Draw the shape.
|
||||
*/
|
||||
this.graphics.beginFill(fill, alpha)
|
||||
this.graphics.drawPolygon(polygon)
|
||||
|
||||
/**
|
||||
* c) Add the hole.
|
||||
*/
|
||||
if (hole.length > 0) {
|
||||
this.graphics.beginHole()
|
||||
this.graphics.drawPolygon(hole)
|
||||
@@ -524,6 +528,14 @@ class GeoMultiGraphics extends GeoGraphics {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @export
|
||||
* @class GeoText
|
||||
* @extends {GeoPoint}
|
||||
*/
|
||||
export class GeoText extends GeoPoint {
|
||||
constructor(coordinates, text, opts) {
|
||||
super(coordinates, opts)
|
||||
@@ -531,14 +543,6 @@ export class GeoText extends GeoPoint {
|
||||
this.textStyle = Object.assign(new PIXI.TextStyle(), opts.textStyle)
|
||||
this._text = new PIXI.Text(text, this.textStyle)
|
||||
|
||||
//TODO: Make this more generic:
|
||||
// We have 8 layers (12-20) for each map so this temporarily works fine.
|
||||
// Outsource it to the map class.
|
||||
//let textScale = Math.pow(2, 7)
|
||||
|
||||
// let textScale = 5
|
||||
// this.text.scale.set(1 / textScale, 1 / textScale)
|
||||
|
||||
switch (this.align) {
|
||||
case 'left':
|
||||
break
|
||||
@@ -715,27 +719,3 @@ export class GeoMultiShape extends GeoShape {
|
||||
}
|
||||
}
|
||||
|
||||
class PIXIUtils {
|
||||
/*
|
||||
* Transform a pixi text to it's actual screensize,
|
||||
* ignoring it's local transforms
|
||||
*/
|
||||
static toScreenFontSize(pixiText, fontSize = null) {
|
||||
pixiText._recursivePostUpdateTransform()
|
||||
|
||||
let normalizedScale = {
|
||||
x: pixiText.scale.x / pixiText.transform.worldTransform.a,
|
||||
y: pixiText.scale.x / pixiText.transform.worldTransform.d
|
||||
}
|
||||
|
||||
pixiText.scale = { x: normalizedScale.x, y: normalizedScale.y }
|
||||
if (fontSize) pixiText.style.fontSize = fontSize
|
||||
}
|
||||
|
||||
static saveFill(graphics) {
|
||||
return {
|
||||
fill: graphics.fill.color,
|
||||
alpha: graphics.fill.alpha
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user