1

I created a web page that displays a map by some more information and I want to add the ability to create a buffer centered on the position that I click on.

My idea is to select or change the symbols of the features that are placed under the buffer. I have no idea how I should do this.

My page html code is:

<!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>`
-1

You're gonna need to use WPS, Take a look at this. It has all your answers.

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • thank a lot but until now i just added wps request builder to my geoserver i find the buffer processes but that book did not explained how shuld use it and work with it in web page i jast have a xml file and i dont know how shuld i use it... – hamidmadani Jul 8 '16 at 23:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.