Plotly生成SVG等高线图叠加Leaflet地图时右侧留白问题求助

问题描述 #

使用Plotly生成SVG等高线图，叠加到Leaflet地图指定latLngBounds范围时，SVG虽被限制在边界内，但等高线未铺满整个SVG，右侧存在空白区域。

问题原因 #

Plotly默认会根据数据比例自动调整绘图区域，当数据宽高比与SVG画布宽高比不匹配，或布局设置未强制绘图占满画布时，就会出现内部空白。

解决步骤 #

1. 强制Plotly绘图占满SVG画布 #

在layout中指定坐标轴范围匹配数据维度，并绑定宽高比为目标地图区域的比例，确保绘图元素填满整个SVG：

// 先计算地图目标区域的宽高比
var boundsSize = map.getSize().divideBy(map.getZoomScale(map.getZoom()));
var aspectRatio = boundsSize.x / boundsSize.y;

var layout = {
  margin: { t: 0, r: 0, b: 0, l: 0 }, 
  xaxis: { 
    visible: false,
    range: [0, data[0].length], // 匹配数据的列数
    scaleanchor: 'y', // 绑定x轴与y轴的比例
    scaleratio: aspectRatio // 对齐地图区域的宽高比
  },
  yaxis: { 
    visible: false,
    range: [0, data.length] // 匹配数据的行数
  },
  autosize: false,
  width: boundsSize.x, // 同步地图区域的像素宽度
  height: boundsSize.y // 同步地图区域的像素高度
};

2. 修正SVG的缩放属性 #

调整SVG的preserveAspectRatio和viewBox，让内容能自适应Leaflet的边界：

Plotly.newPlot("map1", [contourTrace], layout).then(function () {
  var svgContent = document.querySelector("#map1 svg");
  if (svgContent) {
    svgContent.setAttribute("preserveAspectRatio", "none"); // 强制拉伸适配边界
    svgContent.setAttribute("viewBox", `0 0 ${boundsSize.x} ${boundsSize.y}`); // 与画布尺寸一致
  }

  var svgOverlay = L.svgOverlay(svgContent, latLngBounds, {
    opacity: 0.9,
    interactive: true,
  }).addTo(map);
});

3. 完整修改代码示例 #

var levels = {
  start: 0.2,
  end: 0.5,
  size: 0.01,
}; 

// 计算地图目标区域的宽高比与像素尺寸
var boundsSize = map.getSize().divideBy(map.getZoomScale(map.getZoom()));
var aspectRatio = boundsSize.x / boundsSize.y;

var contourTrace = {
  z: data,
  type: "contour",
  contours: {
    start: levels.start,
    end: levels.end,
    size: levels.size,
    showlabels: true, 
  },
};

var layout = {
  margin: { t: 0, r: 0, b: 0, l: 0 }, 
  xaxis: { 
    visible: false,
    range: [0, data[0].length],
    scaleanchor: 'y',
    scaleratio: aspectRatio
  },
  yaxis: { 
    visible: false,
    range: [0, data.length]
  },
  autosize: false,
  width: boundsSize.x,
  height: boundsSize.y
};

Plotly.newPlot("map1", [contourTrace], layout).then(function () {
  var svgContent = document.querySelector("#map1 svg");
  if (svgContent) {
    svgContent.setAttribute("preserveAspectRatio", "none");
    svgContent.setAttribute("viewBox", `0 0 ${boundsSize.x} ${boundsSize.y}`);
  }

  var svgOverlay = L.svgOverlay(svgContent, latLngBounds, {
    opacity: 0.9,
    interactive: true,
  }).addTo(map);
});

内容的提问来源于stack exchange，提问作者Mojtaba Jalili