OpenLayer系列——【一】初识OpenLayer与OpenLayer视图操作

初识OpenLayer

1、初始化地图渲染

安装openlayer依赖

npm i ol

首先准备一个容器用来渲染地图

<div id="map" ref="map" style="width: 100%; height: 100%" />

导入依赖初始化地图

import 'ol/ol.css';
import OSM from 'ol/source/OSM.js';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

this.map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new XYZ({
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg"
      })
    })
  ],
  view: new View({
    center: [116.403218, 39.92372],
    zoom: 0,
    minZoom: 1,
    maxZoom: 12,
    // 视角旋转
    rotation: Math.PI / 5,
    // 视图约束
    extent: [110, 20, 120, 30]
    // 地图坐标系的类型
    projection: "EPSG:4326"
  })
});

其中视图View对象全部可以使用的属性如下

属性名	说明
center	地图视图的中心点坐标。它是一个包含经度和纬度的数组，例如[116.403218, 39.92372]
zoom	地图的缩放级别
minZoom	地图的最小缩放级别
maxZoom	地图的最大缩放级别
rotation	地图视图的旋转角度。它以弧度为单位，例如Math.PI / 5表示逆时针旋转36度
extent	地图视图的可见范围。它是一个包含最小经度、最小纬度、最大经度和最大纬度的数组，例如[110, 20, 120, 30]。这个属性定义了地图可见区域的边界
projection	地图视图的投影方式。它定义了地图坐标系的类型，例如"EPSG:4326"表示使用WGS84坐标系
resolutions	地图的分辨率数组。它定义了每个缩放级别对应的地图分辨率。数组元素的顺序应该与缩放级别一致
constrainResolution	布尔值，表示是否约束地图分辨率。当该属性设置为true时，地图将自动根据可用的分辨率调整缩放级别
enableRotation	布尔值，表示是否允许旋转地图。当该属性设置为false时，禁止用户旋转地图视图
enableZoom	布尔值，表示是否允许缩放地图。当该属性设置为false时，禁止用户缩放地图视图
enablePan	布尔值，表示是否允许平移地图。当该属性设置为false时，禁止用户平移地图视图
smoothExtentConstraint	布尔值，表示是否使用平滑约束范围。当该属性设置为true时，地图平移和缩放时会平滑过渡到约束范围内
smoothResolutionConstraint	布尔值，表示是否使用平滑约束分辨率。当该属性设置为true时，地图缩放时会平滑过渡到约束分辨率

在openlayer当中还提供了一个地图图层OSM

this.map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

2、获取当前视图的属性

// 当前层级
this.map.getView().getZoom()
// 当前中心点
this.map.getView().getCenter()

3、层级切换

在openlayer当中我们可以发现zoom就是用来控制层级的，所以我们可以直接通过获取View之后直接修改Zoom用来实现层级切换，

this.map.getView().setZoom(10)

但是这样是直接切换层级放大缩小没有动画效果，看起来交互就不是很好，我们可以给这个层级加上一个延时动画，通过view,animate传递一个对象进去用来控制，当然这里不单单只是可以控制zoom、还可以控制其他View里面的属性。

const view = this.map.getView();
const zoom = view.getZoom();
const duration = 2000;

view.animate({
  zoom: zoom + 1,
  center: [16.403218, 39.92372],
  rotation: Math.PI / 3,
  duration
});

4、区域定位

在实际开发过程当中，比方说在地图上展示了20个点，而后我们想刚刚好让这20个点在某个层级之下刚刚好全部展示，这时我们即不知道中心位置，也不知道它到底要放大到什么层级，这个时候可以通过区域定位来实现，也就是地图视图聚焦

const bounds = [116, 28, 125, 34];
const width = this.map.getSize()[0];
const height = this.map.getSize()[1];

// 将地图视图聚焦至初始范围
this.map.getView().fit(bounds, {
  size: [width, height],
  padding: [50, 50, 50, 50],
  minResolution: 0,
  duration: 2000,
  easeOut: function (t) {
	return 1 - Math.pow(1 - t, 2);
  }
});

这里的属性配置在下面简单说明一下

属性	说明	默认值
bounds	数组，聚焦的四个顶点
size	数组，地图视图的宽度和高度
padding	设置了地图视图与边界的间距，单位（px）
minResolution	地图视图的最小分辨率
duration	数字，表示动画过渡的持续时间，单位（毫秒）	undefined
easing	函数，表示动画过渡的缓动函数	undefined
maxZoom	数字，表示最大缩放级别
nearest	布尔值，表示是否使用最近的分辨率	false
constrainResolution	布尔值，表示是否限制分辨率	true