javascript - 使用实时数据更新热图

Question

我正在使用 websockets 将数据从服务器发送到客户端。这工作正常，所以例如我可以显示服务器在收到消息时发送给客户端的消息。我能够将其转换为经度和纬度。

因此，当从服务器接收到数据时，它应该在我的 html 中绘制到 map 上，但它似乎根本没有绘制任何东西。

我是 javascript 的新手，所以不确定我的代码是否正确。理想情况下，我想做的是很快收到数据，将其直接绘制到 map 上，从而生成热图。这是代码的 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>

有没有一种方法可以在接收到数据时将其存储到数组中，但是我不确定如何使用接收到的数组中的元素更新 map 。谢谢

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 可供点击函数中代码的其他部分访问。

其他一些可能的问题:

如果您想逐步向 map 添加数据，您的结构通常会有点偏差。您想要做的是在网页内创建一个 map ，然后不断向其中添加数据 - 无需每次都创建新 map 。您可能应该做的是在就绪函数内创建 map ，而不是点击。

此外，谷歌地图中只有一个热图图层；如果您为接收到的每一位数据创建新的热图，您将覆盖您之前放入热图中的所有内容。鉴于您最近的编辑，看起来您已经得出了相同的结论。

我也不太确定您的 websocket 代码是否足够好。 websocket“onmessage”函数不会立即返回结果:相反，它会提供有关如何处理 future 任何时候传入的任何数据的说明。所以，如果你想在每次数据进来时更新 map ，你不需要在点击事件上用 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 设置，但希望这能为您提供更好的基础。