您的位置：首页 > 运维架构

Openlayers发布谷歌离线地图

2013-12-16 15:54 513 查看

例子是基于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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： openlayers gis开发离线地

相关文章推荐

新的分享

章节导航