首页 文章

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

提问于
浏览 次
1

我有这个在我的Web应用程序中提供离线 Map 的基本要求 . 我的网络应用程序无法访问互联网，因此完全排除了显示 Map 的所有在线API .

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

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

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

图块存储在我的本地目录中 . 我的最后一步是在我的应用程序（Java EE）中的Web浏览器中将这些图块显示为 Map ，并根据地点的纬度和经度放置一个标记 .

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

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

术语离线我的意思是，应用程序托管在应用程序服务器上的Intranet上，并且在任何情况下都不提供Internet访问 .

请指导 .

web-applications maps offline openstreetmap geographical-information

2 回答

  • 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);
    回复于
  • 1

    你快到了 .

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

    请参阅此基本示例的源代码：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>
    I am a popup.").openPopup();

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

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

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

相关问题