初识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 |
