首页 / OpenLayers / API 文档

View

先看结论

视图对象。保存中心点、缩放级别、分辨率和旋转角，决定地图看哪里、看多大。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.View(options)

构造参数

参数	说明
`center`	中心点，视图投影下的坐标，默认 `[0, 0]`
`zoom`	缩放级别，与 `resolution` 二选一
`resolution`	分辨率，一个像素代表的投影单位数
`rotation`	旋转弧度，顺时针为正
`projection`	投影标识或投影对象，默认 `EPSG:3857`
`minZoom` / `maxZoom`	缩放级别上下限
`extent`	可拖动范围，超出部分会被约束
`constrainResolution`	是否吸附到整数级别，滚轮缩放更规整
`padding`	可视区域留白，`[上, 右, 下, 左]` 像素
`enableRotation`	是否允许旋转，设为 false 禁用

常用方法

方法	说明
`getCenter()` / `setCenter(c)`	读写中心点，单位是投影单位
`getZoom()` / `setZoom(z)`	读写缩放级别
`getResolution()` / `setResolution(r)`	读写分辨率
`getRotation()` / `setRotation(r)`	读写旋转弧度
`getProjection()`	取投影对象
`calculateExtent(size)`	按画布尺寸换算当前视野的地理范围
`fit(extent, options)`	缩放到指定范围，可带 `padding` 与动画
`animate(varArgs)`	动画到目标状态，可多段串联
`setMinZoom(z)` / `setMaxZoom(z)`	运行时调整缩放范围

var view = new ol.View({
  center: ol.proj.fromLonLat([116.391263, 39.907359]),
  zoom: 12,
  minZoom: 4,
  maxZoom: 18
});

/* 缩放到一个矩形范围，留 40 像素边距并带过渡 */
view.fit([116.30, 39.85, 116.50, 39.98], {
  padding: [40, 40, 40, 40],
  duration: 600
});

缩放与分辨率

zoom 和 resolution 是同一件事的两种表达。缩放级别由瓦片网格推导，0 级一张瓦片覆盖整个世界；分辨率是直接的米每像素，在没有标准瓦片网格的自定义投影里更可控。

var resolution = view.getResolution();
var metersPerPixel = resolution;      // EPSG:3857 下单位就是米

/* 反过来设一个固定分辨率，相当于锁定显示比例 */
view.setResolution(10);

view.getCenter() 返回的是投影坐标，不是经纬度。要把中心点写入数据库，先用 ol.proj.toLonLat() 转换。 calculateExtent() 的返回值同理。

动画

animate 的参数与构造参数同名，每段需要 duration。传多段时按顺序播放：

view.animate(
  { zoom: 8, duration: 500 },
  { center: ol.proj.fromLonLat([121.473701, 31.230416]), duration: 900 },
  { zoom: 13, duration: 700, easing: ol.easing.inAndOut }
);

每段结束后触发一次 moveend。要判断是否还在动画中，监听 view.getAnimating() 或 getInteracting()。

引用本文

经纬志（2026）。《View》。https://www.jingweizhi.com/openlayers/api/view.html（访问日期 2026-11-03）。