如何将 MOBAC 创建的地图集与 OpenLayers 一起用于离线地图？答案

【问题标题】：How to use a MOBAC created atlas with OpenLayers for an offline map?如何将 MOBAC 创建的地图集与 OpenLayers 一起用于离线地图？
【发布时间】：2014-02-15 17:29:48
【问题描述】：

我一直在使用 MOBAC 在 Android 设备上为 OSMDroid 创建图集，但我很想知道是否可以从 Web 应用程序创建这些图块的匹配视图。这就是我开始研究显而易见的 Javascript 映射 API 选择 Openlayers 的地方。

Openlayers 有离线缓存切片的示例，但我首先需要让它加载我的切片。 OpenStreetMaps 也有一些关于在本地使用您自己的图块的很好的示例。

http://wiki.openstreetmap.org/wiki/OpenLayers http://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example

在我的测试代码中，它全部由 Web 服务器托管，我有一个像这样的 tile 目录结构：

./tiles/<zoom>/<x>/<y.png>

这基本上是 OpenStreetMaps 地图格式。当我尝试使用下面的示例时，我会看到 Chrome 向我的 Web 服务器请求http://127.0.0.1/tiles/0/0/0.png，这自然不会存在。

我想我的问题是，OpenLayers 如何使用投影、边界和地图居中（长/纬度）？我意识到地理映射很复杂，但使用这样的 API 只是为了解决嵌入式地图的问题。我只是想显示我的地图图块集并定义长/纬度和缩放级别。

提前感谢您的任何建议。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Map Example</title>
    <link rel="stylesheet" href="./theme/default/style.css" type="text/css">
    <!-- <link rel="stylesheet" href="style.css" type="text/css"> -->
    <script src="./OpenLayers.js"></script>
    <script type="text/javascript">
        var map, layer;

        var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Canada
        var toProjection = new OpenLayers.Projection("EPSG:4326"); // Canada

        function init(){
            map = new OpenLayers.Map('test_map');
            layer = new OpenLayers.Layer.OSM(
                "Local Tiles",
                "tiles/${z}/${x}/${y}.png");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-76.885610, 42.345822).transform(fromProjection,toProjection), 19);
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Map Example</h1>
    <div id="map" class="smallmap"></div>
  </body>
</html>

【问题讨论】：

标签： javascript openlayers

【解决方案1】：

好的，我知道现在发生了什么。我根据我对 OSMDroid for Android 的实验做了一些假设。

首先，一个错字。 OpenLayer.Map() 应该使用应该插入地图的 div ID 构造。

map = new OpenLayers.Map('test_map');

应该是：

map = new OpenLayers.Map('map');

因为：

<div id="map" class="smallmap"></div>

其次，Openlayers 的缩放级别似乎是无情的，而且有点奇怪。如果您以编程方式缩放到超出支持分辨率的级别，您将出现在无人区。缩放级别 19 不会显示任何内容，缩放级别 18 会。我有一个一直到 20 的图块集，所以我需要弄清楚如何正确定义图层分辨率比例，但这是另一篇文章。

【讨论】：