vue3:openlayer 加载 .pag动态图(overlay)

效果：

核心依赖：libpag

导入使用：import { PAGInit } from “libpag”;

核心代码：

       /**
     * 添加overLay
     * @param {*} objects 
     * itemObj:对象
     * itemObj.wkt:wkt字段
     * itemObj.id:id
     * element:元素
     * offset:偏移量
     * dataType:数据类型
     * xString:x坐标字段
     * yString:y坐标字段
     * positioning:定位方式
     */
    addOverLay(objects) {
        let {
            itemObj,
            element,
            offset = [0, 0],
            dataType = 'lonlat',
            xString = 'x',
            yString = 'y',
            positioning = 'center-center',
        } = objects || {}
        let feature = ''
        if (itemObj.wkt) {
            feature = this.typeDataChange({
                type: "wkt",
                wkt: itemObj['wkt'],
            })
        } else if (dataType == 'lonlat') {
            if (itemObj[xString] && itemObj[yString]) {
                feature = this.typeDataChange({
                    type: dataType,
                    xCoord: Number(itemObj[xString]),
                    yCoord: Number(itemObj[yString]),
                })
            }
        }
        if (feature) {
            let coord = feature.getGeometry().getCoordinates()
            let overlay = new Overlay({
                id: itemObj.id || 'overlay',
                element: element,
                position: coord,
                offset: offset,
                positioning: positioning,
                stopEvent: false
            })
            this.map.addOverlay(overlay)
        }
    }
    /**
     * 添加pag
     * @param {*} objects 
     * url:pag文件路径
     * id:pag元素id
     */
    addPag(objects) {
        let {
            url = '/pag/kuosan.pag',
            id = 'pag',
        } = objects || {}
        PAGInit({
            locateFile: (file) => {
                if (file.endsWith('.wasm')) {
                    // 指定 wasm 文件的路径
                    return `/libpag.wasm`  // 这里的路径是相对于 public 目录
                }
                return file
            }
        }).then((PAG) => {
            fetch(url)
                .then((response) => response.blob())
                .then(async (blob) => {
                    const file = new window.File(
                        [blob],
                        url.replace(/(.*\/)*([^.]+)/i, "$2")
                    );
                    const pagFile = await PAG.PAGFile.load(file);
                    this.pagInstance.push(pagFile)
                    document.getElementById(id).width = pagFile.width();
                    document.getElementById(id).height = pagFile.height();
                    const pagView = await PAG.PAGView.init(pagFile, "#" + id);
                    this.pagInstance.push(pagView)
                    pagView.setRepeatCount(0);
                    await pagView.play();
                });
        });
    }
    /**
     * 移除pag
     * @param {*} id 
     */
    removePag() {
        if (this.pagInstance.length > 0) {
            this.pagInstance.forEach((item, index) => {
                try {
                    item.destroy()
                } catch (error) {
                    console.error('PAG destruction failed:', error)
                }
            })
            this.pagInstance = []
        }
    }
    /**
     * 移除overLay
     * @param {*} id 
     */
    removeOverLayById(id) {
        let overlay = this.map.getOverlayById(id)
        if (overlay) {
            this.map.removeOverlay(overlay)
        }
    }
    /**
     * 移除所有overLay
     */
    removeAllOverLay() {
        let overlays = this.map.getOverlays()
        let locationOverlayIds = []
        if (overlays.array_.length) {
            overlays.array_.forEach(item => {
                locationOverlayIds.push(item.getId())
            })
        }
        if (locationOverlayIds.length) {
            locationOverlayIds.forEach(overlayId => {
                let overlay = this.map.getOverlayById(overlayId)
                this.map.removeOverlay(overlay)
            })
        }
    }

wasm文件放置位置：

使用代码：

// 添加overLay
function addOverLayWithArr() {
  let arr = [
    {
      wkt: "POINT(112.58221806728945 31.17018648559599)",
      id: "pag-yj",
      url:'/pag/浮标扩散-红.pag'
    },
    {
      wkt: "POINT(112.57221806728945 31.17018648559599)",
      id: "pag-ej",
      url:'/pag/浮标扩散-橙.pag'
    },
     {
      wkt: "POINT(112.56221806728945 31.17018648559599)",
      id: "pag-sj",
      url:'/pag/浮标扩散-橙.pag'
    },
    {
      wkt: "POINT(112.55221806728945 31.17018648559599)",
      id: "pag-wj",
      url:'/pag/浮标扩散-橙.pag'
    },
    {
      wkt: "POINT(112.54221806728945 31.17018648559599)",
      id: "pag-lj",
      url:'/pag/浮标扩散-橙.pag'
    },
  ];
  arr.forEach((item) => {
    let element = document.createElement("canvas");
    element.id = item.id;
    element.style.width = "100px";
    element.style.height = "100px";
    document.body.appendChild(element);
    let obj = {
      itemObj: item,
      element: element,
    };
    let obj2 = {
      url: item.url,
      id: item.id,
    };
    window.mapFun.addPag(obj2);
    window.mapFun.addOverLay(obj);
  });


  setTimeout(()=>{
    // window.mapFun.removeOverLayById('pag-yj')
    window.mapFun.removePag()
    // window.mapFun.removeOverLayById('pag-ej')
    window.mapFun.removeAllOverLay()
  },3000)
}

浏览器请求截图：加载一个pag会有两个文件的请求