js利用setInterval模擬軌跡播放

時間 2019-11-11

標籤利用 setinterval 模擬軌跡播放欄目 JavaScript 简体版

原文原文鏈接

場景：web端中隔幾秒鐘從服務器上獲取最新的軌跡，在地圖中一個一個點進行播放顯示javascript

軌跡格式html

[{"time":"1470269966000","x":113.25236102,"y":23.13307908},{"time":"1470270005000","x":113.25239643,"y":23.13394018},{"time":"1470270015000","x":113.25257455,"y":23.13369565},{"time":"1470270025000","x":113.25275238,"y":23.13359635},{"time":"1470270035000","x":113.25290004,"y":23.13360796}]

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>
  <style>
    </style>
    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script type="text/javascript"
            src="http://localhost:63342/demo/arcgis_js_v316_api/arcgis_js_api/library/3.16/3.16/init.js"></script>
    <script>
        require([
            "dojo/domReady!"
        ], function () {
            var points = null;
            var i=0;
            //播放軌跡，兩秒鐘1個點
            var playGpsPath = function(){
                var k1 = setInterval(function() {
                    if (points != null&&i<points.length) {
                        console.info(points[i]);
                        i++;
                    }
                },2000);
                return k1;
            };
            //從服務器讀取軌跡
            var getRealtimePoint = function(key){
                var k2 = setInterval(function(){
                    var deferredResult = dojo.xhrPost({
                        url: "gps.json",//存儲的gps點文件
                        timeout: 3000, 
                        handleAs: "json" 
                    });
                
                    deferredResult.then(function(response){
                        if(response!=null){
                           if(points==null){
                              points = response;
                           }else{
                              points = points.concat(response);//增量存儲到points
                           }
                        }
                        return response; 
                    });
                },1000);
                return k2;
            }
            
            playGpsPath();
            getRealtimePoint();
        });

    </script>
</head>
<body class="claro">
<div class="outerbar">

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。