首先先来看看效果：这个是谷歌卫星图
然后我们说说怎么实现的吧：
<!DOCTYPE html>
<html>
<head>
<title>离线瓦片</title>
<link rel="stylesheet" href="css/ol.css">
</head>
<body>
<div id="map" style="width: 100%;height: 800px;"></div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/ol.js"></script>
<script type="text/javascript">
var center = ol.proj.transform([112.233778,22.688963], 'EPSG:4326', 'EPSG:3857');//设置中心位置
//1、创建地图
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 1, //瓦片的层级-请根据自身需要
}),
target: 'map'
});
//2、添加一个使用离线瓦片地图的层
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'china(weixing)/googlemaps/satellite/{z}/{x}/{y}.jpg'//特别注意，这里的z-x-y的顺序，我因为这里找了好久的问题
})
});
//3、将瓦片层级添加到地图里面
map.addLayer(offlineMapLayer);
</script>这里的话因为离线瓦片太大，我就只传4层的瓦片，下面有需要的朋友可以把源码当下来看看
百度网盘地址：https://pan.baidu.com/s/166HX7AWVwRsESB7FwY_quQ 提取码：r8qm
下面来介绍下我使用的获得离线瓦片的工具 全能地图下载（破解版）