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

用openlayer显示google地图

2011-06-22 15:51 323 查看
花了一天的时间,从google.ditu下载了地图数据,让后用在openlayer做前台进行显示,完美完成。除了数据不合法一切都好用,有空可以研究一下怎么生成数据。

<script type="text/javascript">
if (location.search == "") {
lon=120.363808;
lat=36.088506;
zoom=17;}
//http://ditu.google.cn/?ie=UTF8&ll=31.230344,121.472569&spn=0.015633,0.026436&z=15
//http://ditu.google.cn/maps?f=q&hl=zh-CN&geocode=&q=%E9%9D%92%E5%B2%9B&ie=UTF8&ll=36.088506,120.363808&spn=0.118745,0.211487&z=12&iwloc=addr
var PI = 3.14159265358979323846;
lon = lon * 20037508.34 / 180;
lat = Math.log (Math.tan ((90 + lat) * PI / 360)) / (PI / 180);
lat = lat * 20037508.34 / 180;
</script>
<script type="text/javascript" src="OpenLayers.js">
</script>

var map;
function get_imap_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 = 17 - this.map.getZoom();

//----------------------------------
//shanghai 109760 53556 qingdao 109344 51424 from coords.txt
//naming rule://map/1x/000/1x000000.png
var myBounds={left:109344,top:51424};//109344 51424
var myDir0=Math.pow(2,z);

x = Math.round (x - myBounds.left/myDir0 );
var myTileNum="000";
if(x>=0){
myTileNum=x.toString();
if(myTileNum.length==1)myTileNum="00"+myTileNum;
if(myTileNum.length==2)myTileNum="0"+myTileNum;
}
y =Math.round (y - myBounds.top/myDir0 );
var myTileDir="000";
if(y>=0){
myTileDir=y.toString();
if(myTileDir.length==1)myTileDir="00"+myTileDir;
if(myTileDir.length==2)myTileDir="0"+myTileDir;
}

var path = myDir0+"x/"
+ myTileDir + "/"
+ myDir0+"x" + myTileDir + myTileNum + "." + this.type;
if(x<0 || y<0)path="blank.gif";
var url = this.url;
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
//alert(url + path);
return url + path;
}

function init()
{
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.PanZoomBar()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels:19, maxResolution:156543, units:'meters', projection: "EPSG:41001"} );

googleAtHome = new OpenLayers.Layer.TMS(
"google@home",
"http://dev.openstreetmap.org/~ojw/Tiles/cycle.php/",
{type:'png', getURL: get_goo_url} );

myHome = new OpenLayers.Layer.TMS(
"My@home",
"http://localhost:8080/map/",
{type:'png', getURL: get_imap_url} );

//map.addLayers([layerThis, layerMultihost, layerTilesAtHome, layerFirefishy, layerSebastian, layerMaplint, layerCycleAtHome, layerMapnik, googleAtHome,myHome]);
map.addLayers([googleAtHome,myHome]);

map.setCenter (new OpenLayers.LonLat(lon, lat), zoom);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: