Question

我正在使用CRS.Simple在Leaflet中编写平面图映射应用程序。桌面上的一切工作正常，但在Android上的Chrome中，当我缩放时，地图保持低水平。 Android上的Chrome似乎是唯一的问题。它适用于Android上的Firefox。我认为在放大时它根本不是重新取样图像。它只是缩放初始图层。我没有使用数据保护程序。它不是图像渲染问题，因为它实际上以太低的分辨率显示图像。图像是一个非常大的jpeg（4688 x 6468在4225k）。我创建了http://jsfiddle.net/njeob9c3/1来显示问题。这是我的HTML。

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
    </head>
    <body>
        <div id="image-map"></div>
            <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
    </body>

</html>

这是我的css：

html {
    font-family: "myriad-pro", sans-serif;
    height: 100%;
    display: block;
}

#image-map {
   height: 85vh;
   border: 1px solid black;
   width: 100%;
}

#map-container {
    margin: 0;
    height: 85vh;
    width: 100%;
}

这是我的javascript：

var map = L.map('image-map', {
    crs: L.CRS.Simple,
    center: [0,0],
    minZoom: 1,
    maxZoom: 4
});

const width = 609.3,
    height = 406.79245283,
    mapurl = 'https://corporate.ford.com/content/dam/corporate/en/company/community/dearborn-campus-transformation/Existing-Site-Plan-HR.jpg',
    centerx = 243,
    centery = 238.79245283,
    mapscale = 15.9;

var bounds = L.latLngBounds([[-centery,-centerx], [height - centery, width - centerx]]);
var image = L.imageOverlay(mapurl, bounds).addTo(map);

map.fitBounds(bounds);
var newBounds = bounds.pad(.1);
map.setMaxBounds(newBounds);

在桌面上它运行正常。在Android上查看Chrome中的小提琴，分辨率在缩放时不会重新取样。有什么建议吗？

Answer 1

这似乎是Chrome for Android本身的一个错误，影响了大图片。

尝试在浏览器中直接加载图片（不含Leaflet）：

https://corporate.ford.com/content/dam/corporate/en/company/community/dearborn-campus-transformation/Existing-Site-Plan-HR.jpg

当我测试时，图像分辨率比桌面上差。

可能与链接到Chrome（Chromium）项目问题Force Android Chrome to not downsample images的https://bugs.chromium.org/p/chromium/issues/detail?id=419744相同，在撰写本文时仍处于打开状态。

Leaflet CRS.Simple on Chrome Android分辨率低变焦

1 个答案: