OpenLayers学习笔记（一）—在线加载谷歌影像地图离线加载本地瓦片地图

实现根据在线离线判断加载地图， 在线加载⾕歌影响地图， 离线加载本地⽡⽚地图作者：Github：

html代码

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});