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

openLayers TMS加载谷歌地图瓦片

2014-04-25 16:01 225 查看
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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: