Openlayers案例4——地图单击缩放平移复位_iclient.supermap for openlayers 设置复位

作者：花生_TL007 | 2024-02-18 19:15:19

踩

iclient.supermap for openlayers 设置复位

1. 代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图单击缩放平移复位</title>
  <link rel="stylesheet" href="openlayers/css/ol.css">
  <script src="openlayers/build/ol.js"></script>
</head>

<body>
  <div id="map">
    <button id="zoom-out">缩小</button>
    <button id="zoom-in">放大</button>
    <button id="panto">平移到武汉</button>
    <button id="restore">复位</button>
  </div>

  <script>
    // 1.定义变量pos并赋值
    var pos = ol.proj.fromLonLat([116.26, 39.50]);  // 把经纬度信息转化为3857坐标

    // 2.创建map类，里面包含target、layers及view类
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM({
            wrapX: false, // 默认为true，地图水平复制，填满整个div
          }),
          preload: Infinity, // 地图预加载，增加用户体验
        })
      ],
      view: new ol.View({
        center: pos,  // 只能使用3857坐标
        zoom: 8,
        minZoom: 6,  // 最小级别
        maxZoom: 12, // 最大级别
        rotation: Math.PI / 6, // 旋转，注意r小写
      })
    });

    // 3.获取地图初始视图参数，为以后地图复位做准备
    var view = map.getView(); // 获取view地图视图
    var zoom = view.getZoom(); // 获取zoom
    var center = view.getCenter(); // 获取center
    var rotation = view.getRotation(); // 获取旋转角度

    // 3.地图缩小按钮
    var zoomOut = document.querySelector('#zoom-out');
    zoomOut.addEventListener('click', function () {
      var view = map.getView(); // 获取view
      var zoom = view.getZoom(); // 获取zoom
      view.setZoom(zoom - 1); // 修改zoom
    });

    // 4.地图放大按钮
    var zoomIn = document.querySelector('#zoom-in');
    zoomIn.addEventListener('click', function () {
      var view = map.getView(); // 获取view
      var zoom = view.getZoom(); // 获取zoom
      view.setZoom(zoom + 1); // 修改zoom
    });

    // 5.地图平移按钮 
    var panto = document.querySelector('#panto');
    panto.addEventListener('click', function () {
      var view = map.getView(); // 获取view地图视图
      var wuhan = ol.proj.fromLonLat([114.31, 30.51]); // 把经纬度转为3857坐标
      view.setCenter(wuhan); // setCenter平移地图
    });

    // 6.地图旋转复位
    var restore = document.querySelector('#restore');
    restore.addEventListener('click', function () {
      view.setCenter(center); // 复位中心位
      view.setZoom(zoom); // 复位zoom级别
      view.setRotation(rotation); // 复位旋转角度
    })
  </script>
</body>

</html>
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

2. 效果图

在这里插入图片描述

参考：郭明强, 黄颖. WebGIS之OpenLayers全面解析第2版, 电子工业出版社.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/109987