传单地图 - 底部几行未加载到带有本地图块的地图中

Question

我是传单的新手，正在努力掌握基础知识。当我使用自定义图块构建我的第一张地图时，我发现底行（或几行）在任何缩放级别都根本没有加载。在浏览器中查看时，它们根本没有在源代码中列出，并且滚动到地图底部不会显示任何控制台错误。但是，如果我确实滚动了地图的left或right，我do会收到错误消息，告诉我Leaflet正在attempting加载不存在的图像。但是当我试图滚动到地图的bottom时我没有得到任何错误。

错误示例：

GET file:///C:/Users/carso/Documents/Programming/MapProject/Web/MapImages/0/-1/0.jpg net::ERR_FILE_NOT_FOUND

网上很多回答建议你需要包含传单CSS文件，设置“.leaflet-container”的一些尺寸属性，或者可能调用map.invalidateSize()。我拥有所有这些都没有运气。

我也没有任何 HTML 元素，如 this post 所描述的那样。我的代码是very bare-bones.

请耐心等待我现在如何设置的详细信息......

对于这个测试，我只有 4 个 jpg 文件，每个文件只是一个白色背景和图像坐标的黑色文本。它们在这样的文件夹中：

/0/0/0.jpg

/0/0/1.jpg

/0/1/0.jpg

/0/1/1.jpg

我的理解是那些文件夹去：/(ZoomLevel)/(ColumnIndex)/(RowIndex).jpg

当前显示地图中最上面的两张图片（“/0/0/0.jpg”和“/0/1/0.jpg”）。像这样：

这是我的消息来源：

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map Test</title>
        <link rel="stylesheet" href="main.css">
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>

        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    </head>
    <body>
        <div id="map"></div>
        <script src="app.js"></script>
    </body>
</html>

CSS：

#map {
    position: absolute;
    width:100%;
    height: 100%;
}

.leaflet-container {
    width: 100vw;
    height: 100vh;
}

JavaScript：

var map = L.map('map').setView([0,0], 0);

L.tileLayer('./MapImages/{z}/{x}/{y}.jpg', {
        noWrap: true,
        tileSize: 256,
        minZoom: 0,
        maxZoom: 0,
        attribution: <a>Nobody</a>',
    }).addTo(map)

Answer 1

我有同样的问题，这对我有用。

var map = L.map('map').setView([0,0], 0).whenReady(() => {
    setTimeout(() => {
        map.invalidateSize();
    }, 100);
});

我认为你应该在创建后更新“地图大小”。我在没有

setTimeout

的情况下尝试过，但它没有做任何事情。

传单地图 - 底部几行未加载到带有本地图块的地图中

问题描述投票：0回答：1

1个回答

最新问题

传单地图 - 底部几行未加载到带有本地图块的地图中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1