Openlayers案例4——地图单击缩放平移复位

最新推荐文章于 2024-08-21 16:21:04 发布

最强大佬

最新推荐文章于 2024-08-21 16:21:04 发布

阅读量1.1k

点赞数

分类专栏： WebGIS 文章标签： arcgis

本文链接：https://blog.csdn.net/peanut2/article/details/113359433

版权

WebGIS 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

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>