He creado una página web que muestra un mapa con algo más de información y quiero añadir la posibilidad de crear un buffer centrado en la posición en la que se haga clic.
Mi idea es seleccionar o cambiar los símbolos de las características que se colocan bajo el buffer. No tengo ni idea de cómo debo hacer esto.
El código html de mi página es:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenLayers map preview</title>
<link rel="stylesheet"
href="http://localhost:8080/geoserver/openlayers3/ol.css"
type="text/css">
<script src="http://localhost:8080/geoserver/openlayers3/ol.js"
type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<li>
<a>Filter:</a>
<input type="text" size="80" id="filter"/>
<a
id="updateFilterButton"
href="#"
onClick="updateFilter()"
title="Apply filter">Apply</a>
<a
id="resetFilterButton"
href="#"
onClick="resetFilter()"
title="Reset filter">Reset</a>
</li>
<div id="layertree">
<h5>Click on layer nodes below to change their properties.</h5>
<ul>
<li><!-- nmtoken edit added missing li -->
<ul>
<li><span>Food insecurity layer</span>
<fieldset id="layer10">
<label class="checkbox" for="visible10">
<input id="visible10" class="visible" type="checkbox"/>visibility
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01"/>
</fieldset>
</li>
</ul>
</li>
</ul>
</div>
<div id="nodelist">
<em>Click on the map to get feature info</em>
</div>
<script type="text/javascript">
var pureCoverage = false;
var bounds = [5720947.7865, 4259576.5416,
5721755.0394, 4260363.5763];
var untiled = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/cite/wms/' ,
params: { LAYERS: 'cite:polygon2' }
})
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}), new ol.layer.Group({
layers: [untiled]
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([37.40570, 8.81566]),
zoom: 4
})
});
map.getView().fit(bounds, map.getSize());
function bindInputs (layerid, layer) {
var visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function() {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
var opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function() {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
map.getLayers().forEach(function(layer, i) {
bindInputs('#layer' + i, layer);
if (layer instanceof ol.layer.Group) {
layer.getLayers().forEach(function(sublayer, j) {
bindInputs('#layer' + i + j, sublayer);
});
}
});
$('#layertree li > span').click(function() {
$(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();
map.on('singleclick', function(evt) {
document.getElementById('nodelist').innerHTML = "Loading... please wait...";
var view = map.getView();
var viewResolution = view.getResolution();
var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
var url = source.getGetFeatureInfoUrl(
evt.coordinate, viewResolution, view.getProjection(),
{'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});
if (url) {
document.getElementById('nodelist').innerHTML = '<iframe seamless src="' + url + '"></iframe>';
}
});
function updateFilter(){
if (pureCoverage) {
return;
}
var filter = document.getElementById('filter').value;
// by default, reset all filters
var filterParams = {
'FEATUREID': null
};
{
filterParams["FEATUREID"] = filter;
}
// merge the new filter definitions
map.getLayers().forEach(function(lyr) {
untiled.getSource().updateParams(filterParams);
});
}
function resetFilter() {
if (pureCoverage) {
return;
}
document.getElementById('filter').value = "";
updateFilter();
}
</script>
</body>
</html>`
