SVG缩放问题桌面与移动与leaflet.js

Question

我尝试使用leaflet.js 允许用户在我的网站上缩放和平移大型 SVG 文件。我使用以下script 来显示带有传单的 SVG：

    // Using leaflet.js to pan and zoom a big image.
    // See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
    var factor = 1;
    
    // create the slippy map
    var map = L.map('image-map', {
        minZoom: 1,
        maxZoom: 5,
        center: [0, 0],
        zoom: 1,
        crs: L.CRS.Simple
    });

    function getMeta(url) {
        const img = new Image();
        img.addEventListener("load", function () {
            var w = this.naturalWidth;
            var h = this.naturalHeight;
            var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
            var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
            var bounds = new L.LatLngBounds(southWest, northEast);


            // add the image overlay, 
            // so that it covers the entire map
            L.imageOverlay(img.src, bounds).addTo(map);

            // tell leaflet that the map is exactly as big as the image
            map.setMaxBounds(bounds);
            map.fitBounds(bounds); // test

        });
        img.src = url;
    }

    getMeta("/assets/images/bhikkhu-patimokkha.svg")

您可以看到结果here。问题是它在我的 iPhone 上运行良好，缩放级别合适，很容易放大，但在桌面版本上，你只能缩小不能放大。

我尝试将 minZoom: 1 更改为不同的值，但它似乎没有做任何事情。我能够让它在桌面上工作的唯一方法是在 var w 和 var h 上添加一个乘数 10，但它会在移动版本上搞砸.

我在使用 PNG 图像方面取得了更多成功，但它们的加载速度非常慢。也许代码不适合 SVG，尤其是在调用 naturalHeight 时？但是当我调试它时它看起来很好。

感谢您的帮助。

如果你愿意，这里有一个codepen。

编辑：使用来自@Grzegorz T 的更好的代码。它现在在桌面上运行良好。但在 Safari iOS 上，它被过度缩放并且无法取消缩放......见下图（它在 Iphone 上使用之前的代码，但在 Destop 上没有......）

Answer 1

显示变量w 和h 你会看到返回了哪些小变量。为了增加它们，我将它们增加了* 5，为此我使用了 fitBounds，它现在应该缩放到查看器窗口，同时可以缩放。

为了能够多次单击缩放，我将map.getMaxZoom () - 1 更改为map.getMaxZoom () - 2

var map = L.map("image-map", {
  minZoom: 1, // tried 0.1,-4,...
  maxZoom: 4,
  center: [0, 0],
  zoom: 2,
  crs: L.CRS.Simple
});

function getMeta(url) {
  const img = new Image();
  img.addEventListener("load", function () {
    var w = this.naturalWidth * 5;
    var h = this.naturalHeight * 5;

    var southWest = map.unproject([0, h], map.getMaxZoom() - 2);
    var northEast = map.unproject([w, 0], map.getMaxZoom() - 2);
    var bounds = new L.LatLngBounds(southWest, northEast);

    // add the image overlay,
    // so that it covers the entire map
    L.imageOverlay(img.src, bounds).addTo(map);

    // tell leaflet that the map is exactly as big as the image
    // map.setMaxBounds(bounds);
    map.fitBounds(bounds);
  });
  img.src = url;
}

getMeta("https://fractalcitta.github.io/assets/images/bhikkhu-patimokkha.svg");

您无需增加(w, h) * 5，只需更改为map.getMaxZoom () - 4

还有一件更重要的事情，您应该始终使用 svg 来优化这些文件。 我总是使用这个网站 - svgomg

第二版宽度异步/承诺 ----------

let map = L.map("map", {
  crs: L.CRS.Simple,
  minZoom: 1,
  maxZoom: 4,
});

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.addEventListener("load", () => resolve(img));
    img.addEventListener("error", reject);
    img.src = url;
  });
}

async function getImageData(url) {
  const img = await loadImage(url);
  return { img, width: img.naturalWidth, height: img.naturalHeight };
}

async function showOnMap(url) {
  const { img, width, height } = await getImageData(url);

  const southWest = map.unproject([0, height], map.getMaxZoom() - 4);
  const northEast = map.unproject([width, 0], map.getMaxZoom() - 4);

  const bounds = new L.LatLngBounds(southWest, northEast);
  L.imageOverlay(img.src, bounds).addTo(map);

  map.fitBounds(bounds);
}

showOnMap(
  "https://fractalcitta.github.io/assets/images/bhikkhu-patimokkha.svg"
);

解决问题的第三种方法，希望是最后一种；）

您需要对这里发生的事情进行一些描述。 我们通过 fetch 获得 svg，我们将其注入隐藏的 div，其中 width/height 设置为 0
然后我们使用 getBBox() 属性从注入的 svg 中获取确切的尺寸。

在这个例子中我没有使用map.unproject。要获得确切的边界尺寸就足够了：

const bounds = [
  [0, 0], // padding
  [width, height], // image dimensions
];

以下所有代码：

<div id="map"></div>
<div id="svg" style="position: absolute; bottom: 0; left: 0; width: 0; height: 0;"></div>

let map = L.map("map", {
  crs: L.CRS.Simple,
  minZoom: -4,
  maxZoom: 1,
});

const url =
  "https://fractalcitta.github.io/assets/images/bhikkhu-patimokkha.svg";

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.text();
    return data;
  } catch (err) {
    console.error(err);
  }
}

fetchData(url)
  .then((svg) => {
    const map = document.getElementById("svg");
    map.insertAdjacentHTML("afterbegin", svg);
  })
  .then(() => {
    const svgElement = document.getElementById("svg");
    const { width, height } = svgElement.firstChild.getBBox();
    return { width, height };
  })
  .then(({ width, height }) => {
    const img = new Image();
    img.src = url;

    const bounds = [
      [0, 0], // padding
      [width, height], // image dimensions
    ];

    L.imageOverlay(img.src, bounds).addTo(map);

    map.fitBounds(bounds);
  });

Answer 2

好的，所以最后我使用了来自@Grzegorz T. 的代码并稍作修改。添加一个 const H = 100;扮演任意高度的角色，然后使用浏览器给出的尺寸比计算宽度 W。 （比例相同，不同浏览器的SVG尺寸不同）

代码如下：

const W = 100; // this allow to get the correct ratio 
               // then it dosen't depend on browser giving different dimentions.

    let map = L.map("image-map", {
        crs: L.CRS.Simple,
        minZoom: 1,
        maxZoom: 4,
    });

    function loadImage(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.addEventListener("load", () => resolve(img));
            img.addEventListener("error", reject);
            img.src = url;
        });
    }

    async function getImageData(url) {
        const img = await loadImage(url);
        return { img, width: img.naturalWidth, height: img.naturalHeight };
    }

    async function showOnMap(url) {
        const { img, width, height } = await getImageData(url);

        const H = W * width / height; // hopefuly height is not = 0 (mozilla ?)

        const southWest = map.unproject([0, H], map.getMaxZoom() - 4);
        const northEast = map.unproject([W, 0], map.getMaxZoom() - 4);

        const bounds = new L.LatLngBounds(southWest, northEast);
        L.imageOverlay(img.src, bounds).addTo(map);

        map.fitBounds(bounds);
    }

    showOnMap(
        "https://fractalcitta.github.io/assets/images/bhikkhu-patimokkha.svg"
    );