openlayers发布离线地图

     最近的一个项目需要在局域网内做到地图效果,在网上搜素以后,决定使用openlayers加离线瓦片地图来做。

    下面代码是摸索了几天以后做出的例子,当然因为了解不深,只是简单做了一个效果,没用到太多的组件和方法,还希望精通的大神不要笑话。

   代码:

<?xml version="1.0" encoding="gbk"?>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>  
    <style>  
        html,body {  
            height: 99%;  
            width: 99%;  
        }  
        #map {  
            width: 512px;  
            height: 512px;  
            border: 1px solid black;  
        }     
                    /* General settings */  
            body {  
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
                font-size: small;  
            }  
            /* Toolbar styles */  
            #toolbar {  
                position: relative;  
                padding-bottom: 0.5em;   
                 
            }  
    </style>  
    <script src="OpenLayers.js"></script>  
    <script type="text/javascript">
	

	//地图基础配置
	var options = {
		controls : [
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.MousePosition({"displayProjection":"EPSG:4326"})
		],
		//地图的范围,通过投影方式和经纬度计算
		restrictedExtent: new OpenLayers.Bounds(12522438.610693185, 4382976.287599767, 13464142.503343074, 5010371.265871971) ,
		//地图上的1-12的分辨率,1像素=?米
        resolutions: [78271.516953125,  
                    39135.7584765625,  
                    19567.87923828125,  
                    9783.939619140625,  
                    4891.9698095703125,  
                    2445.9849047851562,  
                    1222.9924523925781,  
                    611.4962261962891,  
                    305.74811309814453,  
                    152.87405654907226,  
                    76.43702827453613,  
                    38.218514137268066],
		maxResolution : 'auto',
		//坐标投影方式
		projection: "EPSG:900913", 
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
		//单位,米,另外还有度
		units : 'm',
		//缩放级别
		numZoomLevels:11
	};
        var map;
		var markers;
        function init(){  
			//新建地图对象
            map = new OpenLayers.Map('map',options);  
			//新建图层
			var tmsoverlay = new OpenLayers.Layer.TMS( "test", "",{ type: 'png',getURL:			   get_my_url,alpha:true,isBaseLayer: true});
			map.addLayer(tmsoverlay);
			map.addControl(new OpenLayers.Control.Navigation());
			var lonLat = new OpenLayers.LonLat(117.21716, 39.12793);
			lonLat.transform(map.displayProjection, map.getProjectionObject()); 
			map.setCenter(lonLat, 7);
			markers = new OpenLayers.Layer.Markers( "Markers" );  
			map.addLayer(markers);
			//设置地图最小缩放级别为7级,小于7时放大为7
			map.events.register("zoomend", this, function (e) {  
            if (map.getZoom() < 7){
                map.setCenter(map.getCenter(),7);  
            }  
        });
	//通过经纬度的范围和投影方式计算出restrictedExtent的值
	var lonLat1 = new OpenLayers.LonLat(112.49579,41.50446);
	lonLat1.transform(map.displayProjection, map.getProjectionObject()); 
	var lonLat2 = new OpenLayers.LonLat(121.63367,36.59568);
	lonLat2.transform(map.displayProjection, map.getProjectionObject()); 
	var bounds = new OpenLayers.Bounds();
	bounds.extend(lonLat1);
	bounds.extend(lonLat2);
	console.log(bounds);
		   
		}
		//20037508.3427892是最大的显示范围
		function get_my_url (bounds) {
			var res = this.map.getResolution();
			var x = Math.round ((bounds.left + 20037508.3427892) / (res * this.tileSize.w));
			var y = Math.round ((20037508.3427892 - bounds.top) / (res * this.tileSize.h));
			var z = this.map.getZoom() + 1;
			var path = "data/" + z + "/" + x + "/" + y + "." + this.type;
			return this.url + path;
		}
		//添加标注
		var marker1;  
        function addMarker(){  
            var url = 'Z6.png';  
            var sz = new OpenLayers.Size(10, 10);  //尺寸大小  
            var calculateOffset = function(size) {  
                 return new OpenLayers.Pixel(-(size.w/2), -size.h);  
            };  
            var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);  
            var markerLonlat = new OpenLayers.LonLat(117.18843,39.12154);
			//坐标的投影变换
			markerLonlat.transform(map.displayProjection, map.getProjectionObject()); 
            marker1 = new OpenLayers.Marker(markerLonlat, icon);  
            markers.addMarker(marker1);               
        }  
         function removeMarker() {
			//移除单个标注
            //markers.removeMarker(marker1);  
			//移除全部标注,即删掉标注图层,并重新初始化
			map.removeLayer(markers);
			markers = new OpenLayers.Layer.Markers( "Markers" ); 
			map.addLayer(markers);
         }  
        </script>  
    </head>  
    <body  onload="init()">  
	<input type="button" value="显示标注" onclick="addMarker()"/>  
            <input type="button" value="移除标注" onclick="removeMarker()"/>  
        <div id='map'></div>  
    </body>  
</html>

 附件是一个简单的离线地图下载器,当然也可以去网上找,有很多。

然后可以用经纬度的范围推算出实际的restrictedExtent的值,bounds参数为(left,bottom,right,top)。

最后修改相应路径即可。

相关推荐