OpenLayers 引入gif 动态图片（gifler）辅助实现

2022-09-16-17-40-18.gif

一、引入 gifler.js

在 public/index.html 里面引入( 注意：npm 引入的不是最新版，有些方法不能使用)

二、引入地图

import gifImag from '@/assets/img/map/1.gif'

import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Point from 'ol/geom/Point'
import { Tile as TileLayer, Vector as VectorLayer, Image as ImageLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
import { Icon, Style } from 'ol/style'

三、初始化地图

initMap (options = {}) {
      this.view = new View({
        projection: 'EPSG:4326',
        center: options.center || [113.625351, 34.746303], // 郑州
        zoom: options.zoom || 2
      })
      this.map = new Map({
        target: this.$refs.map,
        layers: [
          new TileLayer({
            title: '网格',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63'
            })
          }),

          new TileLayer({
            title: '数据',
            source: new XYZ({
              visible: true,
              wrapX: true,
              url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=地图key'
            })
          })
        ],
        view: this.view
      })

      this.addGif()
    },
 

四 添加gif 图片

 addGif () {
      const iconFeature = new Feature({
        geometry: new Point(this.options.center)
      })

      const vectorSource = new VectorSource({
        features: [iconFeature]
      })

      const vectorLayer = new VectorLayer({
        source: vectorSource
      })
      // 'https://openlayers.org/en/latest/examples/data/globe.gif'
      gifler(this.gifImag).frames(
        document.createElement('canvas'),
        (ctx, frame) => {
          if (!iconFeature.getStyle()) {
            iconFeature.setStyle(
              new Style({
                image: new 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)
          this.map.render()
        },
        true
      )
      this.map.addLayer(vectorLayer)
    }