当前位置：网站首页>Openlayers instance animated GIF GIF animation

Openlayers instance animated GIF GIF animation

2022-07-23 21:34:00 【Giser Xiaohui】

Animated GIF-GIF Animation

Knowledge points

（ The main ） Use GIF Animations are visualized as icons , It is officially recommended to use Gifler Library implementation .
（ secondary ）map.on(‘pointermove’, function (e) {}); You can change the course of the mouse gif Cursor style when icon , See the source code for details .

Official website original text and translation

Example of using an animated GIF as an icon. Animation is achieved using the Gifler library.
Use GIF Animation as an example of icons . Animation is using Gifler Library implementation of .

Source code

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

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

<body>
  <!-- html Code  -->
  <div id="map" class="map"></div>
  <!-- script Code  -->
  <script>
    //  Define a point 
    const iconFeature = new ol.Feature({
    
      geometry: new ol.geom.Point([0, 0]),
    });
    //  Define a vector resource for a point 
    const vectorSource = new ol.source.Vector({
    
      features: [iconFeature],
    });
    //  Define a vector layer for a point 
    const vectorLayer = new ol.layer.Vector({
    
      source: vectorSource,
    });
    //  Define raster layers 
    const rasterLayer = new ol.layer.Tile({
    
      source: new ol.source.Stamen({
    
        layer: 'toner',
      }),
    });
    //  Initialize map 
    const map = new ol.Map({
    
      //  Add raster layer 、 Add a vector layer of points to the map 
      layers: [rasterLayer, vectorLayer],
      //  Bind page elements 
      target: document.getElementById('map'),
      //  Set up the view 
      view: new ol.View({
    
        center: [0, 0],
        zoom: 2,
      }),
    });

    // gif Dynamic graph url Link to 
    const gifUrl = 'https://openlayers.org/en/latest/examples/data/globe.gif';
    //  Use Gifler Convert links to gif picture 
    const gif = gifler(gifUrl);
    // gif Press to refresh the picture 
    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
    );

    //  Change the mouse over gif The cursor style of icon is 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>