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

Added the maps-module to the iwmlib.

Browse Source 
Migrated a  ot of the content from the tuesch to the iwmlib.
This is before the decoupeling of the layers.
This commit is contained in:
Severin Opel
2019-11-04 10:59:08 +01:00
parent e2ea89cc0b
commit 86b23f4e6f
121 changed files with 12779 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/maps/geojson.html
+380
View File
@@ -0,0 +1,380 @@
<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>GeoJson</title>
<link rel='stylesheet' href='../../iwmlib/lib/3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../../iwmlib/lib/../css/doctest.css'>
<script src='../../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
<script src='../../iwmlib/lib/3rdparty/all.js'></script>
<script src='../../iwmlib/lib/all.js'></script>
<script src='../../iwmlib/lib/pixi/all.js'></script>
<script src="../all.js"></script>
<style>
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.eot);
/* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.woff) format('woff'),
url(../../../../assets/fonts/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
.inline-showcase {
display: flex
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
table {
border-radius: 3px;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
color: white;
background: #333;
padding: 40px;
margin: 20px auto;
box-sizing: border-box;
}
thead td {
border-bottom: 1px solid white;
}
td {
padding: 5px;
}
span.implemented {
content: "";
color: greenyellow
}
span:before {
font-size: 1.5em;
}
span.implemented:before {
font-family: "Material Icons";
content: 'check';
width: 32px;
height: 32px;
}
span.not-implemented {
color: tomato;
}
span.not-implemented:before {
font-family: "Material Icons";
content: 'close';
}
</style>
</head>
<body onload='Doctest.run()'>
<h1>GeoJson</h1>
<p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
pairs
to display one (or multiple) Point, Line or Polygon.
</p>
<p> This implementation is roughly based on
<a class="external" href="https://tools.ietf.org/html/rfc7946">RFC7946</a>.
</p>
<p>GeoJson objects consist of two objects:
<ul>
<li>type: The type of the object. All listed in the table below.</li>
<li>coordinates: The coordinate point(s)* of which the object is composed.</li>
</ul>
The points are an array of exactly two values in the format [longitude, latitude]. Here the implementation
breaks with the
standardized format, as multiple point formats can be used for convenience (see
<a href="#point">Point</a> section).
</p>
<table>
<thead>
<tr>
<td>Type</td>
<td>Implemented</td>
</tr>
</thead>
<tbody>
<tr>
<td>Point</td>
<td>
<span class="implemented"></span>
</td>
</tr>
<tr>
<td>Line</td>
<td>
<span class="implemented"></span>
</td>
</tr>
<tr>
<td>Polygon</td>
<td>
<span class="implemented"></span>
</td>
</tr>
<tr>
<td>MultiPoint</td>
<td>
<span class="not-implemented"></span>
</td>
</tr>
<tr>
<td>MultiLine</td>
<td>
<span class="not-implemented"></span>
</td>
</tr>
<tr>
<td>MultiPolygon</td>
<td>
<span class="implemented"></span>
</td>
</tr>
</tbody>
</table>
</ul>
<canvas id="canv_0"></canvas>
<script>
// As map an image of europe is used.
let europe = "../../../../var/examples/maps/europe/europe.jpg"
let europeData = new MapData(MERCATOR, {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
let app = window.app = new MapApp({
debug: true,
view: canv_0,
focus: { x: 46.053113042094864, y: 13.150212801583365 },
zoom: 0.25,
width: 880,
height: 512,
coordsLogging: true
})
// The sprites of image maps should be loaded by the
// apps resources loader.
app.loadTextures([europe], (textures) => ready(textures), { resolutionDependent: false })
window.readyHandler = new EventHandler("onReady")
function ready(textures) {
let europeMap = new ImageMap(new PIXI.Sprite(textures.get(europe)), europeData)
app.setMap("germany", europeMap)
app.setup().run()
readyHandler.call()
}
</script>
<h2 id="point">Point</h2>
<p>Points represent a single point on the map. In the following all valid coordinate types are shown</p>
<script class="doctest">
let geoJsonPoint = [
{
//Madrid - only valid GeoJson format.
"type": "Point",
"coordinates": [-3.701517, 40.417485]
}, {
//London - most clean version.
"type": "Point",
"coordinates": {
"latitude": 51.508271,
"longitude": -0.128505
}
},
{
//Wien - short version.
"type": "Point",
"coordinates": {
"lat": 48.212156,
"lng": 16.377807
}
},
{
//Athens - PIXI point in form {x: latitude, y: longitude}.
"type": "Point",
"coordinates": {
"x": 37.971782,
"y": 23.726510
}
}
]
</script>
<h2>Line</h2>
<p>The line can be used to show a path or connection between multiple points.</p>
<script class="doctest">
const places = {
"Madrid": [-3.701517, 40.417485],
"London": [-0.128505, 51.508271],
"Wien": [16.377807, 48.212156],
"Athens": [23.726510, 37.971782],
}
let geoJsonLine = {
"type": "LineString",
"coordinates": [
places.Madrid,
places.London,
places.Wien,
places.Athens
]
}
</script>
<h2>Polygon</h2>
<p>Polygons are used to represent shapes. They are an array of two pointarrays. The first represent the shape, the
optional
second one a hole that can be cut into the shape.</p>
<script class="doctest">
let geoJsonPolygon = {
"type": "Polygon",
"coordinates": [
[
[14.220297, 53.948800],
[14.098276, 52.869102],
[14.792306, 50.835383],
[12.267321, 50.160485],
[13.864702, 48.732998],
[12.957140, 47.509061],
[10.222090, 47.331850],
[7.615329, 47.578565],
[8.240349, 48.981837],
[6.431923, 49.474461],
[6.521907, 49.810873],
[5.998715, 51.837875],
[7.012748, 52.396167],
[7.294660, 53.673047],
[8.979846, 53.896205],
[8.644994, 54.895603],
[9.917260, 54.808699],
[11.042638, 53.970400],
[13.226022, 54.471929]
],
[
[12.364498326583373, 49.348267001730406],
[12.364498326583373, 48.653439624053],
[6.8644970015833735, 49.734852799255926,],
[6.929973207833399, 50.49886609496484,]
]
]
}
</script>
<h2>MultiPolygon</h2>
<p>Multipolygons are an array of polygons.</p>
<script class="doctest">
let geoJsonMultiPolygon = {
"type": "MultiPolygon",
"coordinates": [
[
[
[2.4534564721784875, 39.602018178422234],
[3.2148986405775872, 39.944805466067685],
[3.589576532964429, 39.73370002861697],
[3.1967690651395344, 39.30481714119756],
[2.9066958581303197, 39.389861165290846],
[2.870436707254214, 39.55963858264072]
]
],
[
[
[1.4261138640210334, 39.02533795687074],
[1.6497119610906168, 39.12020148440332],
[1.7645326055317128, 39.02293427288866],
[1.5651072757129327, 38.877400666886004],
[1.3898547131448993, 38.867887468083474],
[1.3838115213322055, 38.972462606739654],
[1.456329823084502, 38.9629621453345]
]
],
[
[
[3.9340384662878307, 40.04714135355371],
[3.970297617163993, 39.93948536023678],
[4.109291028855864, 39.93011595102749],
[4.399364235865022, 39.817583017567095],
[4.405407427677716, 39.92543076543482],
[4.254327632360457, 40.06584681024191],
[3.9642544253512995, 40.06117092743255]
]
]
]
}
</script>
<h2>Applying GeoJson Objects to the Map</h2>
<p>The GeoJson data is used to create a
<a href="./geographics.html" target="_blank">GeoGraphics</a> object.</p>
<script class="doctest">
readyHandler.add(() => {
// For this demo, we bundle all GeoJson types.
let geographics = [].concat(geoJsonMultiPolygon, geoJsonPolygon, geoJsonLine, geoJsonPoint)
// We need a geoLayer for the GeoGraphics to live on.
// (Currently not working with the MapLayer itself. SO: 13-06-2018)
let geoJsonLayer = new GeoLayer("GeoJson Layer")
app.mapLayer.place(geoJsonLayer)
// Add all items individually.
geographics.forEach(geoJson => {
const type = geoJson.type
const geometry = geoJson.coordinates
console.log(type, geometry)
// Converts all points to PIXI format.
let coordinates = GeoJson.validateAndConvert(type, geometry)
console.log("Converted: ", type, geometry)
// Use a Utils function to get an appropriate GeoGraphics for every type.
let graphics = GeoUtils.fromGeoJsonToGeoGraphics(type, coordinates, {
//The GeoGraphics shoul
onDraw: GeoJson.isLineType(type) ? function () {
this.graphics.lineStyle(10, 0x00FFFF)
} : function () {
this.graphics.beginFill(0xFF0000, 0.8)
if (type == "MultiPolygon") {
this.graphics.drawCircle(0, 0, 200)
} else if (type == "Point") {
this.graphics.drawCircle(0, 0, 50)
}
this.graphics.beginFill(0x00FF00)
}
})
// Finally place the GeoGraphics element.
geoJsonLayer.place(graphics)
})
geoJsonLayer.adapt()
})
</script>
</body>
</html>