OpenLayers 7：如何判断坐标是否处于图层范围内？

核心问题 #

你提供的范围数组不符合OpenLayers的格式要求。OpenLayers中，extent的标准格式是[minX, minY, maxX, maxY]，必须满足minX < maxX、minY < maxY。而你的数组[-6.2212531, 53.3257768, -6.3122428, 53.3643417]里，maxX（-6.3122428）比minX（-6.2212531）小，导致范围逻辑完全错误，所有包含检测自然返回false。

修正步骤 #

1. 调整extent顺序：将数组修正为符合[minX, minY, maxX, maxY]的格式，你的正确范围应该是：

   let poly = [-6.3122428, 53.3257768, -6.2212531, 53.3643417];
   

2. 正确调用检测方法：

   • ol.extent.containsCoordinate：传入extent和坐标数组，这是检测点是否在范围内的正确方法
   • ol.extent.containsXY：需要传入单独的x、y值，而非坐标数组
   • ol.extent.containsExtent：用于检测一个范围是否包含另一个范围，不适合单点检测

修正后的代码示例：

let poly = [-6.3122428, 53.3257768, -6.2212531, 53.3643417];

const center = ol.extent.getCenter(poly);
console.log(center);
console.log(ol.extent.containsCoordinate(poly, center)); // 现在返回true
console.log(ol.extent.containsXY(poly, center[0], center[1])); // 拆分x、y参数后返回true

实际业务适配 #

针对你控制TileLayer显示的需求，修正范围后可以这样实现：

• 监听地图视图的change:center事件，获取当前视图中心
• 用ol.extent.containsCoordinate判断该点是否在目标图层的extent内
• 通过layer.setVisible(布尔值)控制图层的显示/隐藏

内容的提问来源于stack exchange，提问作者mr_magpie