当前位置：网站首页>OpenLayers实例-Animated GIF-GIF动画

OpenLayers实例-Animated GIF-GIF动画

2022-07-23 20:04:00 【GISer小辉】

Animated GIF-GIF动画

知识要点

（主要）使用GIF动画作为图标进行可视化，官方推荐借助Gifler库实现。
（次要）map.on(‘pointermove’, function (e) {});可以改变鼠标经过gif图标时的光标样式，详见源码。

官网原文及译文

Example of using an animated GIF as an icon. Animation is achieved using the Gifler library.
使用GIF动画作为图标的例子。动画是使用Gifler库实现的。

源码

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

<head>
  <meta charset="UTF-8">
  <!-- 引入OpenLayers CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/css/ol.css"
    type="text/css">
  <!-- 引入OpenLayers JS库 -->
  <script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/build/ol.js"></script>
  <!-- 引入Gifler JS库 -->
  <script src="https://unpkg.com/[email protected]/gifler.min.js"></script>
  <!-- css代码 -->
  <style>
    .map {
    
      width: 100%;
      height: 400px;
    }
  </style>
  <title>Animated GIF GIF动画</title>
</head>

<body>
  <!-- html代码 -->
  <div id="map" class="map"></div>
  <!-- script代码 -->
  <script>
    // 定义一个点
    const iconFeature = new ol.Feature({
    
      geometry: new ol.geom.Point([0, 0]),
    });
    // 定义一个点的矢量资源
    const vectorSource = new ol.source.Vector({
    
      features: [iconFeature],
    });
    // 定义一个点的矢量图层
    const vectorLayer = new ol.layer.Vector({
    
      source: vectorSource,
    });
    // 定义光栅图层
    const rasterLayer = new ol.layer.Tile({
    
      source: new ol.source.Stamen({
    
        layer: 'toner',
      }),
    });
    // 初始化地图
    const map = new ol.Map({
    
      // 将光栅图层、一个点的矢量图层添加到地图中
      layers: [rasterLayer, vectorLayer],
      // 绑定页面元素
      target: document.getElementById('map'),
      // 设置视图
      view: new ol.View({
    
        center: [0, 0],
        zoom: 2,
      }),
    });

    // gif动图的url的链接
    const gifUrl = 'https://openlayers.org/en/latest/examples/data/globe.gif';
    // 使用Gifler将链接转化为gif图片
    const gif = gifler(gifUrl);
    // gif图片按刷新
    gif.frames(
      document.createElement('canvas'),
      function (ctx, frame) {
    
        if (!iconFeature.getStyle()) {
    
          iconFeature.setStyle(
            new ol.style.Style({
    
              image: new ol.style.Icon({
    
                img: ctx.canvas,
                imgSize: [frame.width, frame.height],
                opacity: 0.8,
              }),
            })
          );
        }
        ctx.clearRect(0, 0, frame.width, frame.height);
        ctx.drawImage(frame.buffer, frame.x, frame.y);
        map.render();
      },
      true
    );

    // 改变鼠标经过gif图标时的光标样式为pointer
    map.on('pointermove', function (e) {
    
      const pixel = map.getEventPixel(e.originalEvent);
      const hit = map.hasFeatureAtPixel(pixel);
      map.getTarget().style.cursor = hit ? 'pointer' : '';
    });
  </script>
</body>

</html>