制作传单离线地图（使用本地地图图块）但没有显示任何内容

发布于 2025-01-16 13:38:24 字数 949 浏览 4 评论 0原文

当我尝试在本地制作地图图块时，它可以像这样在传单在线地图上工作

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 13,
  minZoom:2
}).addTo(map);

},
};
</script>

，然后 html 上什么也没有显示（使用 MobileAtlasCreator 制作地图图块）

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('./img/mapTiles/{z}/{x}/{y}.png', {
maxZoom: 13,
minZoom:2
}).addTo(map);

},
};
</script>

这是我的参考

HTML 离线地图通过 Leaflet 进行本地图块

https://www.youtube.com/watch?v=oP4bCLtXIeY

非常感谢

原文

it's work on leaflet online map like this

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 13,
  minZoom:2
}).addTo(map);

},
};
</script>

when i try to make map tiles locally then nothing show up on html
( using MobileAtlasCreator make map tiles)

<script>
import L from 'leaflet';
export default {
mounted() {

var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('./img/mapTiles/{z}/{x}/{y}.png', {
maxZoom: 13,
minZoom:2
}).addTo(map);

},
};
</script>

this is my reference below

HTML offline map with local tiles via Leaflet

https://www.youtube.com/watch?v=oP4bCLtXIeY

thanks a lot

分享到QQ

分享到微博

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

发布评论

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

淑女气质 2025-01-23 13:38:24

由于您计划在本地环境中工作（或之后使用它），我将从代码中取出导入片段。它已经安装好了，我明白了；但下载完这些图块后，只需在本地工作即可。
将它们放在一个文件夹中，然后使用您拥有的代码加载它们。
你的代码没问题！
这是我的例子：

    var m = {x: 41.892594, y: 12.484371};
    var SELF_Map = L.tileLayer('empire/{z}/{x}/{y}.jpg', {
        //attribution: 'none',
        continuousWorld: false,
        minZoom: 4,
        maxZoom: 10,
        tap: false
    }).addTo(map);
    map.setView({lat: m.x, lng: m.y}, 6);

它每次都对我有用。我从我最喜欢的地图提供商那里获取图像，下载它们并将它们存储在一个文件夹中，在本例中是一个名为“empire”的文件夹。

Since you are planning to work (or use it afterwards) in a local environment, I would take out the import snippet from the code. It's mounted, I get it; but just work locally, after you get those tiles downloaded.
Put them in a folder, and load them using the code you have.
Your code is fine!
Here is my example:

    var m = {x: 41.892594, y: 12.484371};
    var SELF_Map = L.tileLayer('empire/{z}/{x}/{y}.jpg', {
        //attribution: 'none',
        continuousWorld: false,
        minZoom: 4,
        maxZoom: 10,
        tap: false
    }).addTo(map);
    map.setView({lat: m.x, lng: m.y}, 6);

It worked for me every time. I get the images from my favorite map provider, I download them, and store them in a folder, in this case, a folder called "empire".

回复收藏 0 原文

星光不落少年眉 2025-01-23 13:38:24

尝试这个方法：

 const tileLayer = new L.tileLayer.offline(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    minZoom: 5,
    maxZoom: 20,
    crossOrigin: true,
  },
  localforage
);
tileLayer.addTo(map);

Try this approach:

 const tileLayer = new L.tileLayer.offline(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    minZoom: 5,
    maxZoom: 20,
    crossOrigin: true,
  },
  localforage
);
tileLayer.addTo(map);

回复收藏 0 原文

~没有更多了~