例子是基于OpenLayers-2.13,离线地图下载工具推荐OGCer,可以从这里下载,找了几个下载工具,这个还是比较不错的。
这个工具下载好离线地图后会自动生成一个基于openlayers发布的html文件,把地图范围等都计算好了,但这个版本是2.07的,我在此基础上做了修改,增加了一些功能。
不多说直接上代码了,都是js代码,拷贝过去直接可以用了,路径放在OpenLayers-2.13\examples目录下即可,相应的图片文件也需拷贝过去。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>OpenLayers Tiled Map Service Example</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; } body { margin: 1px; background: #fff; } #map { height: 99%; border: 1px solid #888; } </style> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map; var mapBounds = new OpenLayers.Bounds( 1.3172798200611E7,3400604.87623691,1.34309719074187E7,3576746.35051871); var mapMinZoom =8; var mapMaxZoom =13; OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; OpenLayers.Util.onImageLoadErrorColor = "transparent"; function init(){ var options = { controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.ScaleLine(), new OpenLayers.Control.OverviewMap() ], projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), units: "m", numZoomLevels:13, maxResolution: 156543.0339, maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508.3427892, 20037508.3427892) }; map = new OpenLayers.Map('map', options); var tmsoverlay = new OpenLayers.Layer.TMS( "OpenGSC", "",{ type: 'png', getURL: overlay_getTileURL, alpha: true, isBaseLayer: true, minResolution : 4.777314267158508, maxResolution : 611.4962261962891 }); if (OpenLayers.Util.alphaHack() == false) { tmsoverlay.setOpacity(1); } map.addLayers([tmsoverlay]); //var switcherControl = new OpenLayers.Control.LayerSwitcher(); //map.addControl(switcherControl); //switcherControl.maximizeControl(); map.zoomToExtent( mapBounds ); //map.addControl(new OpenLayers.Control.Scale()); //map.addControl(new OpenLayers.Control.PanZoomBar()); map.addControl(new OpenLayers.Control.MousePosition()); //map.addControl(new OpenLayers.Control.MouseDefaults()); //map.addControl(new OpenLayers.Control.KeyboardDefaults()); //map.setCenter(new OpenLayers.LonLat(120.18295,30.31787), 3); var lonLat = new OpenLayers.LonLat(120.18295,30.31787); //google地图需要转换坐标 lonLat.transform(map.displayProjection, map.getProjectionObject()); map.setCenter(lonLat, 4); // 注册map缩放事件 map.events.register("zoomend", map, onMapZoom); } function overlay_getTileURL(bounds) { var res = this.map.getResolution(); var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); var y = Math.round((this.maxExtent.top-bounds.top) / (res * this.tileSize.h)); var z = this.map.getZoom(); z=z+8; if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) { return this.url + z + "/" + y + "/" + x+ "." + this.type; } else { return ""; } } function onMapZoom(e){ //alert('zoom level:'+map.getZoom()); //alert('sclse:'+map.getScale()); } </script> </head> <body onload="init()"> <div id="map" class=""></div> </body> </html>