一份最简单的Mapbar地图源代码

发表于 2011/03/29

恩，我想大家都懂的，本页代码源自Mapbar的Api，研究了一下它的绘制地图的算法，其实上篇文章《抓取Mapbar地图切片的一个算法》就是根据Mapbar绘制地图的算法得来的，那么今天就分享一下Mapbar绘制地图的算法。在这之前，大家可以先看一下我制作的一个Demo：http://static.crossyou.cn/wordpress/media/2011/03/mapbar.html。

下面就是给力的源代码了，可能用到了一小点的jQuery。

var divId = 'map';var imgWidth  = 300;var imgHeight = 300;var imgExt= 'png';var centerpoint= '120.15689,35.96333';var point= centerpoint.split(',');var _centerLon= point[0];var _centerLat= point[1];var zoomlevel   = 8;var $map = $('#'+divId);//每层地图切片的文件夹名称var levelFolder= new Array('W','0','1','2','3','4','5','6','7','8','9','10','11','12','13','16');//每层地图切片所跨的经度数var cutImgLonRange= new Array(90,40,20,10,5,2,1,0.5,0.2,0.1,0.05,0.02,0.01,0.005,0.002,0.001);//每层地图切片所跨的维度数var cutImgLatRange= new Array(90*0.8,40*0.8,20*0.8,10*0.8,5*0.8,2*0.8,0.8,0.5*0.8,0.2*0.8,0.1*0.8,0.05*0.8,0.02*0.8,0.01*0.8,0.005*0.8,0.002*0.8,0.001*0.8);//地图区块大小 将不同区块的放在不同的文件夹下面进行管理var blockSize= new Array(10,10,10,10,10,10,10,10,10,10,50,50,50,50,50,50);//纬度的偏移var latOffset= new Array(0,0,0,0,0,0,0,0,75,0,0,-150,0,0,0,0);function drawMap(){var LatLon = coordOffsetDecrypt(_centerLon,_centerLat);//解密Mapbar坐标centerLon= LatLon[0];centerLat= LatLon[1];var mapwidth= $map.width();var mapheight= $map.height();var halfNum5clipX = Math.ceil(mapwidth/imgWidth/2);var halfNum5clipY = Math.ceil(mapheight/imgHeight/2);var _blockSize = blockSize[zoomlevel];var clipLonRange = cutImgLonRange[zoomlevel];var clipLatRange= cutImgLatRange[zoomlevel];var multiple  = 100000;clipNo5X=Math.floor((centerLon)/clipLonRange);clipNo5Y=Math.floor((centerLat)/clipLatRange);if(clipNo5X<0)clipNo5X+=1;var mapX=mapwidth/2-Math.round(((centerLon*multiple)%(clipLonRange*multiple))*imgWidth/(clipLonRange*multiple));if(centerLat>=0) {mapY=mapheight/2-imgHeight+Math.round(((centerLat*multiple)%(clipLatRange*multiple))*imgHeight/(clipLatRange*multiple));}else {mapY=mapheight/2+Math.round(((centerLat*multiple)%(clipLatRange*multiple))*imgHeight/(clipLatRange*multiple));}var clipXNum=(360/clipLonRange);rotationCosVal=1.0;rotationSinVal=0.0;var Clip = [];clipNo5X=Math.floor((centerLon)/clipLonRange);clipNo5Y=Math.floor((centerLat)/clipLatRange);if(clipNo5X<0)clipNo5X+=1;var mapX=mapwidth/2-Math.round(((centerLon*multiple)%(clipLonRange*multiple))*imgWidth/(clipLonRange*multiple));if(centerLat>=0) {mapY=mapheight/2-imgHeight+Math.round(((centerLat*multiple)%(clipLatRange*multiple))*imgHeight/(clipLatRange*multiple));}else {mapY=mapheight/2+Math.round(((centerLat*multiple)%(clipLatRange*multiple))*imgHeight/(clipLatRange*multiple));}$map.html('');// -- 真正给力的开始for (var _clipXNo = -halfNum5clipX - 1; _clipXNo <= halfNum5clipX; _clipXNo++) {for (var _clipYNo = -halfNum5clipY - 1; _clipYNo <= halfNum5clipY; _clipYNo++) {try {var clipXNo = parseInt(clipNo5X + _clipXNo);//地图横向切片序列号var clipYNo = parseInt(clipNo5Y + _clipYNo);clipXNo = (clipXNo) % clipXNumif (clipXNo >= (clipXNum / 2)) clipXNo -= clipXNum;if (clipXNo < (-clipXNum / 2)) clipXNo += clipXNum;var folderX = parseInt(Math.floor((clipXNo) / _blockSize));var folderY = parseInt(Math.floor((clipYNo) / _blockSize));if (folderX < 0) folderX += 1;if (folderY < 0) folderY += 1;var fileXNo = (clipXNo) - folderX * _blockSize;var fileYNo = (clipYNo) - folderY * _blockSize;var _strImgUrl = 'http://img.mapbar.com/maplite/mapbank/mapbar/' + levelFolder[zoomlevel] + '/';if (zoomlevel >= 14) _strImgUrl += folderX + "/";_strImgUrl += folderX + "_" + folderY + "/";_strImgUrl += fileXNo + "_" + fileYNo + "." + imgExt;var clipLeft = (_clipXNo * imgWidth) + parseInt(mapX);var clipTop = (-(_clipYNo * imgHeight) + parseInt(mapY));clipTop = clipTop + latOffset[zoomlevel];var isClearImgUrl = false;if ((clipLeft < -imgWidth || clipLeft > mapwidth || clipTop > mapheight || clipTop < -imgHeight)) isClearImgUrl = true;if (isClearImgUrl) continue;var clipId = ((zoomlevel).toString(16) + (clipNo5X + _clipXNo).toString(16) + 'l' + (clipNo5Y + _clipYNo).toString(16)).toLowerCase();if (_strImgUrl && _strImgUrl.indexOf("NaN") < 0) {if (Clip[clipId] == null) {Clip[clipId] = new Image();Clip[clipId].id = clipId;Clip[clipId].name = clipId;Clip[clipId].unselectable = "on";Clip[clipId].style.position = "absolute";Clip[clipId].style.MozUserSelect = "none";Clip[clipId].src = _strImgUrl;}var p2 = (clipLeft + imgWidth / 2 - mapwidth / 2) * rotationCosVal - (clipTop + imgHeight / 2 - mapheight / 2) * rotationSinVal + mapwidth / 2;var p5 = (clipLeft + imgWidth / 2 - mapwidth / 2) * rotationSinVal + (clipTop + imgHeight / 2 - mapheight / 2) * rotationCosVal + mapheight / 2;Clip[clipId].style.top = parseInt(p5 - imgHeight / 2) + "px";Clip[clipId].style.left = parseInt(p2 - imgWidth / 2) + "px";//var interval = parseInt($('#interval').val());$map.append(Clip[clipId]);}_strImgUrl = null;} catch (e) {throw (e);}}}}// The follow is two helper functions/** * 将真实地理坐标加密为Mapbar经纬度坐标 * * @param x 经度值 * @param y 维度值 * @returns [x,y] */function coordOffsetEncrypt(x,y){x = parseFloat(x)*100000%36000000;y = parseFloat(y)*100000%36000000;_X = parseInt(((Math.cos(y/100000))*(x/18000))+((Math.sin(x/100000))*(y/9000))+x);_Y = parseInt(((Math.sin(y/100000))*(x/18000))+((Math.cos(x/100000))*(y/9000))+y);return [_X/100000.0,_Y/100000.0];}/** * 将Mapbar经纬坐标解密为真实地理坐标 * * @param x 经度值 * @param y 维度值 * @returns [x,y] */function coordOffsetDecrypt(x,y){x = parseFloat(x)*100000%36000000;y = parseFloat(y)*100000%36000000;x1 = parseInt(-(((Math.cos(y/100000))*(x/18000))+((Math.sin(x/100000))*(y/9000)))+x);y1 = parseInt(-(((Math.sin(y/100000))*(x/18000))+((Math.cos(x/100000))*(y/9000)))+y);x2 = parseInt(-(((Math.cos(y1/100000))*(x1/18000))+((Math.sin(x1/100000))*(y1/9000)))+x+((x>0)?1:-1));y2 = parseInt(-(((Math.sin(y1/100000))*(x1/18000))+((Math.cos(x1/100000))*(y1/9000)))+y+((y>0)?1:-1));return [x2/100000.0,y2/100000.0];}

本代码不到200行，可谓是言简意赅，童叟无欺，欢迎拍砖。
《全文完》