离线地理图在Web应用程序转换到.osm后.MAP(Offline Geographical Map

2019-10-17 10:59发布

我有我的web应用程序提供离线地图这个很基本的要求。 我的Web应用程序用于显示地图无法访问互联网,因此所有在线的API被完全排除。

做研究之后,我下载所需位置的.osm.pbf格式文件(说某个城市)。 一世

转换.osm.pbf到.osm文件

下一步我生成使用此.osm文件瓷砖。

瓷砖存储在我的本地目录。

我的最后一步是显示这些瓷砖在网络浏览器的地图我的应用程序(Java EE的)内,并把给定位置的纬度和经度的标记。

这是我要的离线地图内显示的唯一要求。

我有一个特别的city.But我不知道如何使用它,并显示离线地图瓦片..

通过术语离线我的意思是,应用程序是基于Intranet托管应用程序服务器上,任何情况下,提供互联网接入。

请指导。

Answer 1:

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

例如,假设你的砖是在一个叫“砖”的文件夹,一个可能的层定义是(以单张)的网络应用程序中:

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路径更改为本地。

见标记的代码:

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

我猜这就是你所需要的。 取出其他的多边形,如果需要的点击显示-LAT-长功能。

如果你想在地图全屏,改变<div..标签为100%。

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


文章来源: Offline Geographical Maps in Web Application after converting .osm to .map