Plotly.js Mapbox密度热力图颜色异常问题技术问询

开发者阿泽

2026-7-25

Plotly.js densitymapbox 颜色显示异常问题咨询

在查看Plotly.js官方的mapbox密度热力图示例时，发现densitymapbox类型热力图存在两处颜色显示异常：

过度缩小地图时，会出现大量黄色区域，视觉上类似全球多处发生9级地震，但放大后黄色区域消失，严重误导用户；
放大查看时，z值分别为7和5.5的两个数据点，按图例刻度应显示不同颜色，但实际颜色差异极小，用户无法区分。

可复现代码

代码示例1（地震数据集）

d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/earthquakes-23k.csv',
  function(err, rows){function unpack(rows, key) {return rows.map(function(row){ return row[key];
})};
var data = [{
  lon: unpack(rows, 'Longitude'), lat: unpack(rows, 'Latitude'), radius:10,
  z: unpack(rows, 'Magnitude'), type: "densitymapbox", coloraxis: 'coloraxis',
  hoverinfo: 'skip'}];
var layout = {
    mapbox: {center: {lon: 60, lat: 30}, style: "outdoors", zoom: 2},
    coloraxis: {colorscale: "Viridis"}, title: {text: "Earthquake Magnitude"},
    width: 600, height: 400, margin: {t: 30, b: 0}};
var config = {mapboxAccessToken: "your access token"};
Plotly.newPlot('myDiv', data, layout, config);
})

代码示例2（简化测试数据）

var data = [
  {type: "densitymapbox", lon: [10, 20, 30], lat: [15, 25, 35], z: [1, 3, 2],
   radius: 50, colorbar: {y: 1, yanchor: 'top', len: 0.45}},
  {type: 'densitymapbox', lon: [-10, -20, -30], lat: [15, 25, 35],
   radius: [50, 100, 10],  colorbar: {y: 0, yanchor: 'bottom', len: 0.45}
  }];
var layout = {mapbox: {style: 'light', center: {lat: 20}}, width: 600, height: 400};
var config = {mapboxAccessToken: "your access token"};
Plotly.newPlot('myDiv', data, layout, config);