我目前正在编写一个带有嵌入式 Javascript 的简单 HTML 页面，以可视化本地 mbtiles，包括本地 glyphs 和 sprites。
html index.html 是:
...
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670a06170b0e0515024a000b27554956495e" rel="noreferrer noopener nofollow">[email protected]</a>/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82efe3f2eeebe0f0e7afe5eec2b0acb3acbb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/maplibre-gl.css" rel="stylesheet" />
...
<body>
<div id="map"></div>
</body>
<script type="module" src="./index.js" async defer></script>
javascript index.js 是:
var map = new maplibregl.Map({
container: 'map',
style:
'styles/style.json',
center: [174.746344, -36.8899343],
zoom: 11.15
});
目标是加载一个 style.json 文件，该文件将定义 mbtiles、sprites 和 glyphs 本地位置。
我目前正在使用 OSM Bright 样式，该样式在我的计算机上本地复制到 style.json 文件中，目标是通过本地文件交换与远程文件的任何连接:
字形
"glyphs": "./glyphs/{fontstack}/{range}.pbf",
它对于字形效果很好
Sprite
"sprite": "./sprites/sprite",
我有以下错误: 无法解析 URL“./sprites/sprite”
mbtiles
"sources": {
"openmaptiles": {
"type": "vector",
"url": "./mbtiles/country.mbtiles"
}
},
我收到以下错误:错误:意外的标记“S”，“SQLite for”...不是有效的 JSON
我在这里肯定缺少一些协议(protocol)，并且到目前为止我找不到我的问题的任何答案，知道:
- 我不想构建一个 IOS/Android 应用程序:例如这个有用的网站 https://medium.com/@ty2/how-to-display-offline-maps-using-maplibre-mapbox-39ad0f3c7543不适用于我的情况 -> 我已尝试添加
asset://sprites/sprite
or
mbtiles://country.mbtiles
但这不起作用(对于字形也不起作用，但看起来无论如何都没有必要)
- 这个Load local .mbtiles with maplibre-gl-js看起来最接近我的需要，但答案又集中在应用程序而不是 html，而且问题还没有完全解决
因此，任何帮助将不胜感激，特别是我有兴趣知道这是否可以通过我正在使用的 maplibre-gl.js 库实现，因为这可能是不可能的。如果是这样的话，如果有必要，我希望使用 mapbox-gl.js 提供类似的答案，但仍然使用本地(离线)文件。
换句话说，主要目标是使用maplibre(不是mapbox - 至少如果可能的话)运行一个网站(而不是应用程序)，并且只包含本地文件。
感谢您的任何反馈。
最佳答案
我知道可能会迟到，但尽管如此:
据我所知，mbtiles://协议(protocol)仅适用于 maplibre-gl，不适用于 maplibre-gl-js。
所以我使用了pbf文件。您可以使用 mbutil 从 mbtiles 文件中获取它们或来自 osm.pbf 文件 tilemaker .
在使用tilemaker从osm.pbf转换之前，您应该将config-openmaptiles.json中的字段“compress”修改为“none”，否则 map 将不会渲染。
对我来说，只有“glyphs”适用于相对路径，但“sprite”和“tiles”适用于完整路径，例如http://...(但我只尝试了python3嵌入的http.server和uvicorn) 这是我从 style.json 中摘录的:
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": ["http://localhost:8000/data/tiles/{z}/{x}/{y}.pbf"],
"minzoom": 0,
"maxzoom": 14
}
},
"sprite": "http://localhost:8000/data/sprites/bright-v8",
"glyphs": "data/glyphs/{fontstack}/{range}.pbf",
“tiles”路径应位于方括号中，如果您希望过度缩放工作，则应提供 map 的“maxzoom”(据我所知，14 是许多 map 的默认值)。
关于javascript - maplibre-gl-js : load offline (local) glyphs, sprites 和 mbtiles - HTML 网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73698512/