2014-01-24 61 views
1

我一直在Android設備上使用MOBAC爲OSMDroid創建地圖集,但我有興趣瞭解是否可以從Web應用程序創建這些圖塊的匹配視圖。這是我開始着眼於顯而易見的JavaScript映射API選擇Openlayers的地方。如何將MOBAC創建的地圖集與OpenLayers一起用於離線地圖?

Openlayers提供了用於離線緩存切片的示例,但我需要首先獲取它以加載我的切片。 OpenStreetMaps在本地使用自己的瓷磚也有一些很好的示例。

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

在我的測試代碼,這是所有由Web服務器託管的,我有一個瓷磚的目錄結構如下所示:

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

這基本上是開放街道地圖的地圖格式。當我嘗試使用下面的示例時,我會看到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> 

回答

0

好的,我知道現在發生了什麼事。我根據我對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的拼貼集,所以我需要理清如何正確定義圖層分辨率比例尺,但那是另一篇文章。