加载离线瓦片地图

其实离线瓦片地图和在线瓦片地图是一样的原理，都是瓦片，只是离线瓦片地图的存取方式，是由开发者自己来定义的，而在线瓦片地图则不一定。在不理解原理的情况下，很多人拥有了离线瓦片，却不知道如何加载，所以这里单独列出一个小节来讲解。

在很早之前，我在github上放出了一个加载离线瓦片的地图demo，现在还是使用这个demo来讲解：

只是演示效果，所以瓦片就只有1张。如果放大或者缩小，就可能看不到地图瓦片了。先看代码：

<div id="map" style="width: 100%"></div>
<script type="text/javascript">

    // 地图设置中心，设置到成都，在本地离线地图 offlineMapTiles刚好有一张zoom为4的成都瓦片
    var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');

    //创建地图
    var map = new ol.Map({
        view: new ol.View({ 
            center: center,
            zoom: 4 
        }),
        target: 'map'
    });

    // 添加一个使用离线瓦片地图的层
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            // 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
            url: '../src/05-04/offlineMapTiles/{z}/{x}/{y}.png'
        })
    });

    map.addLayer(offlineMapLayer);
</script>

代码很简单，就不再做任何说明，参照注释。这个例子中唯一的瓦片图片相对路径是： offlineMapTiles/4/12/6.png。在开发时，会考虑这样一个问题：是先在代码里面写url，还是先在本地放好瓦片地图？我建议瓦片地图数据优先，而且很多瓦片地图都是工具下载的，量大，如果需要修改目录结构，会比较费事。相对的，修改url的代码明显就要简单很多。

url必须根据瓦片地图存放路径来编写，比如这个例子里面，4表示的是层级，12表示的是x，6表示的是y，我们的url参数就写成： {z}/{x}/{y}.png。如果瓦片地图都放在一个目录下，采用z-x-y.png的方式命名，那么url参数就得写成： {z}-{x}-{y}.png。

在上一节中，我们提到过，瓦片地图最主要的是要考虑瓦片的坐标系和分辨率，对于离线瓦片地图也同样成立。在使用之前，你必须要了解清楚这一点，方能正确加载和使用。

常见问题

Q: 为什么本地有离线瓦片地图，但在网页中没有显示地图？ A: 存在多种原因可能导致这个问题的出现，你需要逐一检查：

打开开发者工具，检查一下代码是否有错误提示。

检查一下HTTP请求的瓦片地址是否正确。

检查一下离线瓦片地图，是否包含了当前地图显示层级的瓦片地图。

检查一下离线瓦片地图的整个区域，是否包含了当前地图设置的中心点。

检查一下地图使用的坐标系，是否正确。 OpenLayers 3默认使用的是mercator，而不是wgs84。所以如果中心点想设置为经度30度，纬度30度，就需要显示设置projection: 'EPSG:4326'，或者使用ol.proj.transform([30, 30], 'EPSG:4326', 'EPSG:3857')进行转换。同一个坐标，不同的坐标系，位置可能截然不同。

Q: 为什么加载的地图有瓦片错位，拼接不上？ A: 检查一下离线瓦片地图的坐标系，是否和OpenLayers 3默认的坐标系不一致，如果不一致，请按照上一小节的处理方式处理。