heatmap.js перекрывающиеся точки данных - PullRequest
Новая
       72

heatmap.js перекрывающиеся точки данных

0 голосов
/ 14 сентября 2018

Я создал карту тепла, используя плагин 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)
}
...