1

I have used google map to show the WMS layers from the GeoServer. Now what I am trying to do is, I have drawn a circle on a Google map. Whenever I change the radius of the circle I want to check if within that radius have any feature of layers from the GeoServer. I am doing this project in angular 9 using agm.

In order to achieve this I have done the following steps.

  1. On changing the radius I got circle bound
    function a(){
            circle.getBounds().then(bounds => {
            var bbox = {
                x1 : bounds.getNorthEast().lat(),
                y1 : bounds.getNorthEast().lng(),
                x2 : bounds.getSouthWest().lat(),
                y2 : bounds.getSouthWest().lng()
            }
            })
        }

I send them to server, there I run the below URL to get the list of layers on the server http://localhost:8080/geoserver/wms?service=wms&version=1.1.1&request=GetCapabilities

By this URL I got bbox for each layers. Then I use below code to check if the two bbox overlaps each other

function overlaps(a, b) {
    // no horizontal overlap
    if (a.x1 >= b.x2 || b.x1 >= a.x2) return false;

    // no vertical overlap
    if (a.y1 >= b.y2 || b.y1 >= a.y2) return false;

    return true;
}

This is what I got in capabilities URL

<EX_GeographicBoundingBox>
<westBoundLongitude>72.246193</westBoundLongitude>
<eastBoundLongitude>167.972839</eastBoundLongitude>
<southBoundLatitude>-67.013055</southBoundLatitude>
<northBoundLatitude>-9.799550</northBoundLatitude>
</EX_GeographicBoundingBox>
<BoundingBox CRS="CRS:84" minx="72.246193" miny="-67.013055" maxx="167.972839" maxy="-9.799550"/>
<BoundingBox CRS="EPSG:4326" minx="-67.013055" miny="72.246193" maxx="-9.799550" maxy="167.972839"/>
<BoundingBox CRS="EPSG:3857" minx="8042409.436216" miny="-10159779.218526" maxx="18698650.892001" maxy="-1096238.744138"/>
<BoundingBox CRS="EPSG:4283" minx="-67.013055" miny="72.246193" maxx="-9.799550" maxy="167.972839"/>

But still this code is not working. What I am doing wrong or there is any other way to do this?

3
  • what is not working? can you give us an example of what you are sending to the server? – Ian Turton Oct 2 '20 at 11:03
  • var bbox = { x1 : bounds.getNorthEast().lat(), y1 : bounds.getNorthEast().lng(), x2 : bounds.getSouthWest().lat(), y2 : bounds.getSouthWest().lng() } – Manoj Thakur Oct 2 '20 at 11:37
  • overlaps(a, b) a is the bbox which I send to server and b is the bbox of the layer – Manoj Thakur Oct 2 '20 at 11:38

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.