Leaflet Heatmap did not produce gradient color

问题:

I have a simple leaflet heatmap example with data (over 10,000 rows). But it did not produce the gradient heatmap as it should be.

The demo is at http://shafiqmustapa.my/test.html

heatmap did not produce color according to value

what it is look like in arcmap (arcgis) for comparison (dont compare the interpolarity as leaflet does not support it)

what could be the problem. Thanks in advance.

回答1:

The main reason is that you commented the gradient attribute in your heatLayer parameters.

Then you'll need to increase the max attribute as you have intensity values higher that 1 in your points.

Try with that

  var heat = L.heatLayer(quakepoints,{
        radius: 20,
        blur: 15, 
        maxZoom: 10,
        max: 4.0,

        gradient: {
            0.0: 'green',
            0.5: 'yellow',
            1.0: 'red'
        }
    }).addTo(map);

You have to think of the gradient indexes (0.0 to 1.0) as a cursor from 0% to 100% of your max intensity

Here is the result ...

See what you get if you decrease max attribute to something nearer to your highest intensity value (3.2 in this case)