0

There are 3 layers (image and tile) from GeoServer and sits on top of each other. Now I need to read data from these three different layers in UI (jsp).

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OpenLayers</title>
  <link rel="icon" href="./resources/images/location.png" type="image/png">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <style type="text/css">
 .map{
      margin-top: 10px;
    margin-left: 16px;
      height: 50.5em;
    width: 105.5em; }

 </style>
 </head>
 <body>
<script src="https://unpkg.com/openlayers@^4/dist/ol.js"></script>
<script src="https://unpkg.com/jsts@^1/dist/jsts.js"></script>
<script src="http://ole.geops.de/build/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<div id="hiddencontant" style="margin: 10px" align="justify"></div>  
<div id="app" style="height: 30px; width=70px;">
  <div id="header">

  </div>
  <div id="map" class="map"></div>
</div>
<script type="text/javascript">

var untiled=new ol.layer.Image({
    source: new ol.source.ImageWMS({
              ratio: 1,
              url: 'http://192.168.4.218:8080/geoserver/cite/wms',
              params: {'FORMAT':'image/png',
                       'VERSION': '1.1.1',  
                    "LAYERS": 'cite:boundary',
                    "exceptions": 'application/vnd.ogc.se_inimage',
              }
            })
          });


  var  tiled = new ol.layer.Tile({
     visible: false,
    source: new ol.source.TileWMS({
    url: 'http://192.168.4.218:8080/geoserver/cite/wms',
    params: {'FORMAT': 'image/png', 
             'VERSION': '1.1.1',
             tiled: true,
          "LAYERS": 'cite:boundary',
          "exceptions": 'application/vnd.ogc.se_inimage'
            }
  })
});
 /*  tiled.set('name', 'boundary'); */
    /* map.addLayer(tiled); */


   var untiled1=new ol.layer.Image({
      source: new ol.source.ImageWMS({
              ratio: 1,
              url: 'http://192.168.4.218:8080/geoserver/cite/wms',
              params: {'FORMAT':'image/png',
                       'VERSION': '1.1.1',  
                    "LAYERS": 'cite:power',
                    "exceptions": 'application/vnd.ogc.se_inimage',
              }
            })
          });


    var  tiled1 = new ol.layer.Tile({
       visible: false,
      source: new ol.source.TileWMS({
      url: 'http://192.168.4.218:8080/geoserver/cite/wms',
      params: {'FORMAT': 'image/png', 
               'VERSION': '1.1.1',
               tiled: true,
            "LAYERS": 'cite:power',
            "exceptions": 'application/vnd.ogc.se_inimage'
                     }
    })
  });
    /* tiled1.set('name', 'power'); */
    /*  map.addLayer(tiled1); */

    var untiled2=new ol.layer.Image({
        source: new ol.source.ImageWMS({
                  ratio: 1,
                  url: 'http://192.168.4.218:8080/geoserver/cite/wms',
                  params: {'FORMAT':'image/png',
                           'VERSION': '1.1.1',  
                        "LAYERS": 'cite:fdr',
                        "exceptions": 'application/vnd.ogc.se_inimage',
                  }
                })
              });

      var  tiled2 = new ol.layer.Tile({
         visible: false,
        source: new ol.source.TileWMS({
        url: 'http://192.168.4.218:8080/geoserver/cite/wms',
        params: {'FORMAT': 'image/png', 
                 'VERSION': '1.1.1',
                 tiled: true,
              "LAYERS": 'cite:fdr',
              "exceptions": 'application/vnd.ogc.se_inimage'
                       }
      })
    }); 
     /*  tiled2.set('name', 'feeder'); */
    /* map.addLayer(tiled2); */

 /* map.getView().fit(vectorSource.getExtent()); */

   var editLayer = new ol.layer.Vector({
    source: new ol.source.Vector()              
  }); 
  var india = ol.proj.transform([75.7917518,9.1058914], 'EPSG:4326', 'EPSG:3857');
  var projection = ol.proj.get('EPSG:3857');

  var map = new ol.Map({
    layers: [

                                      new ol.layer.Group(
                                                {
                                                    'title' : 'Base maps',
                                                    layers : [
                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'street Map',
                                                                        type : 'base',
                                                                        visible : true,
                                                                        source : new ol.source.XYZ(
                                                                                {
                                                                                    url : 'https://{1-4}.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png?app_id=BVt73nZHT7lWbyMAsCfb&app_code=SwJUzeidNqURhmtgjz3TZw',
                                                                                })
                                                                    }),

                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'terrain',
                                                                        type : 'base',
                                                                        visible : false,
                                                                        source : new ol.source.XYZ(
                                                                                {
                                                                                    url : 'https://{1-4}.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png?app_id=BVt73nZHT7lWbyMAsCfb&app_code=SwJUzeidNqURhmtgjz3TZw',
                                                                                })
                                                                    }),
                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'satellite',
                                                                        type : 'base',
                                                                        visible : false,
                                                                        source : new ol.source.XYZ(
                                                                                {
                                                                                    url : 'https://{1-4}.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png?app_id=BVt73nZHT7lWbyMAsCfb&app_code=SwJUzeidNqURhmtgjz3TZw',

                                                                                })
                                                                    }),
                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'hybrid',
                                                                        type : 'base',
                                                                        visible : false,
                                                                        source : new ol.source.XYZ(
                                                                                {
                                                                                    url : 'https://{1-4}.aerial.maps.cit.api.here.com/maptile/2.1/maptile/newest/hybrid.day/{z}/{x}/{y}/256/png?app_id=BVt73nZHT7lWbyMAsCfb&app_code=SwJUzeidNqURhmtgjz3TZw',

                                                                                })
                                                                    }),
                                                            new ol.layer.Tile({
                                                                title : 'OSM',
                                                                type : 'base',
                                                                visible : false,
                                                                source : new ol.source.OSM()
                                                            }),
                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'Aerial',
                                                                        type : 'base',
                                                                        visible : false,
                                                                        source : new ol.source.BingMaps(
                                                                                {
                                                                                    imagerySet : 'Aerial',
                                                                                    key : 'Akj1XAXF1DXAnUlQzccUbGaBF3z35B6FfsR8_FxmK2oiPzCHvq_fJBjv_EXOEjxP'
                                                                                })
                                                                    }),
                                                            new ol.layer.Tile(
                                                                    {
                                                                        title : 'Aerial With Labels',
                                                                        type : 'base',
                                                                        visible : false,
                                                                        source : new ol.source.BingMaps(
                                                                                {
                                                                                    imagerySet : 'AerialWithLabels',
                                                                                    key : 'Av65TlUgL_eXsNBCtRphz9F36xs8fEJEfrLqeXHfVvSbphGnPXgvTZHNrUt5X27b'
                                                                                })
                                                                    })]
                                                })  ,tiled,untiled,tiled1,untiled1,tiled2,untiled2  ,editLayer 
    ],
    target: 'map',
    view: new ol.View({
      center: india,
      zoom: 6.5     
    }) 
  });

   var select = new ol.interaction.Select();

    map.addInteraction(select);
    select.on("select",function(e)
            {

         if (e.selected && e.selected[0])
        {
            // alert("selected===>"+e.selected[0]);
        }
            }); 
/* map.getView().fit(bounds, map.getSize());
var layerSwitcher = new ol.control.LayerSwitcher({
        tipLabel : 'Légende' // Optional label for button
});
    map.addControl(layerSwitcher); */

  var editor = new ole.Editor(map);
  var cad = new ole.control.CAD({
    source: editLayer.getSource()
  }); 

  var draw = new ole.control.Draw({
    source: editLayer.getSource()
  });

  var drawLine = new ole.control.Draw({
      type: 'LineString',
    source: editLayer.getSource()
  });

  var rotate = new ole.control.Rotate({
    source: editLayer.getSource()
  });

  var drawPoly = new ole.control.Draw({
    type: 'Polygon',
    source: editLayer.getSource()
  });

  var move = new ole.control.Move({
    type: 'Polygon',
    source: editLayer.getSource()
  });

  var modify = new ole.control.Modify({
    source: editLayer.getSource()
  });

  var deleteC = new ole.control.Delete({
    source: editLayer.getSource()
  });

  var buffer = new ole.control.Buffer({
    source: editLayer.getSource()
  });

 /*  var union = new ole.control.Union({
    source: editLayer.getSource()
  });

  var intersection = new ole.control.Intersection({
    source: editLayer.getSource()
  });

  var difference = new ole.control.Difference({
    source: editLayer.getSource()
  }); */

  editor.addControls([cad, draw, drawLine, drawPoly, modify, move,
    rotate, deleteC, buffer/* , union, intersection, difference */
  ]);

  var ls = new ole.service.LocalStorage();

  editor.addService(ls);


  map.on('singleclick', function(evt) 
             {
                var source=null;
                var source1=null;
                var source2=null;
                var urls=null;
                var urls1=null;
                var urls2=null;
                /* alert('clicked'); */
                var view = map.getView();
                var viewResolution = view.getResolution();

             /*   var olLyers = map.getLayers().getArray();
                //alert('length of layers==>'+olLyers.lenght);
                var str=null;
                for (var a=0;a<olLyers.length;a++) 
                {
                            str = olLyers[a].get("name");  
                            console.log(str);


                    //alert(str);
                };   */    

                //alert("==>"+tiled.getTileCoord());
    /*    if(str.equals("boundary"))
              {
                 source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
                 source1=null;
                 source2=null;
              }
          else if(str.equals("power"))
               {
                    source1 = untiled1.get('visible') ? untiled1.getSource() : tiled1.getSource();
                    source=null;
                    source2=null;

               }
          else if(str.equals("feeder"))
              {
                    source2 = untiled2.get('visible') ? untiled2.getSource() : tiled2.getSource();
                    source = null;
                    source1 = null;
              }
                */
                source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
                source1 = untiled1.get('visible') ? untiled1.getSource() : tiled1.getSource();
                source2 = untiled2.get('visible') ? untiled2.getSource() : tiled2.getSource(); 


                 if(source!=null)
                     {
                              urls = source.getGetFeatureInfoUrl(
                              evt.coordinate, viewResolution, view.getProjection(),
                              {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10});
                     }
                 else if(source1 != null)
                     {
                              urls = source1.getGetFeatureInfoUrl(
                              evt.coordinate, viewResolution, view.getProjection(),
                              {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10});
                     }
                 else
                     {
                              urls = source2.getGetFeatureInfoUrl(
                              evt.coordinate, viewResolution, view.getProjection(),
                              {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10});
                     }
            /*     var source1 = untiled1.get('visible') ? untiled1.getSource() : tiled1.getSource();
                var source2 = untiled2.get('visible') ? untiled2.getSource() : tiled2.getSource();

                alert("source===="+source.getGetFeatureInfoUrl(
                      evt.coordinate, viewResolution, view.getProjection(),
                      {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10}));
                alert("source1===="+source1.getGetFeatureInfoUrl(
                      evt.coordinate, viewResolution, view.getProjection(),
                      {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10}));
                alert("source2===="+source2.getGetFeatureInfoUrl(
                      evt.coordinate, viewResolution, view.getProjection(),
                      {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10}));
                 */
               /*   urls = source.getGetFeatureInfoUrl(
                  evt.coordinate, viewResolution, view.getProjection(),
                  {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 10}); */

                if (urls) 
                {

                    $.ajax({
                        url :urls,
                        type:"GET",
                        cache:false,
                        async:false,
                        success : function(response) 
                        {

                            $("#hiddencontant").empty();
                         document.getElementById('hiddencontant').innerHTML=response;
                         var Headings=[];
                         var tdContent=[];
                        $('table.featureInfo tr').each(function()
                          {
                            var TDdata=[];
                            $(this).find('th').map(function()
                              {
                                 var thvalue=($(this).text());
                                 Headings.push(thvalue);
                              });
                              $(this).find('td').map(function()
                                  {
                                         var TDvalue=($(this).text());
                                         TDdata.push(TDvalue);
                                 });

                               tdContent.push(TDdata);
                          });


                   var html = "<div class='table-responsive'><table class='table table-striped table-hover table-bordered'>";
                   var heading="<tr>";
                   var tdrowdata="";

                     for(var i=0;i<Headings.length;i++)
                     {
                        heading+="<th>"+Headings[i]+"</th>";
                     }
                     heading+="</tr>";

                     for(var j=0;j<tdContent.length;j++)
                     {
                        var data=tdContent[j];
                        tdrowdata+="<tr>";
                        for(var k=0;k<data.length;k++)
                         {
                            tdrowdata+="<td>"+data[k]+"</td>";
                         }
                        tdrowdata+="</tr>";
                     }
                     tdrowdata+="</table></div>";

                 /*     document.getElementById('contant').innerHTML=html+heading+tdrowdata;
                        $('#modal_form_vertical').modal('show'); */
                        }
                    });        
              });
</script>
</body>
</html>

area of interest in OpenLayers map

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.