0

GPS 経由で約 100 台の車両のリアルタイム位置を追跡するコードを作成しようとしています。最後の X/Y ポイントと現在のポイントの間の補間パスに沿って位置を設定することで、各車両の Google マップ マーカーをスムーズに「アニメーション化」したいと考えています。この URL を呼び出して、setInterval 呼び出しを介して 15 秒ごとに現在のすべての車両位置を含む JSON オブジェクトを取得します。その中で、JSON オブジェクトの各車両を繰り返し処理し、車両の位置を設定します。モーションをアニメーション化する関数がありますが、1 台の車両に対してのみ確実に機能します。ネストされた setInterval 関数は、それが含まれている for ループの次のステップの前に完了しないためだと思います。内部の setInterval 関数を完了まで実行する方法はありますかfor ループの次の「i」の前に?

setInterval(function() {
   $(document).ready(function() {
      $.getJSON("http://localhost:8080/portal/frfeed/query/tampa_sw/paraVehicle?r=" + Math.random(),function(vehicles){
          $.each(vehicles, function(index, d){ 

             if(d.heading>=0 && d.heading<22.5) direction="NORTH";
             else if(d.heading>=22.5 && d.heading<67.5) direction="NORTHEAST";
             else if(d.heading>=67.5 && d.heading<112.5) direction="EAST";
             else if(d.heading>=112.5 && d.heading<157.5) direction="SOUTHEAST";
             else if(d.heading>=157.5 && d.heading<202.5) direction="SOUTH";
             else if(d.heading>=202.5 && d.heading<247.5) direction="SOUTHWEST";
             else if(d.heading>=247.5 && d.heading<292.5) direction="WEST";
             else if(d.heading>=292.5 && d.heading<338) direction="NORTHWEST";
             else direction="NORTH";
             vehicle = "";

              for (var i=0; i<vMarkers.length; i++) {
                  if( vMarkers[i][0] === d.internalVehicleId ) {
                      var path; 
                      var latlng = new google.maps.LatLng(d.latitude,d.longitude);
                      vMarkers[i][2] = vMarkers[i][1].getPosition().lat();
                      vMarkers[i][3] = vMarkers[i][1].getPosition().lng();
                      vMarkers[i][4] = latlng;
                      vMarkers[i][1].setTitle('Vehicle: ' + d.internalVehicleId + '\r\n' + 'Last Update: ' + d.time + '\r\n' + 'Traveling: ' + direction + ' @ ' + d.speed + ' mph');
                      path = vPolys[i][1].getPath();
                      path.push(latlng);
                      vPolys[i][1].setPath(path);
                      vehicle = vMarkers[i][0];

                      var lat = vMarkers[i][2];
                      var lng = vMarkers[i][3];
                      var latlngTo = vMarkers[i][4];
                      var latLngFrom = new google.maps.LatLng(lat,lng);                            
                      j = 0;
// function below only works correctly if filtered for one vehicle as below, otherwise, all
// markers randomly move and don't stop due to the setInterval being called inside the for loop

                      if (distance(latlngTo.lat(), latlngTo.lng(),latLngFrom.lat(), latLngFrom.lng()) > 20 && vMarkers[i][0] == "1329") {
                           iv = window.setInterval(function() { 
                               j++;
                               var pos = mercatorInterpolate(map, latLngFrom, latlngTo, j/50);
                               vMarkers[i][1].setPosition(pos);
                               if (j >= 50) {
                                    window.clearInterval(iv);
                                        }
                                    }, 20);
                                }
                                else {
                                    vMarkers[i][1].setPosition(latlngTo);
                                };

                                break;
                            }
                        }
                        if( vehicle == "") {
                            color = get_random_color();
                            marker = new StyledMarker({
                                styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:color, fore: "ffffff",text: d.internalVehicleId}),
                                position: new google.maps.LatLng(d.latitude,d.longitude),
                                title:    'Vehicle: ' + d.internalVehicleId + '\r\n' + 'Last Update: ' + d.time + '\r\n' + 'Traveling: ' + direction + ' @ ' + d.speed + ' mph',
                                map: map
                            });
                            var polyOptions = {
                                strokeColor: color,
                                strokeOpacity: 1.0,
                                map: map,
                                strokeWeight: 3
                            };                                
                            poly = new google.maps.Polyline(polyOptions);
                            var latlng = new google.maps.LatLng(d.latitude,d.longitude);
                            vMarkers.push([d.internalVehicleId, marker, d.latitude, d.longitude, latlng]);
                            var path = poly.getPath();
                            path.push(latlng);
                            poly.setPath(path);
                            vPolys.push([d.internalVehicleId, poly])
                            vehicle = "";
                        }
                    });//$.each(vehicles, function(index, d){

                    function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
                        // Get projected points
                        var projection = map.getProjection();
                        var pointFrom = projection.fromLatLngToPoint(latLngFrom);
                        var pointTo = projection.fromLatLngToPoint(latLngTo);
                        // Adjust for lines that cross the 180 meridian
                        if (Math.abs(pointTo.x - pointFrom.x) > 128) {
                            if (pointTo.x > pointFrom.x)
                                pointTo.x -= 256;
                            else
                                pointTo.x += 256;
                        }
                        // Calculate point between
                        var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
                        var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
                        var pointBetween = new google.maps.Point(x, y);
                        // Project back to lat/lng
                        var latLngBetween = projection.fromPointToLatLng(pointBetween);
                        return latLngBetween;
                    }

                    function distance(lat1,lon1,lat2,lon2) {
                        var R = 6371;
                        var dLat = (lat2-lat1) * Math.PI / 180;
                        var dLon = (lon2-lon1) * Math.PI / 180; 
                        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                            Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
                            Math.sin(dLon/2) * Math.sin(dLon/2); 
                        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
                        var d = R * c;
                        return Math.abs(d*1000);
                    }
                }); //$.getJSON(...., function(vehicles) {
            }); //$(document).ready(function() {
        }, 16000); // setInterval(function(){
4

2 に答える 2

0

複数の を実行しようとする代わりに、setInterval()1 つだけを実行し、その 1 つの関数呼び出し内ですべての車両を反復処理します。

例えば：

iv = setInterval(function() {
  for (int i=0; i<vehicleArray.length;i++) {
     // Do stuff for each vehicle.
  }
}, 40);

setInterval()それが呼び出される頻度を保証するものではなく、最小間隔だけであることに注意してください。これは、無計画な追跡につながる可能性があります。関数に入るたびに時計を読み取り、setInterval()それに基づいて新しい位置を計算することで、これを回避します。

あなたのコードは毎秒 50 フレームを達成しようとしていますが、これは楽観的であることがわかります。その半分で滑らかな効果が得られます。つまり、40ms 間隔です。

于 2013-10-29T17:47:13.827 に答える