View

View 类是 OpenLayers 中用来控制地图视图的组件。它定义了地图的：

• 中心点（center）：地图显示的中心坐标。
• 缩放级别（zoom）：地图的缩放比例。
• 最小/最大缩放级别（minZoom/maxZoom）：地图允许的缩放范围。
• 旋转角度（rotation）：地图的旋转角度（以弧度表示）。
• 投影坐标系（projection）：地图数据的坐标参考系统（默认使用 EPSG:3857）。

常用属性

1、设置中心点

定义地图的中心坐标，通常使用 [longitude, latitude] 的数组形式。

EPSG:3857 坐标系中的中心点

new View({
  center: [12600000, 4100000],
  zoom: 5,
  projection: 'EPSG:3857',	// 默认的投影值是EPSG:3857，可以不用写
});

或者：

import { fromLonLat } from "ol/proj";

new View({
  center: fromLonLat([116.397428, 39.90923]),
  zoom: 5,
});

EPSG:4326 坐标系中的中心点

new View({
  center: [116.397428, 39.90923],
  zoom: 5,
  projection: 'EPSG:4326'
});

或者：

import { toLonLat } from "ol/proj";

new View({
  center: toLonLat([12600000, 4100000]),
  zoom: 5,
  projection: 'EPSG:4326'
});

TIP

后续的章节中除非明确说明，默认均以EPSG:3857 为默认投影。

2、设置缩放级别

const view = new View({
  center: [0, 0],
  zoom: 2,
});

3、设置最小/最大缩放级别

const view = new View({
  center: [0, 0],
  zoom: 2,
  minZoom: 1,
  maxZoom: 18,
});

4、设置旋转角度

new View({
  center: [0, 0],
  zoom: 2,
  rotation: Math.PI / 4, // 旋转 45 度
});

5、设置投影坐标系

new View({
  center: [0, 0],
  zoom: 2,
  projection: 'EPSG:4326',
});

关于投影坐标系的介绍，见后续章节。

动态更新 View 属性

View 对象提供了许多方法来动态更新视图属性，如 setCenter、setZoom、setRotation 等。

1、设置中心点

import { fromLonLat } from "ol/proj";

map.getView().setCenter(fromLonLat([116.4074, 39.9042]));

2、设置缩放层级

map.getView().setZoom(8);

3、旋转地图

map.getView().setRotation(Math.PI / 2); // 旋转 90 度

4、 平滑动画效果

OpenLayers 支持通过 animate 方法来实现平滑的地图移动和缩放效果。

import { fromLonLat } from "ol/proj";

map.getView().animate({
  center: fromLonLat([116.4074, 39.9042]),
  zoom: 10,
  rotation: Math.PI,
  duration: 2000, // 动画持续时间（毫秒）
});

5、限制地图范围（extent）

通过设置 extent 参数，可以限制地图视图的最大显示范围。地图将无法平移到范围之外的区域。

new View({
  center: [0, 0],
  zoom: 2,
  extent: [-5000000, -5000000, 5000000, 5000000], // 设置限制范围，注意，这里的坐标是EPSG:3857
});

view变化的事件

View 支持监听 change 事件，例如当中心点或缩放级别发生变化时触发。

const view = map.getView();

view.on('change:center', () => {
  console.log('中心点已改变:', view.getCenter());
});