380 lines
12 KiB
HTML
380 lines
12 KiB
HTML
|
<!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>
|