Visualisierung der Shapes

Author: Hendrik Rakemann

src/main/webapp/ShapeUpdate.html

@@ -14,6 +14,15 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
+    <style>
+        .map {
+            height: 400px;
+            width: 100%;
+        }
+    </style>
+    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
+
     <link rel="stylesheet" href="css/main.css">
     <script src="js/shapeUpdate.js"></script>
     <title>ShapeUpdate</title>

src/main/webapp/java/de/htwb/model/DatabaseRepository.java

@@ -122,7 +122,7 @@ private ImportedShape getImportedShapeForId(String tableName, int id) throws SQL
 
     private ImportedShape getImportedShapeFromCache(String tableName, int id) throws SQLException
     {
-        final String sql = String.format("SELECT \"name\", \"validSince\", \"validUntil\", \"geom\" FROM \"%s\".\"%s\" WHERE gid = ?", "importedCache", tableName);
+        final String sql = String.format("SELECT \"name\", \"validSince\", \"validUntil\", \"geom\", ST_ASGEOJSON(geom) FROM \"%s\".\"%s\" WHERE gid = ?", "importedCache", tableName);
         PreparedStatement ps = connection.prepareStatement(sql);
         ps.setInt(1, id);
 
@@ -137,7 +137,9 @@ private ImportedShape getImportedShapeFromCache(String tableName, int id) throws
             PGgeometry geom = (PGgeometry) rs.getObject(4);
             MultiPolygon multiPolygon = new MultiPolygon(geom.getGeometry().getValue());
             Polygon[] polygons = multiPolygon.getPolygons();
-            return new ImportedShape(id, name, validSince, validUntil, polygons);
+            ImportedShape is = new ImportedShape(id, name, validSince, validUntil, polygons);
+            is.setGeoJson(rs.getString(5));
+            return is;
         }
     }
 

src/main/webapp/java/de/htwb/model/imported/ImportedShape.java

@@ -13,6 +13,7 @@ public class ImportedShape
     private int classificationId;
     private String username;
     private transient Polygon[] polygons;
+    private String geoJson;
 
     public ImportedShape(int id, String name, Date validSince, Date validUntil, Polygon[] polygons)
     {
@@ -63,4 +64,12 @@ public int getId() {
     public void setId(int id) {
         this.id = id;
     }
+
+    public String getGeoJson() {
+        return geoJson;
+    }
+
+    public void setGeoJson(String geoJson) {
+        this.geoJson = geoJson;
+    }
 }

src/main/webapp/js/shapeUpdate.js

@@ -82,9 +82,10 @@ function displayImportedShapes(importedShapes)
         }
 
         let classificationId = importedShapes[i].classificationId;
+        let geoJson = importedShapes[i].geoJson;
 
         let shapeId = "Shape-" + id;
-
+        let mapId = "map-"+shapeId;
         classificationDropDown.setAttribute("id", "class" + i);
         let importedShapeForm =
         $("<form id=\""+ i +"\">" +
@@ -108,13 +109,52 @@ function displayImportedShapes(importedShapes)
                 "<label>Klassifizierung</label>" +
                 classificationDropDown.outerHTML +
             "</div>" +
+            "<div id=\""+mapId+"\" class=\"map\">"+
+
+            "</div>"+
             "<button type=\"button\" class=\"btn btn-primary\" id=\"update"+ shapeId +"\">Update</button>" +
         "</form><hr>");
 
         $("#importedShapes").append(importedShapeForm);
         $("#update"  + shapeId).click(function() {
             updateShape(i);
         });
+
+        var geojsonObject =
+        {
+            "type": "FeatureCollection",
+            "crs": {
+                "type": "name",
+                "properties": {
+                    "name": "EPSG:4326"
+                }
+            },
+            "features": [{"type":"Feature", "properties":{}, "geometry": JSON.parse(geoJson) }]
+        };
+
+        var vectorSource = new ol.source.Vector({
+            features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
+        });
+
+
+        var vectorLayer = new ol.layer.Vector({
+            source: vectorSource
+        });
+
+        var map = new ol.Map({
+            target: mapId,
+            layers: [
+                new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                }),
+                vectorLayer
+            ],
+            view: new ol.View({
+                projection: 'EPSG:4326',
+                center: [0,0],
+                zoom: 2
+            })
+        });
     }
 }