我一直在使用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 服务器托管，我有一个如下所示的磁贴目录结构：
./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>
好的，我知道现在发生了什么。我根据我对Android版OSMDroid的实验做了一些假设。
首先，错别字。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 的磁贴集，所以我需要弄清楚如何正确定义图层分辨率比例，但这是另一篇文章。