上一篇文章寫了 leaflet，本篇說一下openlayers。
第一步，下載：
https://github.com/openlayers/openlayers/releases/download/v6.2.1/v6.2.1-dist.zip
解壓後，我們只需要其中兩個文件ol.css，ol.js
第二步，下載瓦片，參考上篇文章，https://blog.csdn.net/netying/article/details/105187665
本文不再贅述。
第三步：編寫html文件
<html>
<head>
<link rel="stylesheet" href="./ol.css" type="text/css">
<style>
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
.map{height:100%px;width:100%;}
</style>
<script src="./ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var center=ol.proj.transform([110.5,29.5],'EPSG:4326','EPSG:3857');
var map=new ol.Map({view:new ol.View({center:center,zoom:10,minZoom:9,maxZoom:12}),target:'map'});
var offlineMapLayer=new ol.layer.Tile({source:new ol.source.XYZ({url:'./test/{z}/{x}/{y}.jpg'})});
map.addLayer(offlineMapLayer);
</script>
</body>
</html>
同樣，我們保存其爲index.html,保存在c:\offlinemaps目錄下，也就是與test目錄在同一級目錄下。
ol.css和ol.js兩個解壓縮後的文件也保存到index.html的同目錄下。
第四步：雙擊index.html，即可看到地圖成功加載！
