leaflet - 如何在 L.tileLayer 的传单 map 中使用 localhost TileServer GL？

Question

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

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

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

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

在线工作 map -

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

离线 map

没有加载图 block

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 中。 .可以在此 GIS Stackexchange 问题中找到更多建议和示例代码:How to load a vector tile layer in a Leaflet map? .

只有“非光”TileServer GL 具有“渲染图 block ”。如果您正在使用它，您可以使用以下 URL 之一访问磁贴(使用提供的标准样式):

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

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