javascript的时间描述图怎么写

 在gis系统中往往需要在一个时间间隔内把图形动态播放出来，比如2000年到现在地震变化啊，海啸的变化，在flex中这种展现方式需要后台rest服务相结合，要建立有时间点的图层，arcgis发布要选timeinfo属性，如果我们不用后台，数据格式是json或者xml形式应该怎么做呢，在flex中还有帧动画这个东东，在javascript应该怎么写呢，因为这个表现形式要以数据做支持，而且要在一个地图底图上叠加不断展现，现有javascript动画库是用不上了，很多都是css动画和canvas（html5）的，但是可以用settime这个函数展示这种变化，比如说某某月到某某月热点图的变化。写了一个热点图时间描述。

/**
 * Created by haibalai on 2015/9/29.
 */
var HeatLayerAnimate = function()
{

    var heatLayerManager;

    var ajaxTool;

    var queryVo = new QueryVO();

    //设置时间间隔
    var timeinterval = 5000;

    var isStopFlag = false;

    this.init = function(heatLayerManager1)
    {
        heatLayerManager = heatLayerManager1;
        ajaxTool = new AjaxTool();

    }

    /**
     * 添加某个时间段的分色
     * @param queryVO
     * @param polygon
     */
    this.addAnimate = function(queryVO1,polygon)
    {
        queryVo = queryVO1;
        heatLayerManager.addRenderCallBack(queryVO1,polygon,ajaxquery);
    }



    function ajaxquery(param)
    {
        param.startDate = queryVo.startDate;
        param.endDate = queryVo.endDate;
        param.layerName= queryVo.layerName;
        param.tjfs = queryVo.tjfs;
        var str =   JSON.stringify(param);

        //--------------------------------------测试环境用
        ajaxTool.getTimeHeatData1(str,ajaxBack);
        //-------------------------------------


        //--------------------------------------真实环境用
        //ajaxTool.getTimeHeatData(str,ajaxBack);
        //-------------------------------------
    }

    var i = 0;
    var len = 0;
    var num1 = 0.01;
    var obj;

    function ajaxBack(obj1)
    {
        num1 = 0.01;
        len = obj1.dataarr.length;
        i = 0;
        obj = obj1;

        setRender(i);

    }

    function setRender(i)
    {
        if(i < len)
        {
            if(isStopFlag == false)
            {
                setTimeout(function()
                {
                    var codeobj = obj.dataarr[i];
                    renderplay(codeobj,i,setRender);
                },timeinterval);
            }

        }

    }

    function renderplay(codeobj,i,callback)
    {
        if(isStopFlag == false)
        {
            heatLayerManager.ajaxBackFun(codeobj,num1);
            // -----------------------------------num1 这一段是我测试用的
            num1 = num1 + 0.05;
            //--------------------------------------------------------
            i++;
            callback(i);
        }

    }

    /**
     * 停止动画
     */
    this.stopRender = function()
    {
        isStopFlag = true;
    }

    /**
     * 动画再生
     */
    this.resumeRender = function()
    {
        isStopFlag = false;
        setRender(i);
    }



}