使用實時數據更新熱圖

Question

我正在使用websockets將數據從服務器發送到客戶端。這可以正常工作，例如我可以顯示服務器收到時發送給客戶端的消息。 我可以將其轉換爲經度和緯度。

因此，從服務器接收數據時，它應該在我的html中繪製到地圖上，但它似乎並未繪製任何圖形。

我完全不熟悉javascript，所以不確定我的代碼是否正確。我最想做的就是很快收到數據，它會直接繪製到地圖上，從而生成熱圖。這是代碼的JavaScript端：

<script> 
    $(document).ready(function() { 
     var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws"); 
     var London = new google.maps.LatLng(51.507335, -0.127683); 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: London, 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var pointArray = new google.map.MVCArray([]);   
    ws.onmessage = function(evt){ 
      //$("#display").append(evt.data + "<br />"); 

      var msg = JSON.parse(evt.data); 
      var coordinates = msg.coordinates.coordinates; 
      var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]); 
      console.log('received'); 
      pointArray.push(latLng); 
      var heatmap = new google.maps.visualization.HeatmapLayer({ 
       data: pointArray 
      }); 
      heatmap.setMap(map); 

      //$("#display").append(latLng + "<br />"); 

      //console.log(evt.data); 

    }; 

    ws.onclose = function(evt) {alert("Server connection terminated");}; 
    });  
    $("#open").click(function(evt){ 
    evt.preventDefault(); 
    $.post("/", $("#eventForm").serialize()); 

}); 

</script> 

會不會有一種方法，使數據被接收它存儲到一個數組，但後來我不知道怎麼那麼我可以將元素在更新地圖數組已經收到。 感謝

Answer 1

我不能肯定地說，如果這是唯一的問題，但你似乎這裏有一個作用域的問題 -

ws.onmessage = function (evt) { 
    var msg = JSON.parse(evt.data); 
    var coordinates = msg.coordinates.coordinates; 
    var latLng = new google.maps.LatLng(coordinates[1], coordinates[0]); 
}; 
... 
var heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: latLng 
}); 

範圍在JavaScript的工作方式是，的latLng只適用於代碼在它聲明的函數內。一個簡單的方法來解決，這將是剛剛宣佈它在它們共享的範圍 -

var latLng; 
ws.onmessage = function (evt) { 
    var msg = JSON.parse(evt.data); 
    var coordinates = msg.coordinates.coordinates; 
    latLng = new google.maps.LatLng(coordinates[1], coordinates[0]); 
}; 
... 
var heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: latLng 
}); 

這將使在點擊功能代碼的其他部分的latLng訪問。

其他一些可能的問題：

如果要逐步數據添加到地圖，你的結構是一般的有點過。你想要做的是創建一個位於網頁內部的單個地圖，然後不斷地向它添加數據 - 不需要每次都創建一個新地圖。你可能應該做的是在ready函數中創建地圖，而不是點擊。

此外，谷歌地圖中有一個單獨的熱圖圖層;如果您爲接收到的每一位數據創建新的熱點圖，那麼您將覆蓋已放入之前熱點圖的所有內容。鑑於你最近的編輯，它看​​起來像你已經達到了相同的結論。

我也不太清楚你的websocket代碼是否和它需要的一樣好。 websocket「onmessage」函數不會立即返回結果：相反，它提供了關於如何處理將來任何時候進入的任何數據的說明。因此，如果您想在每次數據進入時更新地圖，則無需在點擊事件上對websockets執行任何操作。

這將導致代碼的結構鬆散這樣的 -

$(document).ready(function() { 
    var ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws"); 
    var London = new google.maps.LatLng(51.507335, -0.127683); 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: London, 
     zoom: 3, 
     mapTypeId: google.maps.MapTypeId.SATELLITE 
    }); 

    var pointArray = new google.map.MVCArray([]); 
    ws.onmessage = function (evt) { 
     var msg = JSON.parse(evt.data); 
     var coordinates = msg.coordinates.coordinates; 
     pointArray.push(new google.maps.LatLng(coordinates[1], coordinates[0])); 
     var heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray 
     }); 
     heatmap.setMap(map); 
    }; 

    $("#open").click(function (evt) { 
     // whatever code you want click to do 
    }); 
}); 

我無法測試此代碼的任何，因爲我沒有特定的WebSocket的設置，但希望這給你一個更好的接地去從這裏。