如何在 L.tileLayer 的传单地图中使用 localhost TileServer GL？

Question

我正在尝试使用传单和 Tileserver Gl 制作离线地图

我正在尝试在我的应用程序中加载 Tileserver Gl tiles[它托管在斯里兰卡特定区域的本地系统中]，其中使用 Leaflet 绘制地图。但是瓷砖没有加载，我无法弄清楚。将添加用于绘制我的地图的代码

使用以下代码在本地托管我的图块

npm install -g tileserver-gl-light
tileserver-gl-light sri_lanka.mbtiles

在线工作地图-

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

离线地图

没有加载磁贴

L.tileLayer('http://localhost:8080/data/v3/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

信息:我对传单和编程有点陌生，我在过去的 2 天里对此感到震惊
提前致谢！

Answer 1

TileServer GL Light 的 /data/v3 端点不提供 PNG 图像切片，而是提供 Protobuf (pbf) 格式的矢量切片。

对于 Leaflet，您必须使用插件，Leaflet Documentation. Some more suggestions and sample code can be found on this GIS Stackexchange question: How to load a vector tile layer in a Leaflet map? 中列出了一些插件。

只有 "non-light" TileServer GL 有 "rendered tiles"。如果您正在使用它，您可以使用以下 URL 之一（提供标准样式）访问磁贴：

http://localhost:8080/styles/klokantech-basic/{z}/{x}/{y}.png
http://localhost:8080/styles/osm-bright/{z}/{x}/{y}.png

启动 TileServer GL 后，您还可以在 http://localhost:8080/ 上找到这些内容。

如何在 L.tileLayer 的传单地图中使用 localhost TileServer GL？

How to use localhost TileServer GL in leaflet map in L.tileLayer?

gis

offline

openstreetmap

leaflet