Web applications 将.osm转换为.map后Web应用程序中的脱机地理地图

对于在web应用程序中提供离线地图，我有一个非常基本的要求。 我的web应用程序无法访问internet，因此完全排除了所有用于显示地图的在线API

在做了研究之后，我下载了所需位置的.osm.pbf格式文件（比如某个特定城市）。 我

已将.osm.pbf转换为.osm文件

下一步，我使用这个.osm文件生成了tile

磁贴存储在我的本地目录中

我的最后一步是在我的浏览器中以地图的形式显示这些平铺 应用程序（JavaEE）并在给定纬度和经度的情况下放置一个标记 一个地方的

这是我必须在离线地图中显示的唯一要求

我有一个特定城市的地砖。但我不知道如何使用它和显示离线地图

所谓离线，我的意思是，应用程序托管在 应用服务器，在任何情况下都不允许访问internet 提供

---

请指导。

首先，您需要一个可以下载并驻留在应用程序中的映射库。有几种，但最常见的是和。两者都支持自定义瓷砖层

例如，假设您的互动程序位于web应用程序中名为“互动程序”的文件夹中，则可能的层定义为（在传单中）：

甚至在内联网中的其他机器上

var map = L.map('map');
L.tileLayer('http://intranetmachine/tiles/{z}/{x}/{y}.png').addTo(map);

你快到了

在本地保存传单.js和.css文件

请参阅此基本示例的源代码：

如前所述，将.css、.js路径更改为本地副本，将tileLayer路径更改为本地副本

请参见标记的代码：

L.marker([51.5, -0.09]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

L.marker（[51.5，-0.09]）。添加到（地图）
.bindPopup（“你好，世界！
我是一个弹出窗口。”）.openPopup（）；

我猜这就是你需要的。删除其他多边形，如有必要，单击“显示横向长度”功能

---

如果希望地图全屏显示，请更改

单张只能用于调用或使用现有的平铺。如何创建所需位置的平铺？已创建的平铺。在演示javascript函数中编写了上述代码。当我点击按钮时，该函数被调用。但除了传单和两个小图片+和-，页面上什么也没有显示。如何显示地图？可能有很多东西。首先，我假设你没有整个星球的地砖，所以地图的初始缩放应该与你的地砖匹配。此外，还可以使用Firebug或Chrome developer工具等工具查看映射控件试图获取的分幅。应该是helpful7@ArjanTijms是否没有脱机磁贴提供商？我正在努力学习一个类似的TODO。我正在使用传单库，但没有得到一个好的离线瓷砖数据集，我可以指向它来渲染地图。嗨，你对一些好的离线瓷砖提供商有什么线索吗？我在找一个。看了一眼展开的地图，但没有多大帮助。www.Mapbox.com/上的Mapbox对基于web的应用程序没有任何帮助。仍在阅读OpenLayers，查看它是否提供了一组可在脱机模式下工作的磁贴。
L.marker([51.5, -0.09]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

<div id="map" style="width: 100%; height: 100%"></div>