如何判断OpenLayers 7地图上的点是否处于当前可视范围

需求说明 #

使用OpenLayers 7开发带有可移动标记点的简易地图，支持用户独立移动地图与标记点；每次地图或标记点移动时，输出地图中心与标记点的经纬度信息，同时需要判断并输出标记点是否处于当前地图可视范围内。推测需要获取MapView的边界信息来实现该判断，现有代码如下：

HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>

<div id="map" class="map"></div>
<div id="info" class="info">
  <h2>Map Info Output</h2>
  Center: <span id=center></span><br>
  Marker: <span id=marker></span><br>
  <span id=update>*update if the marker is on the map or not here.</span>
</div>

CSS代码 #

#map {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  padding: 5px;
  float: left;
}

#info {
  width: calc(100% - 330px);
  margin-left: 5px;
  padding: 5px;
  height: 100px;
  border: 1px solid black;
  float: left;
}

.info h2 {
  font-size: small;
  text-decoration: underline;
  font-weight: 600;
  margin: 0 0 10px 0;
}

JavaScript代码 #

var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;  

document.getElementById('marker').innerHTML = london[0].toFixed(5) + ", " + london[1].toFixed(5);
document.getElementById('center').innerHTML = london[0].toFixed(5) + ", " + london[1].toFixed(5);
    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
        name: 'Somewhere near Nottingham',
    });
    
    
    const map = new ol.Map({
    view: new ol.View({
            
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [
            baseMapTile,
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 46],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        src: 'https://openlayers.org/en/latest/examples/data/icon.png'
                    })
                })
            })
        ],
    target: 'map'
    
  });

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});

map.addInteraction(translate);

translate.on('translating', function (evt) {
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
                document.getElementById("marker").innerHTML = lonlat[0].toFixed(5) + ", " + lonlat[1].toFixed(5);               
                
                //check here to see if marker is still visible on map and update output
                
});

map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {
    var center = ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
                
            document.getElementById("center").innerHTML = center[0].toFixed(5) + ", " + center[1].toFixed(5);
            //check here to see if marker is still visible on map and update output
});

解决方案 #

实现思路 #

1. 获取地图可视范围：通过map.getView().calculateExtent(map.getSize())获取当前地图的可视边界（EPSG:3857坐标系）。
2. 判断标记点是否在范围内：利用标记点几何对象的intersectsExtent()方法，检测标记点是否与可视范围相交。
3. 统一更新逻辑：将可视性检测与DOM更新封装为独立函数，在地图视图变化和标记点移动事件中调用，避免代码重复。

修改后的完整JavaScript代码 #

var london = [-0.1276474, 51.507321899999994];

// 初始化信息显示
document.getElementById('marker').innerHTML = london[0].toFixed(5) + ", " + london[1].toFixed(5);
document.getElementById('center').innerHTML = london[0].toFixed(5) + ", " + london[1].toFixed(5);

const baseMapTile = new ol.layer.Tile({
    source: new ol.source.OSM(),
    visible: true,
    title: 'OSMStandard'
});

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
    name: 'Somewhere near Nottingham',
});

const map = new ol.Map({
    view: new ol.View({
        center: ol.proj.fromLonLat(london),
        zoom: 15,
    }),
    layers: [
        baseMapTile,
        new ol.layer.Vector({
            source: new ol.source.Vector({
                features: [marker]
            }),
            style: new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    src: 'https://openlayers.org/en/latest/examples/data/icon.png'
                })
            })
        })
    ],
    target: 'map'
});

// 标记点拖拽交互
var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});
map.addInteraction(translate);

// 封装标记点可视性检测与更新函数
function updateMarkerVisibility() {
    // 获取当前地图可视范围（EPSG:3857）
    const viewExtent = map.getView().calculateExtent(map.getSize());
    // 获取标记点的几何对象
    const markerGeom = marker.getGeometry();
    // 判断标记点是否在可视范围内
    const isVisible = markerGeom.intersectsExtent(viewExtent);
    // 更新DOM显示
    document.getElementById('update').innerHTML = `Marker is ${isVisible ? 'visible' : 'not visible'} on the map`;
}

// 标记点拖拽时更新信息
translate.on('translating', function (evt) {
    var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
    document.getElementById("marker").innerHTML = lonlat[0].toFixed(5) + ", " + lonlat[1].toFixed(5);
    // 更新可视状态
    updateMarkerVisibility();
});

// 地图视图变化时更新信息
map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {
    var center = ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
    document.getElementById("center").innerHTML = center[0].toFixed(5) + ", " + center[1].toFixed(5);
    // 更新可视状态
    updateMarkerVisibility();
});

// 初始化时执行一次可视性检测
updateMarkerVisibility();

关键说明 #

• calculateExtent()方法返回当前地图视图的边界范围，坐标系与地图视图一致（此处为EPSG:3857）。
• intersectsExtent()方法用于判断几何对象是否与给定范围相交，直接返回布尔值，适合快速检测可视性。
• 将检测逻辑封装为函数后，可在多个事件中复用，保证代码简洁性和可维护性。

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