传单地图 - 底部几行未使用本地图块加载到地图中

发布于 2025-01-14 08:02:19 字数 2799 浏览 3 评论 0原文

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

示例错误：

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

网上的许多答案建议您需要包含传单 CSS 文件，设置“.leaflet-container”的一些大小属性，或者可能调用 map.invalidateSize()。我拥有这一切，但没有运气。

我也没有任何带有“text-align”等属性的 HTML 元素集，如这篇文章描述了。我的代码非常简单。

请耐心等待我详细了解我现在如何进行设置...

对于此测试，我只有 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)

原文

I am new to leaflet and am trying to get a handle on the basics. As I was building my first map with custom tiles, I found that the bottom row (or few rows), at any zoom level, were not loading at all. They are not listed at all in the source code when viewed in a browser, and scrolling past the bottom of the map does not show any console errors. If I do scroll past the left or right of the map though, I do get errors telling me that Leaflet is attempting to load images that do not exist. But I get no errors when trying to scroll past the bottom of the map.

Sample error:

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

Many answers online suggest that you need to include the leaflet CSS files, settings some size attributes of ".leaflet-container", or potentially call map.invalidateSize(). I have all both of these with no luck.

I also do not have any HTML elements with any attributes like "text-align" set, as this post describes. My code is very bare-bones.

Please bear with me for the details of exactly how I have things set up right now ...

For this test, I simply have 4 jpg files, each of which is just a white background with black text of the coordinates of the image. They are in folders like this:

/0/0/0.jpg

/0/0/1.jpg

/0/1/0.jpg

/0/1/1.jpg

My understanding is that those folders go: /(ZoomLevel)/(ColumnIndex)/(RowIndex).jpg

Currently, the top two images in the map are displayed ("/0/0/0.jpg" and "/0/1/0.jpg"). Like this:

Here are my sources:

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)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

俏︾媚 2025-01-21 08:02:19

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

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

我认为你应该在创建后更新“地图大小”。我尝试不使用 setTimeout 但它没有执行任何操作。

I have kind of the same issue, this worked for me.

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

I think that you should update the "map size" after it's creation. I tried without the setTimeout but it doesn't do anything.

回复收藏 0 原文

~没有更多了~

关于作者

分开我的手

暂无简介

文章

29 人气

关注发私信

友情链接

文江博客

传单地图 - 底部几行未使用本地图块加载到地图中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

传单地图 - 底部几行未使用本地图块加载到地图中

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。