传单：图像叠加和缩放级别答案

【问题标题】：Leaflet: Image Overlay and zoom levels传单：图像叠加和缩放级别
【发布时间】：2016-07-06 05:56:53
【问题描述】：

我在我的地图中添加了一张图片（图片叠加）。我可以根据图像“调整”缩放级别吗？

缩放级别为 17 时，栅格地图的分辨率与屏幕分辨率相比太低。在缩放级别 16 时，栅格地图不再可读。

是否可以定义诸如“缩放级别 17：图像的 1px = 屏幕的 1px”之类的内容？

请原谅我笨拙的英语。非常感谢！

var map = L.map('image-map', {
		minZoom: 16,
		maxZoom: 18,
		}).setView([46.975768, 7.436308], 17);


var imageUrl = '../Bilder/Karten/Normalansicht.png',
    imageBounds = [[46.966635, 7.415942], [46.998849, 7.470108]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

map.setMaxBounds(imageBounds);

【问题讨论】：

您的图片可以在线访问吗？如果不可能，它的分辨率是多少（宽度和高度）？
宽度：4740px，高度：3636px

标签： javascript leaflet

【解决方案1】：

是否可以定义类似“zoomlevel 17: 1px of the image = 屏幕的 1px”？

没有。

但是，您可以做的是使用CRS.Simple。在此坐标系中，缩放级别 0 时 1 个地图单位 = 1px。您必须调整图像叠加坐标以达到您想要的屏幕分辨率/图像分辨率比率。

在http://leafletjs.com/examples/crs-simple/crs-simple.html查看关于 CRS.Simple 的教程

另一个选项是使用分数缩放控件（仅适用于 Leaflet 1.0.0-beta，不适用于 0.7.x 系列）。通过设置zoomSnap 和zoomDelta 选项，用户将能够设置缩放级别，例如16.25、16.5 和 16.75。

这个没有教程，但是你可以在https://github.com/Leaflet/Leaflet/blob/master/debug/map/zoom-delta.html查看一些测试代码

【讨论】：