[mapguide-commits] r9695 - sandbox/jng/ogc_viewer_representation/Server/src/Wms

Wed Jul 29 07:51:58 PDT 2020

Author: jng
Date: 2020-07-29 07:51:55 -0700 (Wed, 29 Jul 2020)
New Revision: 9695

Modified:
   sandbox/jng/ogc_viewer_representation/Server/src/Wms/OgcWmsService.config.awd
Log:
Add GetFeatureInfo support to the GetMap viewer representation

Modified: sandbox/jng/ogc_viewer_representation/Server/src/Wms/OgcWmsService.config.awd
===================================================================

--- sandbox/jng/ogc_viewer_representation/Server/src/Wms/OgcWmsService.config.awd	2020-07-28 17:17:39 UTC (rev 9694)
+++ sandbox/jng/ogc_viewer_representation/Server/src/Wms/OgcWmsService.config.awd	2020-07-29 14:51:55 UTC (rev 9695)
@@ -262,25 +262,55 @@
         height:400px;
       }
     </style>
+    &html.stylesheet;
   </head>
   <body>
     <div id="map" class="map"></div>
+    <div id="info"></div>
     <script type="text/javascript">
+
+      function buildTable(features) {
+        var html = "";
+        for (var i = 0; i < features.length; i++) {
+          html += "<table>";
+          html += "<thead>";
+          html += "<tr><td>Name</td><td>Value</td></tr>";
+          html += "</thead>";
+          html += "<tbody>";
+          var props = features[i].getProperties();
+          for (var k in props) {
+            if (k == features[i].getGeometryName()) {
+              continue;
+            }
+            html += "<tr><td>" + k + "</td><td>" + props[k] + "</td></tr>";
+          }
+          html += "</tbody>";
+          html += "</table>";
+        }
+        return html;
+      }
+
       var bounds = [&Viewer.BBOX;];
+      var format = new ol.format.GeoJSON();
+      var wmsSource = new ol.source.ImageWMS({
+        url: "&Viewer.SelfUrl;",
+        params: {
+          "LAYERS": "&Viewer.LayersParam;",
+          "VERSION": "&Viewer.ServiceVersion;",
+          "TRANSPARENT": "TRUE"
+        },
+        ratio: 1
+      });
+      var vectorSource = new ol.source.Vector();
       var layers = [
         new ol.layer.Tile({
           source: new ol.source.OSM()
         }),
         new ol.layer.Image({
-          source: new ol.source.ImageWMS({
-            url: "&Viewer.SelfUrl;",
-            params: {
-              "LAYERS": "&Viewer.LayersParam;",
-              "VERSION": "&Viewer.ServiceVersion;",
-              "TRANSPARENT": "TRUE"
-            },
-            ratio: 1
-          })
+          source: wmsSource
+        }),
+        new ol.layer.Vector({
+          source: vectorSource
         })
       ];
       var view = new ol.View({
@@ -292,10 +322,40 @@
         target: "map",
         view: view
       });
+      map.on('singleclick', function (evt) {
+        document.getElementById('info').innerHTML = '';
+        var viewResolution = /** @type {number} */ (view.getResolution());
+        var url = wmsSource.getFeatureInfoUrl(
+          evt.coordinate,
+          viewResolution,
+          '&Viewer.SRS;',
+          {'INFO_FORMAT': 'application/json'}
+        );
+        if (url) {
+          fetch(url)
+            .then(function (response) { return response.json(); })
+            .then(function (json) {
+              vectorSource.clear();
+              var features = format.readFeatures(json);
+              vectorSource.addFeatures(features);
+              document.getElementById("info").innerHTML = buildTable(features);
+            });
+        }
+      });
+      map.on('pointermove', function (evt) {
+        if (evt.dragging) {
+          return;
+        }
+        var pixel = map.getEventPixel(evt.originalEvent);
+        var hit = map.forEachLayerAtPixel(pixel, function () {
+          return true;
+        });
+        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
+      });
     </script>
   </body>
 </html>
- </Define
+ </Define>
 
 </Definitions>
 

