405 lines
31 KiB
HTML
405 lines
31 KiB
HTML
<!doctype html>
|
|
<html lang='en' class="dark-mode">
|
|
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>GeoGraphics</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>
|
|
.inline-showcase {
|
|
display: flex
|
|
}
|
|
|
|
.map-example {
|
|
display: inline-block;
|
|
width: 256px;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
|
|
|
|
<body onload='Doctest.run()'>
|
|
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>GeoGraphics</h1>
|
|
<p> GeoGraphics are graphical objects, that does not store the graphics information
|
|
in screen space, but in geographical coordinates. Therefore GeoGraphics must be
|
|
placed on GeoLayers to work properly. </p>
|
|
<p><i>
|
|
Note: As GeoLayers are always children of a map layer. When the map is changed
|
|
all GeoLayers are notified via the 'adaptTo(map)' method.</i></p>
|
|
<p>
|
|
The geolayers forward this 'adaptTo' to all children that are GeoGraphics.
|
|
Which adjust their so called 'point' data to the new map.</p>
|
|
</ul>
|
|
|
|
<nav>
|
|
<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>
|
|
</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 MapProjectionOptions specific behaviour can be enforced.
|
|
// E.g. Setting cover to false removes the enforcement of the map to cover the
|
|
// whole mapLayer.
|
|
const mapProjectionOptions = { 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 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.
|
|
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>
|
|
<a href="../../../doc/out/GeoPoint.html" class="documentation" target="_blank"><i class="material-icons">
|
|
book
|
|
</i> GeoPoint</a>
|
|
<p>GeoPoint is a single coordinate in the map.</p>
|
|
<canvas id="geopoint_canvas"></canvas>
|
|
<div class=" controls">
|
|
<button id="geopoint_switch">Change Map</button>
|
|
</div>
|
|
|
|
|
|
<script class="doctest" data-title="GeoPoint Example" data-collapsible>
|
|
|
|
; (function () {
|
|
createApp(geopoint_canvas).then(app => {
|
|
|
|
let capitalContainer = new PIXI.Container()
|
|
let capitalLayer = new GeoLayer(capitalContainer)
|
|
for (key in capitals) {
|
|
let capitalPoint = new GeoPoint(capitals[key], {
|
|
|
|
/**
|
|
* To style GeoGraphics, the fill has to be set in the
|
|
* onDraw callback.
|
|
*
|
|
* Note: GeoPoints are the only GeoGraphic with no
|
|
* initial geometry attached. These have to be drawn to
|
|
* the graphics object manually.
|
|
*/
|
|
onDraw: function () {
|
|
this.graphics.beginFill(0xFF0000)
|
|
this.graphics.drawCircle(0, 0, 5)
|
|
this.graphics.endFill()
|
|
}
|
|
})
|
|
capitalContainer.addChild(capitalPoint)
|
|
}
|
|
|
|
enableSwitch(geopoint_switch, app)
|
|
|
|
app.mapLayer.addLayer(capitalLayer)
|
|
}).catch(console.error)
|
|
})()
|
|
|
|
</script>
|
|
</section>
|
|
<section id="geoline">
|
|
<h2>GeoLine</h2>
|
|
<p>Geo line is a set of points, that are rendered as a line and can be updated individually.</p>
|
|
<canvas id="geoline_canvas"></canvas>
|
|
<div class="controls">
|
|
<button id="geoline_switch">Change Map</button>
|
|
<label>
|
|
<input type="checkbox" id="geoline_close_toggle">
|
|
<div class="checkbox"></div>
|
|
<span>Close Line</span>
|
|
</label> </div>
|
|
<script class="doctest" data-title="GeoLine Example">
|
|
|
|
; (function () {
|
|
createApp(geoline_canvas).then(app => {
|
|
let geoLayer = new GeoLayer(new PIXI.Container())
|
|
|
|
//// You can initialize the GeoLine with a set of coordinates.
|
|
let newYorkRooseveltAirField = { x: 40.738473, y: -73.613131 }
|
|
let aeroport_de_Paris_le_bourget = { x: 48.960373, y: 2.436891 }
|
|
|
|
// Instantiate the geo line.
|
|
let lindberghTransatlanticFlight = new GeoLine([
|
|
newYorkRooseveltAirField,
|
|
aeroport_de_Paris_le_bourget
|
|
], {
|
|
// Define how the line should be drawn.
|
|
// Note: This is called everytime the GeoGraphic
|
|
// has to adapt.
|
|
onDraw: function () {
|
|
this.graphics.lineStyle(3, 0xf8baea)
|
|
}
|
|
})
|
|
|
|
// Just place it on a GeoLayer.
|
|
geoLayer.addChild(lindberghTransatlanticFlight)
|
|
|
|
|
|
// Another option is to add points with the *addPoint()* method.
|
|
// This is useful for dynamic lines.
|
|
let geoline = new GeoLine([], {
|
|
onDraw: function () {
|
|
this.graphics.lineStyle(3, 0x00cc54, 0.5)
|
|
}
|
|
})
|
|
geoLayer.addChild(geoline)
|
|
for (let [name, coordinates] of Object.entries(capitals)) {
|
|
geoline.addPoint(coordinates)
|
|
}
|
|
|
|
// Don't forget to add the geolayer to the maplayer.
|
|
app.mapLayer.addLayer(geoLayer)
|
|
|
|
enableSwitch(geoline_switch, app)
|
|
|
|
geoline_close_toggle.addEventListener("input", () => {
|
|
|
|
geoline.closed = geoline_close_toggle.checked
|
|
})
|
|
|
|
}).catch(console.error)
|
|
})()
|
|
|
|
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section id="geoshape">
|
|
|
|
<h2>Geoshape</h2>
|
|
<p>GeoGraphics represent Polygons, that are drawn on a map. If the map change, the graphic adapts to the new map
|
|
and represents
|
|
the same geographical shape.</p>
|
|
<div class="inline-showcase">
|
|
<div class="map-example">
|
|
<canvas id="geoshape_canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<button id="geoshape_switch">Change Map</button>
|
|
|
|
<script class='doctest' data-title="GeoShape Example">
|
|
|
|
|
|
(function () {
|
|
createApp(geoshape_canvas).then((app) => {
|
|
|
|
let triangle = [
|
|
[capitals.berlin,
|
|
capitals.moscow,
|
|
capitals.tokio,
|
|
capitals.canberra,
|
|
capitals.capetown]
|
|
]
|
|
|
|
let countryLayer = new GeoLayer(new PIXI.Container(), { name: "Country Layer" })
|
|
|
|
|
|
let shape = new GeoShape(triangle, {
|
|
onDraw: function () {
|
|
this.graphics.beginFill(0xFF0000)
|
|
}
|
|
})
|
|
|
|
/**
|
|
* The following click handler should trigger when either the
|
|
* shape or a hole is clicked. This is the default and intended
|
|
* behaviour, as holes are considered to be contained by the
|
|
* desired geometry and should not interefere with any userinteraction.
|
|
*/
|
|
shape.graphics.interactive = true
|
|
shape.graphics.on("pointerdown", () => {
|
|
app.showNotification("Shape was clicked!")
|
|
})
|
|
|
|
countryLayer.addChild(shape)
|
|
app.mapLayer.addLayer(countryLayer)
|
|
|
|
enableSwitch(geoshape_switch, app)
|
|
|
|
|
|
|
|
}).catch(console.error)
|
|
})()
|
|
|
|
</script>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>GeoGraphics & GeoJson</h2>
|
|
<p>The GeoGraphics work together with the GeoJson class. To convert the standardized format to PIXI elements.
|
|
</p>
|
|
|
|
<div class="wrapper">
|
|
<canvas id="geojson_canvas"></canvas>
|
|
</div>
|
|
<button id="geojson_switch">Change Map</button>
|
|
|
|
<script class="doctest" data-title="GeoJson Raw Data" data-collapsed data-collapsible>
|
|
|
|
window.usaFeatureCollection = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "scalerank": 1, "featurecla": "Admin-0 country", "labelrank": 2, "sovereignt": "United States of America", "sov_a3": "US1", "adm0_dif": 1, "level": 2, "type": "Country", "admin": "United States of America", "adm0_a3": "USA", "geou_dif": 0, "geounit": "United States of America", "gu_a3": "USA", "su_dif": 0, "subunit": "United States of America", "su_a3": "USA", "brk_diff": 0, "name": "United States", "name_long": "United States", "brk_a3": "USA", "brk_name": "United States", "brk_group": null, "abbrev": "U.S.A.", "postal": "US", "formal_en": "United States of America", "formal_fr": null, "note_adm0": null, "note_brk": null, "name_sort": "United States of America", "name_alt": null, "mapcolor7": 4, "mapcolor8": 5, "mapcolor9": 1, "mapcolor13": 1, "pop_est": 313973000, "gdp_md_est": 15094000, "pop_year": 0, "lastcensus": 2010, "gdp_year": 0, "economy": "1. Developed region: G7", "income_grp": "1. High income: OECD", "wikipedia": 0, "fips_10": null, "iso_a2": "US", "iso_a3": "USA", "iso_n3": "840", "un_a3": "840", "wb_a2": "US", "wb_a3": "USA", "woe_id": -99, "adm0_a3_is": "USA", "adm0_a3_us": "USA", "adm0_a3_un": -99, "adm0_a3_wb": -99, "continent": "North America", "region_un": "Americas", "subregion": "Northern America", "region_wb": "North America", "name_len": 13, "long_len": 13, "abbrev_len": 6, "tiny": -99, "homepart": 1, "filename": "USA.geojson" }, "geometry": { "type": "MultiPolygon", "coordinates": [[[[-155.54211, 19.08348], [-155.68817, 18.91619], [-155.93665, 19.05939], [-155.90806, 19.33888], [-156.07347, 19.70294], [-156.02368, 19.81422], [-155.85008, 19.97729], [-155.91907, 20.17395], [-155.86108, 20.26721], [-155.78505, 20.2487], [-155.40214, 20.07975], [-155.22452, 19.99302], [-155.06226, 19.8591], [-154.80741, 19.50871], [-154.83147, 19.45328], [-155.22217, 19.23972], [-155.54211, 19.08348]]], [[[-156.07926, 20.64397], [-156.41445, 20.57241], [-156.58673, 20.783], [-156.70167, 20.8643], [-156.71055, 20.92676], [-156.61258, 21.01249], [-156.25711, 20.91745], [-155.99566, 20.76404], [-156.07926, 20.64397]]], [[[-156.75824, 21.17684], [-156.78933, 21.06873], [-157.32521, 21.09777], [-157.25027, 21.21958], [-156.75824, 21.17684]]], [[[-157.65283, 21.32217], [-157.70703, 21.26442], [-157.7786, 21.27729], [-158.12667, 21.31244], [-158.2538, 21.53919], [-158.29265, 21.57912], [-158.0252, 21.71696], [-157.94161, 21.65272], [-157.65283, 21.32217]]], [[[-159.34512, 21.982], [-159.46372, 21.88299], [-159.80051, 22.06533], [-159.74877, 22.1382], [-159.5962, 22.23618], [-159.36569, 22.21494], [-159.34512, 21.982]]], [[[-94.81758, 49.38905], [-94.63999999999987, 48.84000000000012], [-94.32914, 48.67074000000011], [-93.63087, 48.60926], [-92.61, 48.45], [-91.64, 48.14], [-90.82999999999986, 48.27], [-89.6, 48.010000000000105], [-89.27291744663668, 48.01980825458284], [-88.37811418328653, 48.30291758889382], [-87.43979262330024, 47.94], [-86.46199083122815, 47.55333801939204], [-85.65236324740323, 47.22021881773051], [-84.87607988151485, 46.90008331968238], [-84.77923824739983, 46.63710195574913], [-84.54374874544567, 46.53868419044923], [-84.6049, 46.4396], [-84.3367, 46.40877000000011], [-84.1421195136733, 46.51222585711574], [-84.09185126416148, 46.27541860613826], [-83.89076534700567, 46.116926988299156], [-83.6161309475905, 46.116926988299156], [-83.46955074739463, 45.99468638771259], [-83.59285071484308, 45.81689362241255], [-82.55092464875818, 45.34751658790545], [-82.33776312543108, 44.44], [-82.13764238150397, 43.57108755144], [-82.43, 42.9800000000001], [-82.89999999999989, 42.43000000000015], [-83.11999999999989, 42.08], [-83.14199968131256, 41.975681057293], [-83.02981014680694, 41.83279572200601], [-82.69008928092018, 41.675105088867326], [-82.43927771679162, 41.675105088867326], [-81.27774654816707, 42.20902598730686], [-80.24744767934784, 42.36619985612267], [-78.9393621487437, 42.86361135514812], [-78.92, 42.965], [-79.00999999999988, 43.27], [-79.17167355011188, 43.46633942318431], [-78.72027991404238, 43.62508942318496], [-77.73788509795762, 43.62905558936339], [-76.82003414580558, 43.628784288093755], [-76.5, 44.018458893758606], [-76.375, 44.09631], [-75.31821, 44.816450000000174], [-74.867, 45.000480000000124], [-73.34783, 45.00738], [-71.50505999999987, 45.0082000000001], [-71.405, 45.25500000000014], [-71.08482, 45.30524000000017], [-70.6599999999998, 45.46], [-70.305, 45.915], [-69.99997, 46.69307], [-69.237216, 47.447781], [-68.905, 47.185], [-68.23444, 47.35486], [-67.79046, 47.06636], [-67.79134, 45.70281000000014], [-67.13741, 45.13753], [-66.96466, 44.80970000000016], [-68.03252, 44.3252], [-69.05999999999989, 43.98], [-70.11617, 43.684050000000155], [-70.645475633411, 43.09023834896405], [-70.81489, 42.8653], [-70.825, 42.335], [-70.495, 41.805], [-70.08, 41.78], [-70.185, 42.145], [-69.88497, 41.92283000000012], [-69.96503, 41.63717000000017], [-70.64, 41.475], [-71.12039, 41.49445000000017], [-71.85999999999984, 41.32], [-72.295, 41.27], [-72.87643, 41.22065], [-73.71, 40.93110235165449], [-72.24126, 41.11948000000015], [-71.94499999999982, 40.93], [-73.345, 40.63], [-73.982, 40.628], [-73.952325, 40.75075], [-74.25671, 40.47351], [-73.96244, 40.42763], [-74.17838, 39.70926], [-74.90604, 38.93954], [-74.98041, 39.1964], [-75.20002, 39.248450000000105], [-75.52805, 39.4985], [-75.32, 38.96], [-75.0718347647898, 38.78203223017928], [-75.05673, 38.40412000000012], [-75.37747, 38.01551], [-75.94023, 37.21689], [-76.03127, 37.2566], [-75.72204999999978, 37.93705000000011], [-76.23287, 38.319215], [-76.35, 39.15], [-76.542725, 38.71761500000011], [-76.32933, 38.08326], [-76.98999793161354, 38.23999176691339], [-76.30162, 37.917945], [-76.25874, 36.96640000000011], [-75.9718, 36.89726], [-75.86803999999984, 36.55125], [-75.72749, 35.55074000000013], [-76.36318, 34.80854000000013], [-77.39763499999988, 34.51201], [-78.05496, 33.92547], [-78.55434999999983, 33.86133000000012], [-79.06067, 33.49395], [-79.20357, 33.15839], [-80.301325, 32.509355], [-80.86498, 32.0333], [-81.33629, 31.44049], [-81.49042, 30.72999000000013], [-81.31371, 30.035520000000105], [-80.98, 29.180000000000117], [-80.53558499999988, 28.47213], [-80.5299999999998, 28.040000000000106], [-80.05653928497756, 26.880000000000138], [-80.088015, 26.205765], [-80.13155999999987, 25.816775], [-80.38103, 25.20616], [-80.67999999999988, 25.08], [-81.17213, 25.201260000000133], [-81.33, 25.64], [-81.70999999999981, 25.87], [-82.24, 26.730000000000132], [-82.70515, 27.49504], [-82.85526, 27.88624], [-82.65, 28.550000000000153], [-82.92999999999988, 29.100000000000136], [-83.70959, 29.93656], [-84.1, 30.090000000000117], [-85.10882, 29.63615], [-85.28784, 29.68612000000013], [-85.7731, 30.152610000000124], [-86.39999999999988, 30.40000000000012], [-87.53036, 30.27433], [-88.41782, 30.3849], [-89.18048999999984, 30.31598], [-89.59383117841978, 30.15999400483685], [-89.413735, 29.89419], [-89.43, 29.48864], [-89.21767, 29.29108], [-89.40823, 29.15961], [-89.77928, 29.307140000000143], [-90.15463, 29.11743], [-90.880225, 29.148535000000123], [-91.62678499999987, 29.67700000000013], [-92.49906, 29.5523], [-93.22637, 29.78375], [-93.84842, 29.71363], [-94.69, 29.480000000000132], [-95.60026, 28.73863], [-96.59404, 28.30748], [-97.13999999999982, 27.83], [-97.37, 27.38], [-97.37999999999987, 26.69], [-97.33, 26.21000000000012], [-97.13999999999982, 25.87], [-97.52999999999989, 25.84], [-98.24, 26.060000000000116], [-99.01999999999988, 26.37], [-99.3, 26.84], [-99.51999999999987, 27.54], [-100.11, 28.110000000000127], [-100.45584, 28.696120000000118], [-100.9576, 29.380710000000132], [-101.6624, 29.779300000000116], [-102.48, 29.76], [-103.11, 28.97], [-103.94, 29.27], [-104.45696999999984, 29.57196], [-104.70575, 30.12173], [-105.03737, 30.64402], [-105.63159, 31.08383000000012], [-106.1429, 31.39995], [-106.50758999999982, 31.75452], [-108.24, 31.7548537181664], [-108.24194, 31.34222], [-109.035, 31.34194000000016], [-111.02361, 31.33472], [-113.30498, 32.03914], [-114.815, 32.52528], [-114.72138999999986, 32.72083], [-115.9913499999999, 32.61239000000014], [-117.12775999999978, 32.53534], [-117.29593769127388, 33.04622461520389], [-117.944, 33.621236431201396], [-118.41060227589749, 33.740909223124504], [-118.51989482279971, 34.02778157757575], [-119.081, 34.078], [-119.43884064201669, 34.3484771782843], [-120.36778, 34.44711], [-120.62286, 34.60855], [-120.74433, 35.15686000000011], [-121.71456999999988, 36.16153], [-122.54747, 37.551760000000115], [-122.51201, 37.78339000000013], [-122.95319, 38.11371000000011], [-123.7272, 38.95166000000012], [-123.86517, 39.76699000000013], [-124.39807, 40.3132], [-124.17886, 41.142020000000116], [-124.2137, 41.99964000000014], [-124.53284, 42.7659900000001], [-124.14214, 43.70838], [-124.020535, 44.615895], [-123.89893, 45.52341], [-124.079635, 46.86475], [-124.39567, 47.72017000000011], [-124.68721008300783, 48.18443298339855], [-124.56610107421876, 48.3797149658204], [-123.12, 48.04], [-122.58736, 47.096], [-122.34, 47.36], [-122.5, 48.18], [-122.84, 49.000000000000114], [-120, 49.000000000000114], [-117.03121, 49.000000000000114], [-116.04818, 49.000000000000114], [-113, 49.000000000000114], [-110.04999999999983, 49.000000000000114], [-107.05, 49.000000000000114], [-104.04826, 48.99986], [-100.65, 49.000000000000114], [-97.22872000000471, 49.00070000000011], [-95.15906950917196, 49.000000000000114], [-95.15609, 49.38425], [-94.81758, 49.38905]]], [[[-153.0063140533369, 57.11584219016589], [-154.0050902984581, 56.73467682558106], [-154.5164027577701, 56.9927489284467], [-154.67099280497115, 57.46119578717249], [-153.76277950744148, 57.81657461204377], [-153.2287294179211, 57.968968410872435], [-152.56479061583514, 57.901427313866975], [-152.1411472239063, 57.59105866152199], [-153.0063140533369, 57.11584219016589]]], [[[-165.57916419173358, 59.90998688418755], [-166.19277014876727, 59.754440822988975], [-166.848337368822, 59.94140615502096], [-167.45527706609008, 60.21306915957938], [-166.46779212142462, 60.38416982689778], [-165.67442969466367, 60.293606879306246], [-165.57916419173358, 59.90998688418755]]], [[[-171.7316568675394, 63.78251536727592], [-171.1144335602452, 63.592191067144995], [-170.4911124339407, 63.69497549097352], [-169.68250545965358, 63.431115627691156], [-168.6894394603007, 63.2975062120006], [-168.7719408844546, 63.18859813094545], [-169.52943986720504, 62.9769314642779], [-170.29055620021597, 63.194437567794466], [-170.67138566799088, 63.37582184513897], [-171.55306311753867, 63.317789211675084], [-171.7911106028912, 63.405845852300494], [-171.7316568675394, 63.78251536727592]]], [[[-155.06779029032424, 71.1477763943237], [-154.34416520894123, 70.6964085964702], [-153.90000627339262, 70.8899885118357], [-152.2100060699353, 70.82999217394485], [-152.27000240782615, 70.60000621202985], [-150.73999243874454, 70.43001658800571], [-149.72000301816752, 70.53001048449045], [-147.61336157935708, 70.2140349392418], [-145.6899898002253, 70.12000967068676], [-144.92001095907642, 69.9899917670405], [-143.5894461804252, 70.15251414659832], [-142.07251034871342, 69.85193817817265], [-140.98598752156073, 69.71199839952638], [-140.9859883290049, 69.71199839952638], [-140.9924987520294, 66.00002859156868], [-140.99776974812312, 60.30639679629861], [-140.0129978161531, 60.27683787702759], [-139.03900042031586, 60.000007229240026], [-138.34089, 59.56211000000016], [-137.4525, 58.905000000000115], [-136.4797200000001, 59.46389], [-135.47583, 59.78778], [-134.945, 59.27056000000013], [-134.27111, 58.86111], [-133.35554888220722, 58.410285142645165], [-132.73042, 57.69289000000011], [-131.70780999999988, 56.55212], [-130.00778, 55.91583], [-129.9799942633583, 55.28499787049722], [-130.53611018946725, 54.8027534043494], [-131.08581823797215, 55.17890615500204], [-131.9672114671423, 55.49777558045906], [-132.25001074285947, 56.36999624289746], [-133.53918108435641, 57.17888743756214], [-134.07806292029605, 58.1230675319669], [-135.03821103227907, 58.18771474876393], [-136.62806230995466, 58.21220937767046], [-137.80000627968604, 58.49999542910379], [-139.867787041413, 59.53776154238915], [-140.82527381713305, 59.727517401765084], [-142.57444353556446, 60.08444651960499], [-143.9588809948799, 59.9991804063234], [-145.92555681682785, 60.45860972761429], [-147.11437394914668, 60.88465607364463], [-148.22430620012767, 60.672989406977166], [-148.01806555885076, 59.97832896589363], [-148.5708225168609, 59.914172675203304], [-149.72785783587585, 59.70565827090556], [-150.60824337461645, 59.36821116803949], [-151.71639278868332, 59.15582103131999], [-151.85943315326716, 59.744984035879604], [-151.4097190012472, 60.72580272077939], [-150.34694149473253, 61.03358755150986], [-150.62111080625698, 61.284424953854455], [-151.89583919981686, 60.72719798445129], [-152.5783298410956, 60.06165721296429], [-154.01917212625762, 59.35027944603428], [-153.28751135965317, 58.8647276882198], [-154.2324924387585, 58.14637360293054], [-155.30749142151024, 57.72779450136633], [-156.3083347239231, 57.42277435976365], [-156.55609737854633, 56.979984849670636], [-158.11721655986776, 56.46360809999419], [-158.43332129619716, 55.99415355083855], [-159.60332739971744, 55.56668610292012], [-160.2897196116342, 55.643580634170576], [-161.2230476552578, 55.364734605523495], [-162.23776607974108, 55.02418691672011], [-163.06944658104638, 54.68973704692717], [-164.7855692210272, 54.40417308208217], [-164.94222632552004, 54.57222483989534], [-163.84833960676568, 55.03943146424612], [-162.87000139061593, 55.348043117893205], [-161.80417497459604, 55.89498647727043], [-160.56360470278116, 56.00805451112504], [-160.0705598622845, 56.41805532492876], [-158.68444291891944, 57.01667511659787], [-158.46109737855394, 57.21692129172888], [-157.7227703521839, 57.57000051536306], [-157.55027442119356, 58.32832632103023], [-157.041674974577, 58.91888458926172], [-158.19473120830548, 58.61580231386984], [-158.5172179840231, 58.78778148053732], [-159.05860612692874, 58.424186102931685], [-159.71166704001735, 58.93139028587634], [-159.9812888255002, 58.57254914004164], [-160.35527116599653, 59.07112335879364], [-161.35500342511506, 58.670837714260756], [-161.96889360252635, 58.67166453717738], [-162.05498653872468, 59.26692536074745], [-161.87417070213536, 59.6336213242906], [-162.5180590484921, 59.98972361921391], [-163.81834143782015, 59.79805573184339], [-164.66221757714646, 60.26748444278265], [-165.34638770247483, 60.50749563256241], [-165.35083187565186, 61.07389516869751], [-166.12137915755596, 61.500019029376226], [-165.73445187077053, 62.074996853271806], [-164.91917863671785, 62.63307648380793], [-164.56250790103934, 63.14637848576305], [-163.75333248599702, 63.21944896102377], [-163.0672244944579, 63.05945872664802], [-162.26055538638172, 63.54193573674117], [-161.5344498362486, 63.455816962326764], [-160.77250668032113, 63.766108100023274], [-160.95833513084256, 64.22279857040277], [-161.5180684072122, 64.40278758407531], [-160.77777767641476, 64.78860382756642], [-161.39192623598763, 64.77723501246234], [-162.45305009666885, 64.55944468856822], [-162.7577860178941, 64.33860545516882], [-163.5463942128843, 64.5591604681905], [-164.96082984114517, 64.44694509546885], [-166.42528825586447, 64.68667206487072], [-166.84500423893905, 65.08889557561453], [-168.11056006576717, 65.66999705673675], [-166.70527116602196, 66.0883177761394], [-164.4747096425755, 66.5766600612975], [-163.65251176659564, 66.5766600612975], [-163.78860165103617, 66.07720734319668], [-161.67777442121016, 66.11611969671242], [-162.48971452538, 66.73556509059512], [-163.71971696679108, 67.1163945583701], [-164.4309913808565, 67.6163382025778], [-165.39028683170676, 68.04277212185025], [-166.76444068099602, 68.35887685817968], [-166.20470740462662, 68.88303091091618], [-164.4308105133435, 68.91553538682774], [-163.16861365461452, 69.3711148139129], [-162.93056616926202, 69.85806183539927], [-161.90889726463553, 70.33332998318764], [-160.9347965159337, 70.44768992784958], [-159.03917578838715, 70.89164215766894], [-158.11972286683397, 70.82472117785105], [-156.58082455139805, 71.35776357694175], [-155.06779029032424, 71.1477763943237]]]] } }] }
|
|
|
|
</script>
|
|
<script class="doctest" data-title="GeoJson Example" data-collapsible>
|
|
|
|
|
|
|
|
; (function () {
|
|
|
|
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])
|
|
|
|
|
|
geographics.forEach(geographics => {
|
|
geoLayer.addChild(geographics)
|
|
|
|
})
|
|
|
|
|
|
// Don't forget to add the geolayer to the maplayer.
|
|
app.mapLayer.addLayer(geoLayer)
|
|
|
|
enableSwitch(geojson_switch, app)
|
|
|
|
}).catch(console.error)
|
|
})()
|
|
|
|
</script>
|
|
</section>
|
|
</body>
|
|
|
|
</html> |