2017-04-26 2 views
1

私はESRI ArcGIS javascript APIを使用してライブトレース機能を実装しようとしています。データベースから取得したlatに基づいてマーカーを移動することができません。明確なアイデアを得るために、これはGoogleマップをこの目的に使用している既存のコードです。どのようにESRI arcGIS javascript APIを使用して同じを達成するには?ESRIライブトラッキング用javascript API

<script type="text/javascript"> 

var marker, map, ct=0, geocoder ; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(<?php echo $lat; ?>, <?php echo $lng; ?>); 
    var mapOptions = { 
     zoom: 14, 
     maxZoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('main-map'), mapOptions); 
    geocoder = new google.maps.Geocoder(); 


    var image = new google.maps.MarkerImage(
      'assets/images/marker-images/image.png', 
      new google.maps.Size(20,21), 
      new google.maps.Point(0,0), 
      new google.maps.Point(10,21) 
     ); 


    marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     icon: image,  
     title: 'I might be here' 
    }); 

    } 


    /////////////////////////////////////////////////// 

    $(function() { 
    initialize(); 
    live(); 
    setInterval(live , 10000); 
    }); 

    function live() {  
     var duration = 10000; 

     $.ajax({ 

      type: "GET", 
      url: "otravels_ajax/getlivedata.php?vid=<?php echo $imei; ?>", 
      dataType: 'xml', 
      async:false, 
      success: function(xml) { 
       $(xml).find("marker").each(function(){ 

       var id = $(this).find('id').text(); lid=id; //alert(lid); 
       var lat = $(this).find('lat').text(); 
       var lng = $(this).find('lng').text(); 
       var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));//console.log(point); 

       var ts = $(this).find('ts').text();//alert(ts); 
       var speed = $(this).find('speed').text(); 
       var status = $(this).find('status').text(); 
       if(status=='A') status="<span class='label label-success '>Active</span>"; else status="<span class='label label-important '>InActive</span>"; 
       var loc_addr = $(this).find('loc').text(); 
       var img=$(this).find('img').text(); 

       var image = new google.maps.MarkerImage(
        img, 
        new google.maps.Size(46,42), 
        new google.maps.Point(0,0), 
        new google.maps.Point(23,42) 
       ); 
       marker.setIcon(image); 
       marker.animateTo(point, {easing: 'linear', duration: duration}); 

       if(!map.getBounds().contains(point)) 
       map.panTo(point); 

       // $('#live_data').html("<tr><td>"+ts+"</td><td>"+speed+"KM/HR</td><td>"+status+"</td><td id=\"loc\">"+loc_addr+"</td></tr>"); 

       $("#d_time").html(ts); 
       $("#d_speed").html(speed+"KM/HR"); 
       $("#d_status").html(status); 



       geocoder.geocode({ 
       "latLng":point 
       }, function (results, status) {   // alert("fgb"); 
        if (status == google.maps.GeocoderStatus.OK) { 
         var placeName = results[1].formatted_address; //alert(placeName); 
         $("#loc").html(placeName); 
        } 
       });  


      }); 
     } 
     }); 

    } 


</script> 
+1

ヒント:適切なESRIのArcGIS JavaScript APIのメソッド –

答えて

1

APIドキュメントを追跡するための2個のサンプルが含まれています。追跡現在の場所に

https://developers.arcgis.com/javascript/latest/sample-code/widgets-track-basic/index.html

ロケーションのセットから追跡をシミュレートするには:https://developers.arcgis.com/javascript/latest/sample-code/widgets-track/index.html

+0

あなたの言ったリソースは、ライブトラックを達成するのに非常に役立ちました。私はマーカが動いている間滑らかなアニメーション効果を加えることによってそれを改善するために探しています。 – Rajarishi

0

これを達成するための簡単な方法があります。

質問に記載されているように、あなたのデータベースのどこかに既にlat/longという値が設定されています。

注: - ArGISマップとGoogleマップでGISデータを処理する方法は全く異なります。マップ上の位置を表示するために、通常はArcGIS JS APIでグラフィックスレイヤー(推奨)を使用しています。以下は

作成し、ライブ追跡機能

  • ためgraphics layerがデータベースからcurrent/live locationをゲットロードESRI Map
  • を作成this-

    1. を達成するための手順です。
    2. データベースからライブロケーションを取得したら、以前のライブトラッキング機能をクリアし、新しく見つかった場所に新しいロケーションを追加します。
    3. 更新間隔ごとに、以前のデータ/ポイントをマップから消去し、新しいポイントを追加する必要があります。

    あなたは、ArcGIS/ESRIツールを使用して機能のmove Edit operationを使用することができますが、それはあまりにも複雑になるので、機能を削除して追加することをお勧めします。ヒントの上に望ん

    がお手伝いします:)

  • +0

    はい]を使用するようにコードを書き換えます!私はこの手続きを試みたが、それは効果的であることが判明した。提案ありがとう。それは簡単で簡単です。 – Rajarishi

    関連する問題