将.osm转换为.map后，Web应用程序中的脱机地理映射

Question

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

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

  

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

下一步我使用此.osm文件生成切片。

  

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

     

我的最后一步是在我的网页浏览器中将这些图块显示为地图   应用程序（Java EE）并根据纬度和经度放置标记   一个地方。

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

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

  

术语离线我的意思是，应用程序托管在Intranet上   应用服务器，在任何情况下都不能上网   提供。

请指导。

Answer 1

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

例如，假设您的图块位于名为“tiles”的文件夹中的Web应用程序内部，可能的图层定义将是（在Leaflet中）：

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

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

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

Answer 2

你快到了。

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

• http://leafletjs.com/dist/leaflet.css
• http://leafletjs.com/dist/leaflet.js

请参阅此基本示例的源代码：http://leafletjs.com/examples/quick-start-example.html

将.css，.js路径更改为本地副本，将tileLayer路径更改为local。如上所述。

请参阅标记的代码：

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

我猜这就是你需要的。如有必要，删除其他多边形和click-show-lat-long函数。

如果您希望地图为全屏，请将<div..标记更改为100％。

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