颜色渐变不起作用leaflet.JS答案

【问题标题】：the color gradient doesn't work leaflet.JS颜色渐变不起作用leaflet.JS
【发布时间】：2020-04-15 04:39:54
【问题描述】：

很抱歉再次询问，我正在尝试为 Leaflet 地图实现热图，但由于某种原因，似乎所有数据点都具有相同的颜色并且没有颜色渐变。

数据的最小值为565，最大值为2455，大约有900000+行数据。这就是我得到的所有数据都以红色显示

 var cfg = {

  "radius":2,
  "maxOpacity": .8,

  "scaleRadius": false,
  "useLocalExtrema": true,
  latField: 'lat',
  lngField: 'lng',
  valueField: 'value',
  gradient: { 565:"rgb(255,255,204)",1200:"rgb(255,237,160)",1300:"rgb(254,217,118)",1500:"rgb(254,178,76)",1800:"rgb(253,141,60)",2000:"rgb(252,78,42)",2100:"rgb(227,26,28)",2455:"rgb(177,0,38)" }
};
var heatmapLayer = new HeatmapOverlay(cfg);
var map = new L.Map('map', {
  center: new L.LatLng(28.762929,-9.755429),
  zoom: 5,
  maxZoom: 11,
  minZoom: 5,
  layers: [baseLayer, heatmapLayer]
});
heatmapLayer.setData(testData);

layer = heatmapLayer;

【问题讨论】：

标签： javascript leaflet heatmap

【解决方案1】：

您必须使用介于 0 和 1 之间的数字作为 gardient。

gradient: {
    // enter n keys between 0 and 1 here
    // for gradient color customization
    '.5': 'blue',
    '.8': 'red',
    '.95': 'white'
  },

https://www.patrick-wied.at/static/heatmapjs/example-full-customization.html

https://www.patrick-wied.at/static/heatmapjs/docs.html

【讨论】：

感谢它的工作，但数据仍然具有相同的颜色，就像它给出与键 1 相同的颜色