openLayers TMS加载谷歌地图瓦片

openLayers  TMS中加载谷歌瓦片  经纬坐标(LonLat) 和投影坐标系的转换


http://www.cnblogs.com/sailheart/archive/2011/03/11/1981536.html  读读这篇文章



<script type="text/javascript">  
	     
	  
	   /**
	   		openLayer根据TMS加载谷歌地图瓦片
	   		(1)先去下载加载谷歌地图瓦片,这样的软件有(水经注,google Map downloder,openLayersz中国官网提供的开源的软件)
	   		(2)把下载的瓦片放到本地服务器上,最重要的是根据URL找到该瓦片
	   
	   **/
	   
	   
	   
	   	var map, layer; //complex object of type OpenLayers.Map 
	    function init() {  
	  
	        map = new OpenLayers.Map("map", 
	        		{
		        	   maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892), //地图表示最大范围(左, 下, 右, 上) ,可以作为默认值
		        	   numZoomLevels:16,  //地图缩放的最大级别(根据自己的实际需求设置)
		        	   maxResolution : 156543.0339,   //地图缩最大像素,(默认)
		        	   units:'m', //地图单位米(默认)
		        	   projection: "EPSG:900913",//采用投影坐标系(默认)
		        	   displayProjection: new OpenLayers.Projection("EPSG:4326")//采用经纬度坐标系(默认)
		        	 } 
	        );  
	  
	        layer = new OpenLayers.Layer.TMS("Name",  
	                "http://127.0.0.1:9080/openLayers/", {  
	                    'type' : 'png',  
	                    'getURL' : get_my_url  
	                });  
	  
	        map.addLayer(layer);  
	  
	        map.addControl(new OpenLayers.Control.Scale());  
	        map.addControl(new OpenLayers.Control.MousePosition());  
	        map.addControl(new OpenLayers.Control.LayerSwitcher());  
	  
	        
	        //设置地图的显示的中间位置及缩放级别
	        var lonLat = new OpenLayers.LonLat(116.20101928710937,39.768436410838426);  //下载瓦片的坐标
	        lonLat.transform(map.displayProjection, map.getProjectionObject());  //经纬度坐标和投影坐标的转换
	        map.setCenter(lonLat,10);   //设置地图的显示的中间位置及缩放级别
	        
	    }  
	  
	    function get_my_url(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();  
	  
	      
	        
	        //本地服务器下瓦片的文件目录已经文件名(URL)
	        var path = "/openLayersTest/data/ol/bj/" + z + "/" + x +"/" + y+"." + this.type;  
	        var url = this.url;  
	        if (url instanceof Array) {  
	            url = this.selectUrl(path, url);  
	        }  
	        return url + path;  
	  
	    }  
	</script>  


OpenLayers本身不支持直接加载百度地图,因为百度地图的API使用了一些特殊的加密方式,无法直接在OpenLayers中实现。不过,您可以通过使用第三方插件或者自己编写代码的方式,在OpenLayers加载百度地图。以下是两种常用的加载百度地图的方法: 1. 使用第三方插件 有一些第三方插件可以让OpenLayers支持加载百度地图,例如ol-ext(https://viglino.github.io/ol-ext/),这个插件可以让OpenLayers支持加载百度地图、高德地图等。 2. 自己编写代码 您也可以自己编写代码来实现在OpenLayers加载百度地图。具体来说,您可以使用百度地图API获取瓦片图层,并将其添加到OpenLayers的地图上。代码实现可以参考以下示例: ``` // 创建百度地图图层 var baiduLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileUrlFunction: function(tileCoord) { var x = tileCoord[1]; var y = tileCoord[2]; var z = tileCoord[0]; var url = "http://online{0-3}.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&scaler=1"; return url; }, projection: 'EPSG:3857' }) }); // 创建OpenLayers地图对象 var map = new ol.Map({ target: 'map', layers: [baiduLayer], view: new ol.View({ center: ol.proj.fromLonLat([116.3975, 39.9087]), zoom: 10 }) }); ``` 需要注意的是,上述示例中的瓦片图层URL地址中的“online{0-3}”是百度地图提供的多个服务器地址,需要根据实际情况选择使用哪个地址。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值