TransWikia.com

Is it possible to, Click to zoom in and switch to vector layer beneath, on webpage to show GeoServer WMS layers via OpenLayers?

Geographic Information Systems Asked by Abhilash Singh Chauhan on March 14, 2021

I have 2 vector layers in GeoServer

First is a district layer
District

Second is a state layer

State

When I make a Layer group of these layers in the GeoServer and showing that layer group on the web-page, using open layers “get-feature information” function, that shows attributes of both layers on the web-page, but I only want to restrict these features to the district layer only (I don’t want to see the state layer features).

Is it possible to click over to select some state and zoom in to the district layer below, and the state layer doesn’t show after that,
and when I zoom out again, the state layer re-appears?

layer group on web-page

window.onload = init;

function init(){

    //Geoserver layer 
    // wmsSource = indialayersource

    var indialayersource = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/agrodss/wms",
        params: {"LAYERS":"agrodss:Rainfall", "tiled": true},
        serverType: "geoserver"
    })

    // wmsLayer = indialayer

    var indialayer = new ol.layer.Tile({
        source: indialayersource, 
        visible:true,
        title: "ForAgrodss"
    })

        // hover

    var highlightStyle = new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255,255,255,0.7)',
      }),
      stroke: new ol.style.Stroke({
        color: '#3399CC',
        width: 3,
      }),
    });



  var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function(extent) {
      return 'localhost:8080/geoserver/agrodss/ows?service=wfs&' + 
             'version=2.0.0&request=GetFeature&' +
             'typeName=agrodss:india_boundary_updated_GCS&maxFeatures=500&' + 
             'outputFormat=application%2Fjson' +
             'bbox=' + extent.join(',') + ',EPSG:4326';
    },
    strategy: ol.loadingstrategy.bbox
    });
    
    var vector = new ol.layer.Vector({
       source: vectorSource
    });
    // map.addLayer(vector);

    // view = myview

    var myview = new ol.View({
        center: ol.proj.fromLonLat([80, 22]),
            zoom: 4.5, 
            maxZoom: 8,
            minZoom: 4,
      });

      var map = new ol.Map({
        layers: [vector, indialayer],
        target: 'js-map',
        view: myview,
      });

      var selected = null;
      var status = document.getElementById('status');

      map.on('pointermove', function (e) {
        if (selected !== null) {
          selected.setStyle(undefined);
          selected = null;
        }
      
        map.forEachFeatureAtPixel(e.pixel, function (f) {
          selected = f;
          f.setStyle(highlightStyle);
          return true;
        });
      
        if (selected) {
          status.innerHTML = ' Hovering: ' + selected.get('name');
        } else {
          status.innerHTML = ' ';
        }
      });
      

      map.on('singleclick', function (evt) {
        document.getElementById('info').innerHTML = '';
        var myviewResolution = myview.getResolution();
        var url = indialayersource.getFeatureInfoUrl(
          evt.coordinate,
          myviewResolution,
          'EPSG:3857',
          {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': '5'}
        );
        if (url) {
          fetch(url)
            .then(function (response) { return response.text(); })
            .then(function (html) {
              document.getElementById('info').innerHTML = html;
            });
        }
      });
    
      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' : '';
      });



    map.on('click', function(e){
        console.log(e.coordinate);


    })
}

I am trying to use Select Features by Hover of OpenLayers to select the state, then go to district layer.
But it ain’t working.

One Answer

You can add your layers separately and then apply the hover to just the district layer.

Answered by Ian Turton on March 14, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP