OpenLayers學習筆記（一）—在線加載谷歌影像地圖&離線加載本地瓦片地圖

實現根據在線離線判斷加載地圖， 在線加載谷歌影響地圖， 離線加載本地瓦片地圖

做者： 狐狸家的魚

Github： 八至

html代碼

<div id="map" tabindex="0" class="map"></div>

tabindex="0"是爲了啓動鍵盤事件。

js代碼

//地圖中心點
var center = ol.proj.transform([110.06667, 14.66667], 'EPSG:4326', 'EPSG:3857');
//矢量圖層源
var vectorSource = new ol.source.Vector({
    wrapX: false
});

//矢量圖層
var pointLayer = new ol.layer.Vector({
    source: vectorSource
});
//地圖視圖
var view;
var rootLayer;
//
if (window.navigator.onLine == true) {
    console.log('online');
    view = new ol.View({
        center: center,
        zoom: 4,
        minZoom: 3,
        maxZoom: 15,
    });
    rootLayer = new ol.layer.Tile({
        source: new ol.source.TileImage({
            url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G'
        }) //加載谷歌影像地圖
    });
    
} else {
    console.log('offline');
    view = new ol.View({
        center: center,
        zoom: 4,
        minZoom: 3,
        maxZoom: 8,
    });
    //地圖圖層
    rootLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'Map_new/{z}/{x}/{y}.png', //加載本地地圖
            wrapX: false
        })
    });
}
// //建立地圖
var map = new ol.Map({
    logo: false, //不顯示openlayers的logo
    //添加圖層
    layers: [rootLayer, pointLayer],
    renderer: 'canvas',
    target: 'map',
    //添加視圖
    view: view
});