Question

我一直在使用MOBAC为Android设备上的OSMDroid创建atlas'，但我有兴趣看看我是否可以从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如何使用投影，边界和地图居中（长/纬）？我意识到Geo映射很复杂，但使用像这样的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>

Answer 1

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

首先是一个错字。应该使用div ID来构造OpenLayer.Map（），其中应该插入地图。

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

应该是：

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

因为：

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

其次，Openlayers缩放级别似乎是不可原谅的，有点奇怪。如果您以编程方式缩放到超出支持的分辨率的级别，您将出现在没有勒芒的地方。缩放级别19不会显示任何内容，缩放级别为18。我有一个瓦片组，一直到20，所以我需要弄清楚如何正确定义层分辨率比例，但那是另一个帖子。

如何使用OpenBayers创建的MOBAC图集用于离线地图？

1 个答案: