Openlayer On zooming map image, filter & get only visible areas on Map

Question

Using openlayer library, I want to show a list of areas which are visible on image map post zooming the map. For example, On load of image map using Openlayer library, 100 tagged areas are shown, post zooming the map only 20 areas are visible on the map. Hence show only those 20 areas which are visible in a list view by getting them. Any leads would be appreciated here.

This image is having 14 areas without zoom. enter image description here

Post zoom this map image is having only 4 areas are visible , so show only 4 areas tagged in list view : enter image description here

Post zoom this map image is having only 4 areas are visible , so show only 4 areas tagged in list view : enter image description here

Answer 1

Here is the solution for above ask :

/**
 * On Zoom show visible seats on map starting here
 */
this.map.on('moveend', () => {
  const extent =  this.map.getView().calculateExtent(this.map.getSize());
  const tl = getTopLeft(extent);
  const tr = getTopRight(extent);
  const bl = getBottomLeft(extent);
  const br = getBottomRight(extent);
  const polygon = new Polygon([[tl, tr, br, bl, tl]]);
  var featuresArray = this.source.getFeatures();
  const visibleFeature = [];
  featuresArray.forEach(item => {
    const cords = item.getGeometry().getCoordinates()
    const [item_tl, item_tr, item_br, item_bl] = cords[0];
    if (
        polygon.intersectsCoordinate(item_tl) 
        || polygon.intersectsCoordinate(item_tr) 
        || polygon.intersectsCoordinate(item_br) 
        || polygon.intersectsCoordinate(item_bl)
      ) {
      visibleFeature.push(item);
    }
  })
  console.log('visibleFeature', visibleFeature);
  //this.visibleSeats = '';
  this.visibleFeatures = visibleFeature;
  // visibleFeature.forEach(item => {
  //   this.visibleSeats += `${item['values_'].areaNumber}, `
  // })
})