1

I have created a buffer when user enter radius. Points are selected inside buffer but I dont know how to show feature information of selected features.

Here is my code:

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

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

 var feature ;
 map.getViewport().addEventListener("dblclick", function(e) {
// circleLayer.getSource().clear();
 // select.getFeatures().clear();
 if(feature!=null){
        map.removeLayer(featureRequest);
        vectorSource.removeFeature(feature);
        marker.removeFeature(featureMarker);
        select.getFeatures().clear();
 }

    var coordinate = map.getEventCoordinate(e);
    console.log("coordinate = "+coordinate);
    //add marker
         var latLong = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
        featureMarker = new ol.Feature(new ol.geom.Point(coordinate));
        marker.addFeature(featureMarker);
    //add marker
     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);

    /*** jsts ***/
                var geom_select = feature.getGeometry();
                console.log("geom_select = "+geom_select);
                var pt = reader_wkt.read('POINT (' + geom_select.getCenter().join(' ') + ')')
                var jsts_geom_select = pt.buffer(geom_select.getRadius());
                console.log("jsts_geom_select = "+jsts_geom_select);

    /*** jsts ***/
featureRequest = new ol.layer.Vector({
 title: 'Filtered point Map',
  visible: true,
  source: new ol.source.Vector({
    loader: function(extent) {
      $.ajax('http://localhost:8080/geoserver/wfs', {
        type: 'POST',
        data: {
          service: 'WFS',
          version: '1.1.0',
          request: 'GetFeature',
          typename: 'export:Ground_Control_Point',
         outputFormat: 'application/json',
          srsname: 'EPSG:3857',
          bbox: extent.join(',') + ',EPSG:3857'
        }
      }).done(function(response) {
            console.log("response "+response);
             features = new ol.format.GeoJSON().readFeatures(response);

             // extent_swe=vectorSource.getExtent();
            features = features.filter(function(el) {
                  if (jsts_geom_select.contains(parser.read(el.getGeometry()))) {
                    return true;
                  }
                });
                console.log("features "+features);
                 select.getFeatures().extend(features);
                // vectorSource.addFeatures(features);
      });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857'
  }),
    style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: 'aqua'
            })
          })
        })
});

 map.addLayer(featureRequest);
 });

enter image description here

How to get information on hover of selected points?

2

Since all map elements in OpenLayers 5 are rendered to canvas, the only way to get info about feature under mouse is by catching pointermove event on map and then checking with map.forEachFeatureAtPixel(pixel, ... if there is feature at mouse location.

Code below displays tooltip when mouse is over feature. It presuposes that features have myId property, but it can be any. Base for the code is taken from OpenLayers popup example https://openlayers.org/en/latest/examples/popup.html.

<style>
  .ol-tooltip {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 17px;
    left: -50px;
    min-width: 170px;
  }
  .ol-tooltip:after, .ol-tooltip:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-tooltip:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-tooltip:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
   .ol-tooltip p {
     margin-top: 0;
     margin-bottom: 0;
</style>
...
<div id="map"></div>
<div id="tooltip" class="ol-tooltip">
  <div id="tooltip-content"></div>
</div>
...
<script>
  ...
  var tooltipContainer = document.getElementById('tooltip');
  var tooltipContent = document.getElementById('tooltip-content');

  var tooltip = new ol.Overlay({
    element: tooltipContainer,
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  });
  map.addOverlay(tooltip);

  var featureId = '';

  map.on('pointermove', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
      if (featureId == feature.get('myId')) {
        return feature;
      };
      featureId = feature.get('myId');
      var coordinates = feature.getGeometry().getCoordinates();
      tooltipContent.innerHTML = '<p>You are over ' + featureId + '</p>';
      tooltip.setPosition(coordinates);
      return feature;
    });
    if (!feature && (featureId != '')) {
      featureId = '';
      tooltip.setPosition(undefined);
    };
  });
</script>

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.