1

I have a buffer that is made from a given point, and then I have points inside this area that I want to select.

Was thinking I could use boundingExtent somehow but I don't get how the selection part is working.

As an alternative I was thinking of using forEachFeatureINtersectingExtent.

The points are fetched with writeGetFeature on WFS and then added to layer

Here is my code:

var Sphere = new ol.Sphere(6378137);
var radius = 500;

var circle = new ol.geom.Polygon.circular(Sphere, [17.000425, 60.6467023], radius, 64);
var circle3857 = circle.clone().transform('EPSG:4326', 'EPSG:3857');
vectorLayer3857.getSource().addFeature(new ol.Feature(circle3857));

var ext = ol.extent.boundingExtent([17.000425,60.6467023]);
ext = ol.proj.transformExtent(ext, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));

vectorSource.forEachFeatureIntersectingExtent(ext,
function(feature) {
// DO SOMTHING HERE
});

Here is an image how to looks now: see image here

UPDATE (All code)

 <html>
 <head>
 <title></title>
 <link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css"      type="text/css">
 <script src="https://cdn.polyfill.io/v2/polyfill.min.js?     features=requestAnimationFrame,Element.prototype.classList,URL"></script>
 <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
 </head>
 <body>
 <div id="map" class="map"></div>
 <select id="distance">
 <option value="1000">1 k</option>
 <option value="2000">2 k</option>
 <option value="5000">5 k</option>
 </select>
 <script>
 var dist;

 var pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
        fill: new ol.style.Fill({
            color: 'yellow'
        }),
    stroke: new ol.style.Stroke({
        color: 'magenta'
    }),
        radius: 5
    })
 });

 var map = new ol.Map({
   layers: [
     new ol.layer.Tile({
       source: new ol.source.OSM(),
     })
   ],
   target: 'map',
   view: new ol.View({
     center: ol.proj.transform([17.000425,      60.6467023],'EPSG:4326','EPSG:900913'),
     zoom: 12
   }),
   interactions: ol.interaction.defaults({
     doubleClickZoom: false
   })
 });

 var vectorSource = new ol.source.Vector();
 var circleLayer = new ol.layer.Vector({
   source: vectorSource
 });
 map.addLayer(circleLayer);

 var select = new ol.interaction.Select({
    style: pointStyle
 });

 map.addInteraction(select);
 var selectedFeatures = select.getFeatures();


 map.getViewport().addEventListener("dblclick", function(e) {
    var coordinate = map.getEventCoordinate(e);
    vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coordinate,           dist)));

var ext = ol.extent.boundingExtent([coordinate]);
ext = ol.proj.transformExtent(ext, ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));

console.log("EXT = "+ext);

vectorSource.forEachFeatureIntersectingExtent(ext,
    function(features) {
        selectedFeatures.select(features);
    });
 });

 var distanceSelect = document.getElementById('distance');

 function onChange() {
   dist = parseInt(distanceSelect.value)
   console.log(dist);
 }
 distanceSelect.addEventListener('change', onChange);
 onChange();

 var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:3857',
featureNS: 'sweden',
featurePrefix: 'sweden',
featureTypes: ['mypoints'],
outputFormat: 'application/json',
filter: ol.format.filter.or(
    ol.format.filter.like('name', 'lekplats*'),
    ol.format.filter.like('name', 'playground*')
)
  });

  // then post the request and add the received features to a layer
 fetch('http://localhost:8080/geoserver/wfs', {
  method: 'POST',
  body: new XMLSerializer().serializeToString(featureRequest)}).then(function(response) {
  //console.log(response); //prints out information in console
  return response.json();
  }).then(function(json) {
  var features = new ol.format.GeoJSON().readFeatures(json);
  vectorSource.addFeatures(features);
  extent_swe=vectorSource.getExtent();
 //console.log(map.getSize()); //prints out information
  //map.getView().fit(extent_swe, (map.getSize()));
  });

 </script>
 </body>
 </html>
  • 1
    Welcome to SE. Could you add some detail regarding what the results are from the code you have posted? – Keagan Allan Feb 19 '18 at 9:09
  • Here is my map so far image – Major Bronco Feb 19 '18 at 9:45
  • With Questions in the SE, it is best to add changes to the original question. Please edit your question with any new information. This helps people follow the thought processes and it means that future users wont have to mine through the comments to try and find exactly what the issues were and what the solutions may have been. – Keagan Allan Feb 19 '18 at 9:52
  • Ok, I have added the map to the question. – Major Bronco Feb 19 '18 at 11:12
  • @KeaganAllan I have a new idea for the solution. – Major Bronco Feb 21 '18 at 10:26
1

There are a few issues with your code.

1) selectedFeatures.select(features); is not a valid function.

You should use selectedFeatures.push(features); to select the features.

2) At var ext = ol.extent.boundingExtent([coordinate]); you are getting the extent of coordinates of the point where you double clicked. I think you were trying to get the extent of the circle.

Here's the modified code -

map.getViewport().addEventListener("dblclick", function(e) {
    var coordinate = map.getEventCoordinate(e);
    var feature = new ol.Feature(new ol.geom.Circle(coordinate, dist));

    //GET CIRCLE EXTENT
    var ext = feature.getGeometry().getExtent();

    //SELECT FEATURES BEFORE ADDING CIRCLE TO PREVENT THE CIRCLE FROM BEING SELECTED
    vectorSource.forEachFeatureIntersectingExtent(ext, function(features) {
        selectedFeatures.push(features);
    });

    //ADD CIRCLE
    vectorSource.addFeature(feature);
});

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.