使用离线 OSM 的离线 OpenLayers Web 应用程序

May*_*sam 1 asp.net openlayers openstreetmap offlineapps

我正在尝试创建基于地图的 Web 应用程序,用户可以在提供的地图上设置地标。地图的边界仅限于一个小城市,并且客户端计算机始终处于离线状态,根本无法访问互联网。经过一整天的谷歌搜索,我发现OpenLayersOpenStreetMap 的组合是一个不错的选择。

以下示例由OpenLayers网站提供:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

这工作正常,但需要一台连接互联网的计算机。几个谷歌搜索小时后,我发现了另一个网站,提供离线OpenStreetMap的数据和.osm格式。现在我不知道是否可以使用这些.osm文件来提供 OpenLayers ,例如本地地图服务器?客户端计算机正在运行IIS 8

sca*_*cai 6

要使用 OpenLayers(或 Leaflet)离线显示地图,您将需要光栅图块。一个.osm文件不能得到直接显示,因为它包含原始矢量数据和必须首先呈现。

要生成瓷砖,请查看MaperitiveTileMill。然后导入国家或地区提取。或者,您可以设置自己的渲染服务器,这需要更多的工作。

  • 我使用 [Maperitive](https://wiki.openstreetmap.org/wiki/Maperitive) 和 [mb-util](https://github.com/mapbox/mbutil) 创建 `{x}/{y}/ {z}`目录结构。通过 OSM [教程](http://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example),它可以显示离线图块。请记住,因为它使用“file:///”协议,所以您需要在“http”服务器上运行该页面。 (2认同)