Question

我已经使用Leaflet和heatmap.js插件创建了一个热图。测试数据集为：最大值是150 最小值为0

这四个纬度长点的值为50。

，{ 纬度：36.013106， lng：-84.186551，数：50 }，{ 经度：36.071032， lng：-84.186551，数：50 }，{ 纬度：36.013106， lng：-84.276484，数：50 }，{ 纬度：36.013106， lng：-84.376484，数：50 }

数据点分别显示为蓝色，这是正确的。
当我缩小到它们重叠的水平时，它们合并的数据点将显示为预期的黄色
但是当我进一步缩小一级时，组合的数据点变为红色。

我不明白为什么会发生这种情况，因为四个数据点的组合颜色应保持橙色，但是在缩小时变为红色，然后在下一次缩小时变为橙色，然后在下一次缩小时再次变为红色。我已经在下面粘贴了代码。

var _this = this;

尝试{

var testData = {
        max:150,
        min: 0,
        data: [{
                lat: 36.071032,
                lng: -84.276484,
                count: 50
            },{
                lat: 36.013106,
                lng: -84.186551,
                count: 50
            },{
                lat: 36.071032,
                lng: -84.186551,
                count: 50
            },{
                lat: 36.013106,
                lng: -84.276484,
                count: 50
            }
        ]
    };

    var baseLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 10,
            id: 'mapbox.light',
            accessToken: 
        });

    var 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": 15,
        "maxOpacity": 1,
        "minOpacity": 1,
        "blur": 0,
         "gradient": {
        // enter n keys between 0 and 1 here
        // for gradient color customization
        '.2': 'blue',
        '.5': 'green',
        '.8': 'yellow',
        '.95': 'red'
        },      

        // 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 useLocalExtremas 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"
        valueField: 'count'
    };



    var heatmapLayer = new HeatmapOverlay(cfg);



    var map = new L.Map('map', {
            center: new L.LatLng(25.6586, -80.3568),
            zoom: 4,
            layers: [baseLayer,heatmapLayer]
        });

    heatmapLayer.setData(testData);



} catch (exception) {
    alert(exception.name + ':' + exception.message)
}

heatmap.js重叠数据点

0 个答案: