将 SVG 叠加在传单 latLngBounds 上

Question

我正在使用 Plotly 生成 SVG 等高线图。随后，我的目标是将这个 SVG 轮廓叠加到具有特定边界的地图上。我的目的是调整 SVG 的大小以适应这些边界，类似于覆盖图像。然而，尽管 SVG 包含在指定的边界内，但轮廓线并未覆盖整个 SVG，并且 SVG 右侧有一个空白区域。

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

          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 },
            yaxis: { visible: false },
          };

          Plotly.newPlot("map1", [contourTrace], layout).then(function () {
            var svgContent = document.querySelector("#map1 svg");
            if (svgContent) {
              var width = svgContent.getAttribute("width");
              var height = svgContent.getAttribute("height");
              

              console.log(width, height);

              svgContent.setAttribute("preserveAspectRatio", "none");
              svgContent.setAttribute("viewBox", "0 0 " + width + " " + height);
            }

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

            
          });

Answer 1

这是因为 Plotly 创建 SVG 的方式。我必须计算轮廓宽度而不是 SVG 宽度。

 var trueWidth = document.getElementById("map1").getElementsByTagName("svg")[0].getElementsByClassName("cartesianlayer")[0].getBoundingClientRect().width;
            var height = svgContent.getAttribute("height");
            svgContent.setAttribute("preserveAspectRatio", "none");
            svgContent.setAttribute("viewBox", "0 0 " + trueWidth + " " + height);