Geographic Information Systems Asked by Abhilash Singh Chauhan on March 14, 2021
I have 2 vector layers in GeoServer
Second is a state layer
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?
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.
You can add your layers separately and then apply the hover to just the district layer.
Answered by Ian Turton on March 14, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP