Question

我目前正在开发一个Web应用程序，我正在尝试使用名为Leaflet.heat的库来显示热图。它与Leaflet Javascript库一起使用，可以创建一个看起来非常好的叠加热图。我觉得我几乎就在那里，但是在阵列格式方面有一点麻烦，无法弄清楚出了什么问题。让我分享一下我现在的代码。

    var mymap;
    var marker = [];
    var heatMapArr = [];
    window.onload = function() {
          alert("in initial func");
          uponPageLoadDefault();

        };
    function uponPageLoadDefault()
    {
        //initial default page load
        var branches = new L.LayerGroup();
        var items = JSON.parse('${branches}');
         var j = 0;
        for(var i = 0; i < items.length; i++)
        {


           var LamMarker = new L.marker([items[i].lat, items[i].lon]);

           //GOT RID OF FUNCTION CALL.  
           var heatMapPoint = {
           lat: items[i].lat,
           lon: items[i].lon,
           intensity: items[i].tranCount
   };
          heatMapArr.push(heatMapPoint);


           LamMarker.bindPopup("<b>" + items[i].branchName + "</b><br>" + items[i].branchAdd + "</br><br>" + items[i].branchCity + "</br><br>" + items[i].branchSt + "</br><br>"  + items[i].branchZip + "</br><br>TranCount: " + items[i].tranCount).addTo(branches);
           marker.push(LamMarker);
    }
            mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoidGFzdHlicm93bmllcyIsImEiOiJjaXgzZWxkaHowMWZhMnlvd2wzNHllaGwxIn0.0RSZEhtR0OBLMbwjqFfBkg';

    var outdoors  = L.tileLayer(mbUrl, {id: 'mapbox.outdoors',   attribution: mbAttr});


    var heatmap = L.heatLayer(heatMapArr, {radius: 6, blur: 8,maxZoom: 8});

    var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [outdoors, branches, heatmap]
    });

    var baseLayers = {
        "Outdoors": outdoors
    };

    var overlays = {
        "Branches": branches,
        "HeatMap": heatmap
    };

    L.control.layers(baseLayers, overlays).addTo(map);

所以基本上我试图使用热图显示作为用户可以选择的可能叠加。 Leaflet-heat库教程位于https://github.com/Leaflet/Leaflet.heat/，它解释了为了使库工作需要完成的工作。

无论如何，我有一个纬度，经度和强度数量的项目列表，所以我试图使用它，它的被称为项目。我仔细研究，将选择信息推送到我的热图数组中。此时，除了添加叠加层和创建地图之外，我几乎都应该设置好。当我运行程序时，地图会显示，但不存在叠加图标，因此存在问题。

在网站教程中，他们使用单独的Javascript文件，该文件包含一组对象来创建热图。我用我的程序尝试了这个，然后一切正常，这很快让我相信我的对象数组存在问题，可能是一些小的格式化事物.......我正在使用另一个函数来创建一个带有数据的对象我有，所以它的格式与网站示例相同。

我尝试使用警报和其他语句并将我的数组与他们的数组进行比较，但它没有产生任何有用的东西，所以我想在Stack上发布我的问题以获得其他人可能出错的反馈。我认为它的东西很小，我可能没有看到。

非常感谢任何反馈，如果有任何问题，请务必告诉我。

谢谢！

使用Leaflet-Heat.js显示地图

0 个答案: