Openlayer 在缩放地图图像上，过滤并仅获取地图上的可见区域

Question

使用 openlayer 库，我想显示缩放地图后在图像地图上可见的区域列表。例如，使用 Openlayer 库加载图像地图时，会显示 100 个标记区域，缩放地图后，地图上仅可见 20 个区域。因此，通过获取列表视图中可见的 20 个区域，仅显示它们。任何线索都将不胜感激。

此图像有 14 个区域，未缩放。

缩放后此地图图像只有 4 个区域可见，因此仅显示在列表视图中标记的 4 个区域：

缩放后此地图图像只有 4 个区域可见，因此仅显示在列表视图中标记的 4 个区域：

Answer 1

这是上述问题的解决方案：

/** * 从这里开始，在缩放时显示地图上可见的座位 */ this.map.on('moveend', () => { const 范围 = this.map.getView().calculateExtent(this.map.getSize()); const tl = getTopLeft(范围); const tr = getTopRight(范围); const bl = getBottomLeft(范围); const br = getBottomRight(范围); const 多边形 = new 多边形([[tl, tr, br, bl, tl]]); var featuresArray = this.source.getFeatures(); const 可见特征 = []; featuresArray.forEach(项目 => { const cords = item.getGeometry().getCooperatives() const [item_tl, item_tr, item_br, item_bl] = cords[0]; 如果 （ 多边形.相交坐标(item_tl) ||多边形.相交坐标(item_tr) ||多边形.相交坐标(item_br) ||多边形.相交坐标(item_bl) ）{ 可见功能.推(项目); } }) console.log('visibleFeature',visibleFeature); //this.visibleSeats = ''; this.visibleFeatures =visibleFeature; //visibleFeature.forEach(item => { // this.visibleSeats +=

${item['values_'].areaNumber}, 

// }) })