二章-12-地图旋转

作者: 彩云飘过 | 来源:发表于2020-04-20 17:50 被阅读0次

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1012.html ，对应的官网示例

image.png

<!DOCTYPE html>
<html>

<head>
  <title>地图旋转
  </title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css">
  <script src="../include/ol.js"></script>

</head>
<style>

</style>

<body>
  <div id="map" class="map"></div>

  <script>

    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      target: 'map',
      view: new ol.View({
        center: [14200000, 4130000],
        rotation: Math.PI / 6, // 旋转角度30度
        zoom: 10
      })
    });

    //为更好显示效果，延迟2.5秒
    function sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    }

    
    sleep(2500).then(() => {
      map.getView().setRotation(Math.PI)
    })

   
  </script>
</body>

</html>