openlayers 加载离线瓦片地图

使用【全能电子地图下载器】下载瓦片地图,网上一大堆,可能需要破解一下~

引入一下资源

    <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

实现代码

    var map = new ol.Map({
        target: 'map', //容器id
        view: new ol.View({
            center: ol.proj.fromLonLat([87.05000, 42.00033]),//设置中心点
            zoom: 10 //初始缩放比
        })
    });
    var offlineMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: './maptile/{z}/{x}/{y}.jpg' //maptile为下载的瓦片地图文件夹,它会自动识别
        })
    });
    map.addLayer(offlineMapLayer);//添加图层

成功如图：

还是挺简单的,记录一下,不太好找,总是查到一堆不符合的,hhh