Openlayers入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位_openlayers设置地图中心

专栏目录：
OpenLayers入门教程汇总目录

前言

本章介绍一下Openlayers最基础的调整中心点坐标方式、调整缩放级别、调整地图可视角度和地图复位的小功能示例，非常简单，可直接上手。

Openlayers飞行动画方式飞行到指定位置请参考：《OpenLayers入门，OpenLayers视图飞行动画，OpenLayers飞行到指定经纬度位置》

二、依赖和使用

"ol": "^6.15.1"
1

1. 使用npm安装依赖

npm install ol@6.15.1
1

2. 使用Yarn安装依赖

yarn add ol
1

vue中如何使用：

vue项目使用请参考这篇文章：vue项目集成并使用OpenLayers地图的两种方式

实现功能

1、调整中心点坐标
2、调整缩放级别
3、调整地图可视角度
4、地图复位到默认位置和缩放级别以及可视角度

代码实现

import 'ol/ol.css'
import * as control from 'ol/control'
import { Map, View } from 'ol/index'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ } from 'ol/source'

var map
const defaultZoom = 8
const defaultCenter = [119, 32]
const defaultRotation = 0
function initMap() {
  map = new Map({
    target: 'eguid-map',
    controls: control.defaults({ attribution: false, zoom: true, rotate: true }),
    view: new View({
      center: defaultCenter,
      maxZoom: 21,
      zoom: defaultZoom,
      minZoom: 7,
      rotation: defaultRotation,
      projection: 'EPSG:4326'
    })
  })
  // 添加高德地图图层
  const xyzLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    }),
    projection: 'EPSG:3857'
  })
  map.addLayer(xyzLayer)
}

/**
 * 调整中心点位置
 * @param x
 * @param y
 */
function setCenter(x, y) {
  map.getView().setCenter([x, y])
}

/**
 * 调整缩放级别
 * @param level
 */
function setZoom(level) {
  map.getView().setZoom(level)
}

/**
 * 调整地图角度
 * @param rotate
 */
function setRotation(rotate) {
  map.getView().setRotation(rotate)
}

/**
 * 地图复位
 */
function resetMap() {
  map.getView().setCenter(defaultCenter)
  map.getView().setZoom(defaultZoom)
  map.getView().setRotation(defaultRotation)
}

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

vue集成代码

<template>
  <div>
    <div id="eguid-map" className="eguid-map" style="width: 800px; height: 600px;" />
    <el-button @click="toCenter">调整中心点位置</el-button>
    <el-button @click="toZoom">调整缩放级别</el-button>
    <el-button @click="toRotation">调整地图方向</el-button>
    <el-button @click="reset">地图复位</el-button>
  </div>
</template>

<script>
// 可通过《vue项目集成并使用OpenLayers地图的两种方式》文中介绍的两种方式集成进来
export default {
  name: 'GotoMap',
  mounted() {
    initMap()
  },
  methods: {
    toCenter() {
      setCenter(120, 30)
    },
    toZoom() {
      setZoom(10)
    },
    toRotation() {
      setRotation(30)
    },
    reset() {
      resetMap()
    }
  }
}
</script>

<style>
.eguid-map {
  width: 800px;
  height: 600px;
  padding: 0;
  margin: 0;
}
</style>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42

测试效果演示

如果您觉得博主写得还不错，欢迎”关注、 点赞、收藏“一键三连