OpenLayers怎么设置视口范围

OpenLayers是一个开源的JavaScript库，用于在Web页面上创建和操作地图。设置视口范围（viewport）是指控制地图显示区域的大小和位置。以下是使用OpenLayers设置视口范围的基本步骤：

1. 创建地图实例：

var map = new ol.Map({
  target: 'map', // 地图容器的id
  view: new ol.View({
    center: [0, 0], // 中心点经纬度
    zoom: 2, // 初始缩放级别
    maxZoom: 18, // 最大缩放级别
    minZoom: 1 // 最小缩放级别
  })
});

2. 设置视口范围（extent）：

// 使用地理坐标范围或像素坐标范围设置视口
var extent = ol.proj.fromLonLat([-180, -90, 180, 90]); // 全球范围
map.setView({center: extent.getCenter(), zoom: 2, extent: extent});

// 或者使用地图自身的分辨率和比例尺进行设置
var resolution = map.getView().getResolution();
var pixelSize = resolution * map.getSize();
var leftTop = map.getView().calculatePixelFromCoordinate([extent.getWest(), extent.getNorth()]);
var rightBottom = map.getView().calculatePixelFromCoordinate([extent.getEast(), extent.getSouth()]);
map.setView({center: map.getView().getCenter(), zoom: map.getView().getZoom(), size: [pixelSize, pixelSize], extent: [leftTop, leftTop, rightBottom, rightBottom]});