当前位置: 代码迷 >> Web前端 >> 百度map之三维map纠偏
  详细解决方案

百度map之三维map纠偏

热度:436   发布时间:2013-11-15 22:28:15.0
百度地图之三维地图纠偏

publicmap.js:

//function $g(id){
//	return document.getElementById(id);
//}
//function log(msg){
//	//$g('logDiv').innerHTML=msg;
//}
//地图切换前三位地图的缩放级别
var swbeforezoom=13;

var Baidu3dConfig={//baidu 3d 瓦片偏移
	tileShiftX:902,
	tileShiftY:1000,
	rNum:Math.sin(Math.PI/4),
	r1:(45/180)*Math.PI,
	r2:(45/180)*Math.PI,
	matchPoints:[{"j":118.989749,"w":30.639438,"x":174848,"y":112384},

{"j":118.988451,"w":30.640479,"x":173824,"y":112384}],//匹配点
	opoints:[{x:168884,y:88924},{x:173076,y:92796},{x:175508,y:95068},

{x:173892,y:85684},{x:181652,y:92084}],
	bpoints:[{x:117.917156, y:31.313391},{x:117.917326, y:31.315473},

{x:117.91579,y:31.319653}],
	bopoints:[{x:119.721676, y:30.924449},{x:120.169535, y:31.091835},{x:120.78182, 

y:31.594665}]
};

//坐标转换工具
//172032,98304
var CoorTools=function(bmap){
	this.matchPoints=Baidu3dConfig.matchPoints;//匹配点
	this.opoints=Baidu3dConfig.opoints;
	this.bpoints=Baidu3dConfig.bpoints;
	this.bopoints=Baidu3dConfig.bopoints;
	this.bmap=bmap;
	this.num=Baidu3dConfig.rNum;
	this.r1=Baidu3dConfig.r1;
	this.r2=Baidu3dConfig.r2;
};

CoorTools.prototype={
	test:function(){//测试
		if(this.bmap.getMapType()==BMAP_NORMAL_MAP){
			this.testo2b();
			this.testbo2b();
		}
		else{
			this.testo2bo();
			this.testb2bo();
		}
		this.testo2bo();
		this.testo2b();
		this.testb2bo();
		this.testbo2b();
	},
	testo2bo:function(){
		var mcp=this.matchPoints;
		var p=mcp[0];

		var pt=this.o2bo(p.x,p.y);

		var l = new BMap.Label('Hello,o2bo',{position:pt});
		l.setStyle({borderColor:'#0f0'});
        this.bmap.addOverlay(l);

		var points=this.opoints;
		for(var i=0;i<points.length;i++){
			pt=this.o2bo(points[i].x,points[i].y);
			var l = new BMap.Label('Hello,o2bo:'+i,{position:pt});
			l.setStyle({borderColor:'#0f0'});
			this.bmap.addOverlay(l);
		}
	},
	testo2b:function(){
		var mcp=this.matchPoints;
		var p=mcp[1];

		var pt=this.o2b(p.x,p.y);
		var l = new BMap.Label('Hello,o2b',{position:pt});
		l.setStyle({borderColor:'#0f0'});
        this.bmap.addOverlay(l);

		var points=this.opoints;
		for(var i=0;i<points.length;i++){
			pt=this.o2b(points[i].x,points[i].y);
			var l = new BMap.Label('Hello,o2b:'+i,{position:pt});
			l.setStyle({borderColor:'#0f0'});
			this.bmap.addOverlay(l);
		}
	},
	testb2bo:function(){//测试
		var mcp=this.matchPoints;
		var p=mcp[1];

		var pt=this.b2bo(p.j,p.w);
		var l = new BMap.Label('Hello,b2bo',{position:pt});
        this.bmap.addOverlay(l);
		this.bmap.setCenter(pt);

		var p=this.bo2b(pt.lng,pt.lat);
		log(p.lng+','+p.lat);

		var points=this.bpoints;
		for(var i=0;i<points.length;i++){
			pt=this.b2bo(points[i].x,points[i].y);
			var l = new BMap.Label('Hello,b2bo:'+i,{position:pt});
			this.bmap.addOverlay(l);
		}
	},
	testbo2b:function(){
		var points=this.bopoints;
		for(var i=0;i<points.length;i++){
			pt=this.bo2b(points[i].x,points[i].y);
			if(i==0)this.bmap.setCenter(pt);
			var l = new BMap.Label('Hello,bo2b:'+i,{position:pt});
			l.setStyle({borderColor:'#00f'});
			this.bmap.addOverlay(l);
		}
	},
	coor2Baidu3D:function(pt){//baidu 2d 转 baidu 3d
		var p=this.b2bo(pt.lng,pt.lat);
		return p;
	},
	coor2Baidu:function(pt){//baidu 3d 转 baidu 2d
		var p=this.bo2b(pt.lng,pt.lat);
		return p;
	},
	o2b:function(x,y){
		var bom=this.o2bom(x,y);
		var mcp=this.matchPoints;
		var p1=this.fromMap(mcp[0].x,mcp[0].y);
		var p2=this.fromMap(x,y);
		var sx=p2.x-p1.x;
		var sy=p2.y-p1.y;
		var params=this.getParams();
		//alert(params.dx+','+params.dy);
		var pbm1=this.tomc(mcp[0].j,mcp[0].w);
		var mx=sx*params.dx+pbm1.lng;
		var my=pbm1.lat-sy*params.dy;

		var result=this.frommc(mx,my);
		//alert(result.lng+','+result.lat);
		return result;
	},
	getParams:function(){
		var mcp=this.matchPoints;
		if(!this.parse){
			var p1=this.fromMap(mcp[0].x,mcp[0].y);
			var p2=this.fromMap(mcp[1].x,mcp[1].y);
			var pbm1=this.tomc(mcp[0].j,mcp[0].w);
			var pbm2=this.tomc(mcp[1].j,mcp[1].w);
			this.parse=true;
		}
		var p1=this.fromMap(mcp[0].x,mcp[0].y);
		var p2=this.fromMap(mcp[1].x,mcp[1].y);
		var pbm1=this.tomc(mcp[0].j,mcp[0].w);
		var pbm2=this.tomc(mcp[1].j,mcp[1].w);
		var params={dx:Math.abs((pbm2.lng-pbm1.lng)/(p2.x-p1.x)),dy:Math.abs

((pbm2.lat-pbm1.lat)/(p2.y-p1.y))};
		return params;
	},
	b2bo:function(lng,lat){
		var params=this.getParams();
		var mcp=this.matchPoints;
		var pbm1=this.tomc(mcp[0].j,mcp[0].w);
		var pbm2=this.tomc(lng,lat);
		var sx=pbm2.lng-pbm1.lng;
		var sy=pbm2.lat-pbm1.lat;
		var pbom1=this.o2bom(mcp[0].x,mcp[0].y);
		var zz=Math.pow(2, 5);
		var _pbom1=this.fromBMap(pbom1.lng,pbom1.lat);
		var _mx=sx/params.dx*zz+_pbom1.x;
		var _my=sy/params.dy*zz+_pbom1.y;
		var _pbom=this.toBMap(_mx,_my);
		var pbo=this.frommc(_pbom.x,_pbom.y);

		return pbo;
	},
	bo2b:function(lng,lat){
		var params=this.getParams();
		var mcp=this.matchPoints;
		var pbom1=this.o2bom(mcp[0].x,mcp[0].y);
		var pbom2=this.tomc(lng,lat);
		var _pbom1=this.fromBMap(pbom1.lng,pbom1.lat);
		var _pbom2=this.fromBMap(pbom2.lng,pbom2.lat);
		var sx=_pbom2.x - _pbom1.x;
		var sy=_pbom2.y - _pbom1.y;
		var zz=Math.pow(2, 5);
		var pbm1=this.tomc(mcp[0].j,mcp[0].w);
		var mx=sx*params.dx/zz+pbm1.lng;
		var my=sy*params.dy/zz+pbm1.lat;
		var pbom=this.frommc(mx,my);

		return pbom;
	},
	o2bo:function(x,y){
		var bom=this.o2bom(x,y);
		var o=this.frommc(bom.lng,bom.lat);
		return o;
	},
	o2bom:function(x,y){
		var tx=Baidu3dConfig.tileShiftX;
		var ty=Baidu3dConfig.tileShiftY;
		var zz=Math.pow(2, 5);
		var mx=(tx*256+x)*zz;
		var my=(ty*256-y)*zz;
		var o=new BMap.Point(mx,my);
		return o;
	},
	tomc:function(lng,lat){
		var o=this.bmap.getMapType().getProjection().lngLatToMercator(new 

BMap.Point(lng,lat));
		//alert(o.lng+','+o.lat);
		return o;
	},
	frommc:function(mx,my){
		var o=this.bmap.getMapType().getProjection().mercatorToLngLat(new 

BMap.Point(mx,my));
		return o;
	},
	fromBMap:function(x,y){
		var r1=this.r1;
		var r2=this.r2;
		var cos=Math.cos(r2);
		var sin=Math.sin(r2);
		y/=Math.sin(r1);
		x1=x*cos-y*sin;
		y1=x*sin+y*cos;

		return {x:x1,y:y1};
	},
	toBMap:function(x,y){
		var r1=this.r1;
		var r2=this.r2;
		var cos=Math.cos(r2);
		var sin=Math.sin(r2);
		//y1*sin+x1*cos=x*sin*sin+x*cos*cos;
		//y1*cos-x1*sin=y*cos*cos+y*sin*sin;
		var x1=(y*sin+x*cos)/(sin*sin+cos*cos);
		var y1=(y*cos-x*sin)/(cos*cos+sin*sin)*Math.sin(r1);

		return {x:x1,y:y1};
	},
	fromMap:function(x,y){
		var r1=this.r1;
		var r2=this.r2;
		var cos=Math.cos(r2);
		var sin=Math.sin(r2);
		y/=Math.sin(r1);
		x1=x*cos+y*sin;
		y1=-x*sin+y*cos;

		return {x:x1,y:y1};
	},
	toMap:function(x,y){
		var r1=this.r1;
		var r2=this.r2;
		var cos=Math.cos(r2);
		var sin=Math.sin(r2);
		//x1*cos-y1*sin=x*cos*cos+x*sin*sin;
		//x1*sin+y1*cos=y*sin*sin+y*cos*cos;
		var x1=(x*cos-y*sin)/(cos*cos+sin*sin);
		var y1=(x*sin-y*cos)/(sin*sin+cos*cos)*Math.sin(r1);

		return {x:x1,y:y1};
	},
	getZoomUnits:function(){
		var z=this.bmap.getZoom();
		return Math.pow(2, (18 - z));
	}
};

//var BBMap = BMap||self.parent.frames["ifdivmap"].BMap;

function initMap(){
	var map = new BMap.Map("mapDiv");            // 创建Map实例
	var typeOpts = {
			anchor:BMAP_ANCHOR_TOP_RIGHT,
			mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]
	};
	map.addControl(new BMap.MapTypeControl(typeOpts));
	map.addControl(new BMap.NavigationControl());//地图控制插件,该插件可以控制地图的

位置地图的显示比例   
	map.addControl(new BMap.ScaleControl());//显示在地图下方,告诉你地图上1cm对应的真

实距离
	map.enableScrollWheelZoom();   
	map.setDefaultCursor("default");   
    var cpoint = new BMap.Point(118.988451, 30.640479);    // 创建点坐标
    map.centerAndZoom(cpoint,18); // 初始化地图,设置中心点坐标和地图级别。
	var tileLayer = new BMap.TileLayer();
	//var tilesPath = "http://localhost:80";
	tileLayer.getTilesUrl = function(tileCoord, zoom) {
		var x = tileCoord.x;
		var y = tileCoord.y;
		//log(zoom);
		//return tilesPath+'/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
		var zz=Math.pow(2,14-zoom-1);
		var tsx=Baidu3dConfig.tileShiftX;
		var tsy=Baidu3dConfig.tileShiftY;
		var url= tilesPath+'/photolevel/3/lv'+(14-zoom)+'/'+(x-Math.floor

(tsx/zz))+','+(Math.floor(tsy/zz)-y-1)+'.jpg';
		//log(x+','+y+','+zoom+';'+url);

		return url;
	};
	
	var curzoom="";
	var curcenter="";
	$('#sanwei').click(function() {
		var tempzoom=map.getZoom();
		curzoom=tempzoom;
		var tempcenter=map.getCenter();
		curcenter=tempcenter;
		//alert(tempzoom);
		var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 10, maxZoom: 

13});
		map.setMapType(MyMap);
		//var p22 = new BMap.Point(108.978105, 34.346291);
		//var cvt=new CoorTools(map);
		//var p221 = cvt.coor2Baidu3D(p22);
		//map.centerAndZoom(p221, 12);
	});
	
	map.addEventListener('maptypechange',function(e) {
		
		var mapTypeName=map.getMapType()._name;
		//var p22 = new BMap.Point(108.978105, 34.346291);
		//var p22=map.getCenter();
		var cvt=new CoorTools(map);
		if(mapTypeName=="MyMap"){
			for(var i=0;i<zoom2darr.length;i++){
				if(curzoom==zoom2darr[i]){
					curzoom=zoom3darr[i];
					break;
				}
			}
			var p221 = cvt.coor2Baidu3D(curcenter);
			map.centerAndZoom(p221,curzoom);
			//点
			marker2DTo3D(compmarkerarr1);
			marker2DTo3D(compmarkerarr2);
			marker2DTo3D(compmarkerarr3);
			//线
			polygon2DTo3D(comppolyline);
			//面
			polygon2DTo3D(comppolygon);
			//区域
			polygon2DTo3D(gridareaarr);
			label2DTo3D(gridlabel);
			vertflag=1;
		}else{
			curzoom=map.getZoom();
			curcenter=map.getCenter();
			var p221 = cvt.coor2Baidu(curcenter);
			if(vertflag==1){
				for(var i=0;i<zoom3darr.length;i++){
					if(curzoom==zoom3darr[i]){
						curzoom=zoom2darr[i];
						break;
					}
				}
				map.centerAndZoom(p221,curzoom);
				//点
				marker3DTo2D(compmarkerarr1);
				marker3DTo2D(compmarkerarr2);
				marker3DTo2D(compmarkerarr3);
				//线
				polygon3DTo2D(comppolyline);
				//面
				polygon3DTo2D(comppolygon);
				//区域
				polygon3DTo2D(gridareaarr);
				label3DTo2D(gridlabel);
			}
			vertflag=0;
		}
	});
	bmap=map;
	
}

//统一封装函数------------------------------------------------------------------
//marker二维到三维
function marker2DTo3D(markerarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<markerarr.length;i++){
		var mymarker=markerarr[i];
		var oldpoint=mymarker.getPosition();
		var newpoint=cvt.coor2Baidu3D(oldpoint);
		mymarker.setPosition(newpoint);
	}
}

//marker三维到二维
function marker3DTo2D(markerarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<markerarr.length;i++){
		var mymarker=markerarr[i];
		var oldpoint=mymarker.getPosition();
		var newpoint=cvt.coor2Baidu(oldpoint);
		mymarker.setPosition(newpoint);
	}
}

//label二维到三维
function label2DTo3D(labelarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<labelarr.length;i++){
		var mylabel=labelarr[i];
		var oldpoint=mylabel.getPosition();
		var newpoint=cvt.coor2Baidu3D(oldpoint);
		mylabel.setPosition(newpoint);
	}
}

//label三维到二维
function label3DTo2D(labelarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<labelarr.length;i++){
		var mylabel=labelarr[i];
		var oldpoint=mylabel.getPosition();
		var newpoint=cvt.coor2Baidu(oldpoint);
		mylabel.setPosition(newpoint);
	}
}

//polygon二维到三维
function polygon2DTo3D(polygonarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<polygonarr.length;i++){
		var npointarr=[];
		var mypolygon=polygonarr[i];
		var oldpath=mypolygon.getPath();
		for(var j=0;j<oldpath.length;j++){
			var otherpoint=oldpath[j];
			var newotherpoint=cvt.coor2Baidu3D(otherpoint);
			npointarr.push(newotherpoint);
		}
		mypolygon.setPath(npointarr);
	}
}

//polygon三维到二维
function polygon3DTo2D(polygonarr){
	var cvt=new CoorTools(bmap);
	for(var i=0;i<polygonarr.length;i++){
		var npointarr=[];
		var mypolygon=polygonarr[i];
		var oldpath=mypolygon.getPath();
		for(var j=0;j<oldpath.length;j++){
			var otherpoint=oldpath[j];
			var newotherpoint=cvt.coor2Baidu(otherpoint);
			npointarr.push(newotherpoint);
		}
		mypolygon.setPath(npointarr);
	}
}
//结束-------------------------------------------------------------------------


//测试
function test(){
	var cvt=new CoorTools(bmap);
	cvt.test();
	//testLine();
}

var points=[new BMap.Point(108.978105, 34.346291),new BMap.Point(108.977961, 

34.335799),new BMap.Point(109.002179, 34.335202)];
function test_2d(){
	testLine(points);
}
function test_3d(){
	var cvt=new CoorTools(bmap);
	var newPoints=[];
	for(var i=0;i<points.length;i++){
		newPoints[i]=cvt.coor2Baidu3D(points[i]);
	}
	testLine(newPoints);
}


function testLine(points){
	var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:6, 

strokeOpacity:0.5});
	bmap.addOverlay(polyline);
	//bmap.setCenter(points[0]);
	//log(points[0].lng+','+points[0].lat);

	var myIcon = new BMap.Icon("http://localhost:7080/xbmap/1.png", new BMap.Size(32, 

70), {    //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准

坐标点。
	  });
	var carMk = new BMap.Marker(points[0],{icon:myIcon});
	bmap.addOverlay(carMk);
	i=0;
	var proj = bmap.getMapType().getProjection();
	function resetMkPoint(i){
		if(points[i]&&points[i].lng) {
			carMk.setPosition(points[i]);
			var cvt=new CoorTools(bmap);
			var tmpP = cvt.coor2Baidu(proj.mercatorToLngLat(points[i]))
			bmap.setCenter(tmpP);
			if(i < points.length){
				setTimeout(function(){
					i++;
					resetMkPoint(i);
				},800);
			}
		}
	}
	setTimeout(function(){
		resetMkPoint(0);
	},1000)
}

?

  相关解决方案