使用实时数据更新热图

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的设置，但希望这给你一个更好的接地去从这里。