arcgis js 4.8 时序演变动画

jacobzhuo

于 2019-02-26 10:05:50 发布

阅读量846

点赞数

CC 4.0 BY-SA版权

分类专栏： Arcgis server js api

本文链接：https://blog.youkuaiyun.com/jacobzhuo/article/details/87929672

Arcgis server js api 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用ArcGIS JavaScript API 4.8结合Bootstrap slider，实现地图图层的时序演变动画效果，通过控制时间间隔动态展示地图变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

通过Bootstrap slider，控制图层显示/关闭时间间隔。

// 循环播放函数
    let timer;
    function play(){
        //获取slider当前值，从当前开始播放
        let curVal=$("#ex11").slider('getValue');
        // 改变slider value
        let newValue=curVal+1;
        if (newValue<=5){
            $("#ex11").slider('setValue',newValue);
        }
        else
        {
            $("#ex11").slider('setValue',1);
        }
    }
    // 计时器开始
    $('#playSequence').click(()=>{
        //图层动画
        timer=setInterval(play,1000);
    });
    //计时器停止
    $('#stop').click(()=>{
        clearInterval(timer);
    })

//响应slider变化
    $("#ex11").on('change',function(slideEvt){
        //从slider的tooltip找到对应图层ID
        let oldLayerID=CSJS_Matchup(slideEvt.value.oldValue);
        let newLayerID=CSJS_Matchup(slideEvt.value.newValue);
        
        //切换新老图层显示
        let sublayer=CSJSLayers.findSublayerById(oldLayerID);
        sublayer.visible = !sublayer.visible;
        let sublayer2=CSJSLayers.findSublayerById(newLayerID);
        sublayer2.visible = !sublayer2.visible;
    });