openlayers 显示观看范围

OpenLayers 可以根据地图视图的范围和分辨率来确定可视范围。

以下是一个示例，显示如何在地图上添加一个矩形框，表示当前的可视范围：

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

// 获取地图视图
var view = map.getView();

// 添加一个矩形框
var geometry = new ol.geom.Polygon.fromExtent(view.calculateExtent(map.getSize()));
var feature = new ol.Feature({
  geometry: geometry
});
var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [feature]
  }),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
    })
  })
});
map.addLayer(vector);

在上面的代码中，我们首先创建了一个地图。然后，我们获取地图的视图，并使用 `view.calculateExtent(map.getSize())` 方法计算出当前的可视范围。接下来，我们使用这个范围创建一个矩形框，并将其添加到地图上，以便用户可以看到当前的可视范围。

请注意，我们使用 `ol.layer.Vector` 和 `ol.source.Vector` 来创建矩形框的图层和数据源，并使用 `ol.style.Style` 定义其样式。