Mapbox添加gif贴图

最近看了下Mapbox，的确是很强大的地图框架。
研究了下如何在Mapbox上添加gif贴图，代码记录一下

var MapUtil = {}
    MapUtil.w = 1000 //图片宽度像素
    MapUtil.h = 721 //图片高度像素
    MapUtil.maxX = 10 //经纬度范围
    MapUtil.maxY = 10 //经纬度范围
    MapUtil.x = MapUtil.maxX
    MapUtil.y = MapUtil.x * MapUtil.h / MapUtil.w
    if (MapUtil.w > MapUtil.h) {
        MapUtil.x = MapUtil.maxX
        MapUtil.y = MapUtil.x * MapUtil.h / MapUtil.w
    } else {
        MapUtil.y = MapUtil.maxY
        MapUtil.x = MapUtil.y * MapUtil.w / MapUtil.h
    }
    MapUtil.p1 = [-MapUtil.x, MapUtil.y]
    MapUtil.p2 = [MapUtil.x, MapUtil.y]
    MapUtil.p3 = [MapUtil.x, -MapUtil.y]
    MapUtil.p4 = [-MapUtil.x, -MapUtil.y]
    MapUtil.pc = [0, 0]
    MapUtil.changePx2coordinates = function(x, y) {
        var px = x / MapUtil.w
        var py = y / MapUtil.h
        var lng = Math.abs(MapUtil.p1[0]) * 2 * px - Math.abs(MapUtil.p1[0])
        var lat = Math.abs(MapUtil.p1[1]) - Math.abs(MapUtil.p1[1]) * 2 * py
        return [lng, lat]
    }

    MapUtil.changeXYWH2coordinates = function(x, y, w, h) {
        var px = x / MapUtil.w
        var py = y / MapUtil.h
        var lng = Math.abs(MapUtil.p1[0]) * 2 * px - Math.abs(MapUtil.p1[0])
        var lat = Math.abs(MapUtil.p1[1]) - Math.abs(MapUtil.p1[1]) * 2 * py
        var dw = (w / MapUtil.w) * 2 * Math.abs(MapUtil.p1[0])
        var dh = (h / MapUtil.h) * 2 * Math.abs(MapUtil.p1[1])
        var p1 = [lng - dw / 2, lat + dh / 2]
        var p2 = [lng + dw / 2, lat + dh / 2]
        var p3 = [lng + dw / 2, lat - dh / 2]
        var p4 = [lng - dw / 2, lat - dh / 2]
        var ret = [p1, p2, p3, p4]
        return ret
    }
    MapUtil.drawGif = function(src, w, h, draw_callback) {
        let gif_image = new Image(w, h)
        gif_image.setAttribute('rel:animated_src', src);
        let sup = new SuperGif({
            gif: gif_image,
            change: draw_callback
        });
        sup.load();
    }
    MapUtil.addGif = function(options) {
        var map = options.map
        var domId = options.domId
        var url = options.url
        var x = options.x
        var y = options.y
        var w = options.w
        var h = options.h
        var minzoom = options.minzoom
        var maxzoom = options.maxzoom
        var dom = document.getElementById(domId)
        if (!dom) {
            dom = document.createElement('canvas');
            dom.setAttribute('id', domId);
            dom.setAttribute('width', w);
            dom.setAttribute('height', h);
            document.body.appendChild(dom);
        }
        //map loaded
        var source = map.getSource('source_' + domId)
        if (!source) {
            source = map.addSource('source_' + domId, {
                type: 'canvas',
                canvas: domId,
                coordinates: MapUtil.changeXYWH2coordinates(x, y, w, h),
                animate: true
            })
        }
        map.addLayer({
            id: 'layer_' + domId,
            type: 'raster',
            source: 'source_' + domId,
            minzoom: minzoom,
            maxzoom: maxzoom
        });
        //开始绘制
        MapUtil.drawGif(url, w, h, function(tmpCanvas) {
            var dom = document.getElementById(domId)
            if (dom) {
                var dom = document.getElementById(domId)
                var canvas_ctx = dom.getContext('2d');
                canvas_ctx.drawImage(tmpCanvas, 0, 0, w, h);
            }
        })
    }

然后在地图load之后的事件回调中:

      MapUtil.addGif({
            map: map,
            domId: 'gif_1222',
            url: '2.gif',
            x: 500,
            y: 300,
            w: 100,
            h: 100,
            minzoom: 6,
            maxzoom: 8
        })

本例中的地图是以一张基本图片为底的，并不是地球地图。