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

初识OpenLayer

1、初始化地图渲染

安装openlayer依赖

npm i ol
1

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

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

导入依赖初始化地图

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"
  })
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

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

this.map = new Map({
  target: "map",
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});
1
2
3
4
5
6
7
8
9
10
11
12

2、获取当前视图的属性

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

3、层级切换

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

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

但是这样是直接切换层级放大缩小没有动画效果，看起来交互就不是很好，我们可以给这个层级加上一个延时动画，通过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
});
1
2
3
4
5
6
7
8
9
10

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);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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