2

I have connected my PostGIS data to GeoServer and I want to GetFeature with a OpenLayers user created BBox. I have implemented a BBox to my app like this:

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

var dragBox = new ol.interaction.DragBox({
  condition: ol.events.condition.shiftKeyOnly,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: [0, 0, 255, 1]
    })
  })
});


map.addInteraction(dragBox);

var infoBox = document.getElementById('box');


dragBox.on('boxend', function() {

    var string = dragBox.getGeometry().getCoordinates();

    window.alert(string)

});


var telecom_cables= new ol.layer.Image({
    target: 'map',
    visible:false,
    source:new ol.source.ImageWMS({
        url:'http://localhost:8080/geoserver/openMapProject/wms',
        params:{'LAYERS':'openMapProject:telecom_cables_grc'},
        serverType:'geoserver'
    })
});
map.addLayer(telecom_cables);
TomazicM
  • 25,601
  • 22
  • 29
  • 39
Dionisis Kotzaitsis
  • 31
  • 5
  • PS. The gerCoordinates part is not included to the question, I just want to give the user his BBox coordinates as well. – Dionisis Kotzaitsis Mar 16 '21 at 10:17
  • 1
    Please edit your question and add code relevant to your GeoServer layer. – TomazicM Mar 16 '21 at 10:25
  • Well the problem is that I don't have 1 layer . I have many layers , that I make visible with a button. – Dionisis Kotzaitsis Mar 16 '21 at 10:37
  • One of those you would like to apply bbox to would be enough. – TomazicM Mar 16 '21 at 10:42
  • And also , is it possible to take all of the layers features from the bbox? – Dionisis Kotzaitsis Mar 16 '21 at 11:46
  • You mean CORS error? – TomazicM Mar 17 '21 at 07:40
  • The error is: "jquery-3.5.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:8080/geoserver/wfs...7 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details." – Dionisis Kotzaitsis Mar 17 '21 at 07:57
  • did you turn CORS on/off in the servlet engine? https://gis.stackexchange.com/questions/210109/enabling-cors-in-geoserver-jetty?r=SearchResults&s=1|121.6554 – Ian Turton Mar 17 '21 at 08:49
  • Well, I've turned CORS on for my GetFeatureInfo schema and it works fine. I don't know if I have to do something else. – Dionisis Kotzaitsis Mar 17 '21 at 08:54
  • So it works OK now? – TomazicM Mar 17 '21 at 09:27
  • That's still the response in my console (The corb error) . I enabled CORS for WMS GetFeatureInfo and it worked for that . – Dionisis Kotzaitsis Mar 17 '21 at 09:30
  • Ok. Now I'm completely lost, I use tomcat . I followed your tutorial. When I uncomment Jetty (I don't think I need it but I gave that a try) , it throws a 404 . With only CORS enabled WMS works fine , but WFS GetFeature still logs the same error, while Tomcats terminal returns "17 Mar 11:46:19 INFO [wfs.json] - about to encode JSON" – Dionisis Kotzaitsis Mar 17 '21 at 09:49
  • 2
    If you found solution to your problem, don't describe it in the body of the question (since then it will be closed as not reproducible), but rather publish as an answer to your own question to help others with similar questions/problems. – TomazicM Mar 18 '21 at 09:39

1 Answers1

1

An even better solution using min/max coords to make the bbox getFeature usable for any direction of dragging and using a button system for having 2 or more layers

So , we create the bbox interaction on our Map ,get the projection (I transform it to EPSG:4326) and give the user his bbox co-ords. After that we do an AJAX call to our server using the Get Feature geoserver command with a bbox in the URI (https://docs.geoserver.org/latest/en/user/tutorials/cql/cql_tutorial.html here's the documentation). Watch out for the CORS configuration on your server (Enabling CORS in GeoServer (jetty)? , thank you for the comment on the original question)

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

var selectedFeatures = select.getFeatures();


var dragBox = new ol.interaction.DragBox({
  condition: ol.events.condition.shiftKeyOnly,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: [0, 0, 255, 1]
    })
  })
});


map.addInteraction(dragBox);


var infoBox = document.getElementById('box');


dragBox.on('boxend', function() {


var lonList=[]
var latList=[]

var string = dragBox.getGeometry().getCoordinates();
for(i=0;i<4;i++){
  string[0][i]=ol.proj.transform(string[0][i],'EPSG:3857', 'EPSG:4326');
  lonList.push(string[0][i][0])
  latList.push(string[0][i][1])
}

var minLon=Math.min.apply(Math,lonList)
var minLat=Math.min.apply(Math,latList)
var maxLon=Math.max.apply(Math,lonList)
var maxLat=Math.max.apply(Math,latList) 


window.alert("Min Longitude:  "+minLon+"\n"+"Max Longitude:  "+maxLon+"\n"+"Min Latitude:  "+minLat+"\n"+"Max Latitude:  "+maxLat)

function getFeature(button,layer){
  if(button.checked){
      var url= "http://localhost:8080/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&typeNames="+ layer +"&srsName=EPSG:4326&maxFeatures=1000000&outputFormat=json&format_options=callback:getJson&bbox="+minLon + "," + minLat + "," + maxLon + "," + maxLat+",EPSG:4326"  ;
      if(url){
        $.ajax({
          type:"GET",
          url: url,
          dataType: 'json',
          jsonpCallback: 'getJson',
          contentType: 'application/json',
          success: function(data){
             console.log(data)
            }
        });
      }
    };
  }

getFeature(lighthousesbtn,"openMapProject:lighthouses_grc");
getFeature(militarygrc,"openMapProject:military_grc");
getFeature(telecom,"openMapProject:telecom_cables_grc");





});
Dionisis Kotzaitsis
  • 31
  • 5