js利用setInterval模拟轨迹播放

最新推荐文章于 2022-02-27 20:59:53 发布

weixin_33970449

最新推荐文章于 2022-02-27 20:59:53 发布

阅读量174

点赞数

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/u/351612/blog/728046

版权

2019独角兽企业重金招聘Python工程师标准>>>

场景：web端中隔几秒钟从服务器上获取最新的轨迹，在地图中一个一个点进行播放显示

轨迹格式

[{"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>

转载于:https://my.oschina.net/u/351612/blog/728046