其实离线瓦片地图和在线瓦片地图是一样的原理,都是瓦片。只是离线瓦片地图的存取方式,是由开发者自己来定义的,而在线瓦片地图则不一定。在不理解原理的情况下,很多人拥有了离线瓦片,却不知道如何加载,所以这里单独列出一个小节来讲解。
示例的瓦片就只有一张。如果放大或者缩小,就可能看不到地图瓦片了。先看代码:
<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。
在上一节中,我们提到过,瓦片地图最主要的是要考虑瓦片的瓦片坐标系和分辨率,对于离线瓦片地图也同样成立。在使用之前,你必须要了解清楚这一点,才能正确加载和使用。