我一直在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>