Displaying citygmls convex hulls with openlayers+kml.

016fd1cb · duminil · 71899064 · 016fd1cb · 016fd1cb · 016fd1cb
Commit 016fd1cb authored Apr 29, 2015 by duminil
--- a/website/data/citygml_hulls.kml
+++ b/website/data/citygml_hulls.kml
--- a/website/index.html
+++ b/website/index.html
 <!doctype html>
 <html lang="en">
-  <head>
-    <link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css" type="text/css">
-    <style>
-      .map {
-        height: 400px;
+<head>
+<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
+<script type="text/javascript" src="gmaps/proj4.js"></script>
+<link rel="stylesheet" href="http://openlayers.org/en/v3.4.0/css/ol.css"
+	type="text/css">
+<style>
+.map {
+	height: 100vh;
 	width: 100%;
-      }
-    </style>
-    <script src="http://openlayers.org/en/v3.4.0/build/ol.js" type="text/javascript"></script>
-    <title>OpenLayers 3 example</title>
-  </head>
-  <body>
-    <h2>My Map</h2>
+}
+</style>
+<script src="http://openlayers.org/en/v3.4.0/build/ol.js"
+	type="text/javascript"></script>
+<title>RegionChooser OpenLayers</title>
+</head>
+<body>
+	<h2>RegionChooser</h2>
 	<div id="map" class="map"></div>
-    <script type="text/javascript">
-      var map = new ol.Map({
-        target: 'map',
-        layers: [
-          new ol.layer.Tile({
-            source: new ol.source.MapQuest({layer: 'sat'})
-          })
-        ],
-        view: new ol.View({
-          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
-          zoom: 4
-        })
-      });
-    </script>
-  </body>
+	<script src="simstadt_openlayers.js" type="text/javascript"></script>
+</body>
 </html>
\ No newline at end of file
--- a/website/simstadt_openlayers.js
+++ b/website/simstadt_openlayers.js
+//proj4.defs("EPSG:31467",
+//		"+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0"
+//				+ " +ellps=bessel +datum=potsdam +units=m +no_defs"); // http://spatialreference.org/ref/epsg/31467/proj4js/
+
+var osm_layer = new ol.layer.Tile({
+	// source: new ol.source.MapQuest({layer: 'sat'})
+	source : new ol.source.OSM()
+});
+
+var kml_source = new ol.source.KML({
+	projection : ol.proj.get('EPSG:3857'),
+	url : 'data/citygml_hulls.kml'
+})
+
+var kml_layer = new ol.layer.Vector({
+	source : kml_source
+});
+
+kml_layer.addEventListener("change", function(event) {
+	map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
+});
+
+var map = new ol.Map({
+	target : 'map',
+	layers : [ osm_layer, kml_layer ],
+});
\ No newline at end of file