首页 > 解决方案 > 使用 AJAX 在传单上重新加载热图

问题描述

我的热图在第二次调用 ajax 后没有重新加载时遇到问题!准确地说,我调用了服务器,它以与热图兼容的格式返回了我想要的数据!第一次调用就像一个魅力,但之后热图继续显示相同的数据!任何人都知道我做错了什么?这是我的js文件的代码片段!

    let mymap = L.map('mapid');
    let osmUrl='https://tile.openstreetmap.org/{z}/{x}/{y}.png';
    let osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
    let osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
    mymap.addLayer(osm);
    //sintetagmenes kai zoom
    mymap.setView([38.246242, 21.7350847], 12);
    $(document).ready(function () {
        $("#heatmap").submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "getlocations.php",
                dataType: 'JSON',
                data: {
                    datefilter: $("#datefilter").val()
                },
                success: function (data) {
                        drawheatmap(data[0]);
                        drawpiechart(data[1]);
                        drawdaytable(data[2]);
                        drawhourtable(data[3]);
                }

            })
        })
    })
    function drawheatmap(data) {
        let myArray = [];
        let cfg = {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            // if scaleRadius is false it will be the constant radius used in pixels
            "radius": 40,
            "maxOpacity": 0.8,
            // scales the radius based on map zoom
            "scaleRadius": false,
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries
            //   (there will always be a red spot with useLocalExtrema true)
            "useLocalExtrema": false,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
        };

        $.each(data, function (i, object) {
            myArray.push({"lat": object.lat, "lng": object.lng, "count": object.count})
        });
        var testData = {
            max: 12,
            data: myArray
        };

        let heatmapLayer = new HeatmapOverlay(cfg);

        mymap.addLayer(heatmapLayer);
        heatmapLayer.setData(testData);


    }

setData 函数应该根据文档重新绘制地图,但它不起作用!再次提前感谢大家!

标签: javascriptjqueryajaxleafletheatmap

解决方案


推荐阅读