如何获取特定 WMS 图层的信息并将其显示为使用 Openlayers3 的弹出窗口

Question

我正在尝试显示两个 WMS 图层，其中我有 succeeded.Next 是为了获取特定 WMS 图层的信息并将其显示为弹出 up.I 我正在使用 Openlayers3 和 Geoserver。

第一层是'Village Boundary'，是基础层，第二层是'OSM Grids'。这些格子从1到87编号。当我点击每个格子时，它应该显示它的属性信息，如格子号，地图号等作为弹出窗口。

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="http://localhost:8080/geoserver/openlayers3/ol.css" type="text/css">
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

        <style>
            .ol-zoom {
              top: 52px;
            }
            .ol-toggle-options {
              z-index: 1000;
              background: rgba(255,255,255,0.4);
              border-radius: 4px;
              padding: 2px;
              position: absolute;
              left: 8px;
              top: 8px;
            }
            #updateFilterButton, #resetFilterButton {
              height: 22px;
              width: 22px;
              text-align: center;
              text-decoration: none !important;
              line-height: 22px;
              margin: 1px;
              font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
              font-weight: bold !important;
              background: rgba(0,60,136,0.5);
              color: white !important;
              padding: 2px;
            }
            .ol-toggle-options a {
              background: rgba(0,60,136,0.5);
              color: white;
              display: block;
              font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
              font-size: 19px;
              font-weight: bold;
              height: 22px;
              line-height: 11px;
              margin: 1px;
              padding: 0;
              text-align: center;
              text-decoration: none;
              width: 22px;
              border-radius: 2px;
            }
            .ol-toggle-options a:hover {
              color: #fff;
              text-decoration: none;
              background: rgba(0,60,136,0.7);
            }
            body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: small;
            }

            iframe {
                width: 100%;
                height: 250px;
                border: none;
            }
            /* Toolbar styles */
            #toolbar {
                position: relative;
                padding-bottom: 0.5em;
            }
            #toolbar ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            #toolbar ul li {
                float: left;
                padding-right: 1em;
                padding-bottom: 0.5em;
            }
            #toolbar ul li a {
                font-weight: bold;
                font-size: smaller;
                vertical-align: middle;
                color: black;
                text-decoration: none;
            }
            #toolbar ul li a:hover {
                text-decoration: underline;
            }
            #toolbar ul li * {
                vertical-align: middle;
            }
            #map {
                clear: both;
                position: relative;
                width: 600px;
                height: 800px;
                border: 1px solid black;
                bottom:802px;
                left:450px;
            }
            img{
                position: relative;
                width: 444px;
                height: 775px;

                top:5px;

            }
            #legend {
                position: relative;
                width: 444px;
                height: 800px;
                border: 1px solid black;
                top:0px;

            }
            #wrapper {
                width: 444px;
                position: relative;
                bottom:802px;
                left:450px;
            }
            #location {


                bottom:802px;
                left:450px;
            }
            /* Styles used by the default GetFeatureInfo output, added to make IE happy */
            table.featureInfo, table.featureInfo td, table.featureInfo th {
                border: 1px solid #ddd;
                border-collapse: collapse;
                margin: 0;
                padding: 0;
                font-size: 90%;
                padding: .2em .1em;
            }
            table.featureInfo th {
                padding: .2em .2em;
                font-weight: bold;
                background: #eee;
            }
            table.featureInfo td {
                background: #fff;
            }
            table.featureInfo tr.odd td {
                background: #eee;
            }
            table.featureInfo caption {
                text-align: left;
                font-size: 100%;
                font-weight: bold;
                padding: .2em .2em;
            }
        </style>
        <script src="http://localhost:8080/geoserver/openlayers3/ol.js" type="text/javascript"></script>

        <title>OpenLayers map preview</title>
      </head>
      <body>
        <div id="legend">
          <img src="Legend.PNG.jpg">
        </div>
        <div id="map">
        <input type="checkbox" value="Village Boundary" checked>Village Boundary<br>
       <input type="checkbox" value="OSM Grids">OSM Grids<br>
        </div>

        <div id="wrapper">
            <div id="location"></div>
            <div id="scale"></div>
        </div>
        <script type="text/javascript">
        var pureCoverage = false;
              // if this is just a coverage or a group of them, disable a few items,
              // and default to jpeg format
              var format = 'image/png';
              var bounds = [472440.0520989996, 911801.0984444692,
                            768802.9061656371, 1424302.9894040015];
              if (pureCoverage) {
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
              }

              var supportsFiltering = true;
              if (!supportsFiltering) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
              }

              var mousePositionControl = new ol.control.MousePosition({
                className: 'custom-mouse-position',
                target: document.getElementById('location'),
                coordinateFormat: ol.coordinate.createStringXY(5),
                undefinedHTML: '&nbsp;'
              });

              var projection = new ol.proj.Projection({
                  code: 'EPSG:32643',
                  units: 'm',
                  axisOrientation: 'neu',
                  global: false
              });




                var villageboundary = new ol.layer.Image({
                         title:'Village Boundary',
                         type: 'base',
                         label:'Village Boundary',
                         source: new ol.source.ImageWMS({
                         ratio: 1,
                         url: 'http://localhost:8080/geoserver/geog585/wms',
                         params: {'FORMAT': format,
                                 'VERSION': '1.1.1',  
                                 "LAYERS": 'geog585:Village_Boundary',
                                 "exceptions": 'application/vnd.ogc.se_inimage',
                                 }
                               })
                             });





                 var osmgrid = new ol.layer.Image({
                         title:'OSM Grid',
                         visible: false,
                         label:'OSM Grid',
                         source: new ol.source.ImageWMS({
                         ratio: 1,

                         url: 'http://localhost:8080/geoserver/geog585/wms',
                         params: {'FORMAT': format,
                                 'VERSION': '1.1.1',  
                                 "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                                 "exceptions": 'application/vnd.ogc.se_inimage',
                                 }
                               })
                             });





                 //Tile OSM

                 var tiledOSM = new ol.layer.Tile({
                title:'OSM Grids',
                visible: false,
                label:'OSM Grids',
                source: new ol.source.TileWMS({
                  url: 'http://localhost:8080/geoserver/geog585/wms',
                  params: {'FORMAT': format, 
                           'VERSION': '1.1.1',
                           tiled: true,
                        "LAYERS": 'geog585:OSM_Grid_25000_include_hazard_line',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                     tilesOrigin: 472849.4548000004 + "," + 912420.9497999996
                  }
                })
              });




                 //Tile OSM



              var map = new ol.Map({
                controls: ol.control.defaults({
                  attribution: false
                }).extend([mousePositionControl]),
                target: 'map',
                layers: [
                        villageboundary,

                        tiledOSM
                       ],
                view: new ol.View({
                   projection: projection
                })
              });



              map.getView().on('change:resolution', function(evt) {
                var resolution = evt.target.get('resolution');
                var units = map.getView().getProjection().getUnits();
                var dpi = 25.4 / 0.28;
                var mpu = ol.proj.METERS_PER_UNIT[units];
                var scale = resolution * mpu * 39.37 * dpi;
                if (scale >= 9500 && scale <= 950000) {
                  scale = Math.round(scale / 1000) + "K";
                } else if (scale >= 950000) {
                  scale = Math.round(scale / 1000000) + "M";
                } else {
                  scale = Math.round(scale);
                }
                document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
              });
              map.getView().fit(bounds, map.getSize());


              var changeLayer = function changeLayer(ev) {
              var val = $(this).val();
              var checked = $(this).is(':checked');
              map.getLayers().forEach(function (layer) {
              if (layer.get('label') === val) {
                layer.setVisible(checked);
                } 
              });
             };

            $('input').each(function (){  $(this).on('change', changeLayer); });

 </script>
  </body>
</html>

谁能帮我解决这个问题。

Answer 1

当我添加下面给定的代码片段时，上述要求有效。

 var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            var closer = document.getElementById('popup-closer');
            var overlay = new ol.Overlay({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250
                }
            });
            closer.onclick = function() {
                overlay.setPosition(undefined);
                closer.blur();
                return false;
            };
            map.addOverlay(overlay);

            map.on('singleclick', function(evt) {
                var view = map.getView();
                var viewResolution = /** @type {number} */ (map.getView().getResolution());
                var url = tiledOSM.getSource().getGetFeatureInfoUrl(evt.coordinate, view.getResolution(), view.getProjection(), {
                    'INFO_FORMAT': 'application/json',
                    'PIXELRADIUS': 5,
                    'FEATURE_COUNT': 10
                });

             if (url) {
            var parser = new ol.format.GeoJSON();
            $.ajax({
              url: url,
              crossOrigin: true,
              dataType: 'json',
              jsonpCallback: 'parseResponse'
            }).then(function(response) {
              var result = parser.readFeatures(response);
              if (result.length) {
                var info = [];
                for (var i = 0, ii = result.length; i < ii; ++i) {
                  info.push(result[i].get('Map_No'));
                }
                content.innerHTML =info.join;

              } 
            });
          }

          overlay.setPosition(evt.coordinate); 

        });

因此，我将其标记为答案。

如何获取特定 WMS 图层的信息并将其显示为使用 Openlayers3 的弹出窗口

How to get information of a particular WMS layer and display it as a popup using Openlayers3

javascript

popup

wms

geoserver

openlayers-3