三章-26-图层扫过效果

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

三章-26-图层扫过效果
图层蒙版&通道
Core Animation 第六章专用图层（上）
Core Animation 第六章专用图层（下）
Core Animation 第五章变换
PS: 图层样式对文字的实际应用
认识Ps图层
5.8.8 实战：将效果创建为图层
PS:用图层样式做特效
IOS核心动画高级四：视觉效果

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

源码见 1026.html ，对应的官网示例 https://openlayers.org/en/latest/apidoc/module-ol_render_Event-RenderEvent.html#context

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>

<body>
  <input id="swipe" type="range" style="width: 100%">
  <div id="map" class="map"></div>

  <script>
    var osm = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    
    
    var bing = new ol.layer.Tile({
      source: 
      //new ol.source.BingMaps({
       // key: "As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5",
       // imagerySet: "Aerial"
     // })
      new ol.source.TileJSON({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
        crossOrigin: ''
      })
    });

    var map = new ol.Map({
      layers: [osm, bing],
      target: "map",
      view: new ol.View({
        center: [0, 0],
        zoom: 2
      })
    });

    var swipe = document.getElementById("swipe");

    bing.on("precompose", function (event) {
      var ctx = event.context;
      var width = ctx.canvas.width * (swipe.value / 100);

      ctx.save();
      ctx.beginPath();
      ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
      ctx.clip();
    });

    bing.on("postcompose", function (event) {
      var ctx = event.context;
      ctx.restore();
    });

    swipe.addEventListener(
      "input",
      function () {
        map.render();
      },
      false
    );

  </script>
</body>

</html>