谷歌地图部署
说明:使用地图下载工具下载的谷歌离线地图大致如下结构,使用合适的WEB服务器发布地图服务。
使用Openlayers 3调用地图服务
说明:这里使用ol.source.XYZ(更多语法请参考 这儿.)来调用地图服务。
//定义一个地图调用函数var BaseMapLayer = function(options) {var mapExtent = [179.92574, 74.87274, -77.24223, -45.44708];var layer = new ol.layer.Tile({extent: ol.proj.transformExtent(mapExtent, "EPSG:4326", "EPSG:3857"),source: new ol.source.XYZ({url: options.url,tilePixelRatio: 1,minZoom:2,maxZoom:12})});return layer;};
说明:使用ol. View创建负责地图的中心点,放大,投影之类的设置。
//定义视图var view = new ol.View({center: ol.proj.fromLonLat([95.23, 35.33]),zoom: 4,minZoom: 2,maxZoom: 12});
说明:此处定义影响地图以及地形地图的服务地址,lebel为地图上的文字。
//定义地图服务URLvar sateliteopt = {url: defautopt.maphost + 'sate/satellite_en/{z}/{x}/{y}.jpg'},satelitelebel = {url: defautopt.maphost + 'sate/overlay_s/{z}/{x}/{y}.png'},roadmapopt = {url: defautopt.maphost + 'terrain/terrain/{z}/{x}/{y}.jpg'},roadlebel = {url: defautopt.maphost + 'terrain/overlay/{z}/{x}/{y}.png'};
说明:此处使用ol.layer.Group创建图层组。
//影像地图组var sate = new ol.layer.Group({layers: [new BaseMapLayer(sateliteopt),new BaseMapLayer(satelitelebel)]});//地形图层组var road = new ol.layer.Group({layers: [new BaseMapLayer(roadmapopt),new BaseMapLayer(roadlebel)]});
说明:此处使用ol.Map创建地图。
//创建地图var map = new ol.Map({view: view,layers: [sate, road],target: 'map'});
HTML页面结构
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>openlayers3调用谷歌离线地图</title><link rel="stylesheet" href="libs/openlayers3/ol.css" /><script type="text/javascript" src="libs/openlayers3/ol.js"></script></head><body><div id="map"></div><script>/* 此处为上面分开所述的javascript相关内容。*/</script></body></html>
说明:访问页面效果图如下: