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])
|
||||
|
||||
Reference in New Issue
Block a user