前端地图瓦片的拼接

[liujiusheng]

搜索关键词：瓦片拼接

resolution=scale*inch2centimeter/dpi。其中scale是地图比例尺，inch2centimeter为英寸转厘米的参数，dpi为1英寸所包含的像素。

inch2centimeter:
英寸转厘米的国际参数是：2.5399998，当利用天地图或者其他第三方非AGS切图的地图时，都可使用这个参数值。
但是，当用AGS所切之图时，此参数变成了：2.54000508001016。这可能是AGS自己内部定义的一个转换参数。
根据参数的不同，当我们换算经纬度坐标系下的比例尺时，要根据不同的参数来进行转换。当是AGS地图时，则为：resolution*96/2.54000508001016。

Scale：
表示的是比例尺，即地图上的一厘米代表着实际上的多少厘米。例如地图上1厘米代表实地距离500千米，可写成：1 ∶ 50,000,000或写成：1/50,000,000。

dpi:
一般为96。Windows系统默认是96dpi，Apple系统默认是72dpi。

Resolution：
表示的是分辨率。Resolution 的实际含义代表当前地图范围内，1像素代表多少地图单位（X地图单位/像素），地图单位取决于数据本身的空间参考。可见Resolution跟 dpi有关系（dpi代表每英寸的像素数），跟地图的单位也有关系。

1英寸=2.54厘米；
1英寸=96像素；

EPSG4326：Web墨卡托投影后的平面地图，但仍然使用WGS84的经度、纬度表示坐标。WKID=4326属于地理坐标系
EPSG3857（EPSG:900913）：Web墨卡托投影后的平面地图，坐标单位为米。WKID=102100，属于投影坐标系

一个canvas不能同时实例化为2d和webgl两种模式，所以mapbox中的影像图应该是在2d模式下绘制的，与webgl分离了，所以在导出时不能导出影像。

参考：http://blog.csdn.net/wd4java/article/details/44956799
http://blog.csdn.net/wd4java/article/details/44955293
http://www.cnblogs.com/fwc1994/p/6519229.html

听说这段代码可以用？

$(document).ready(function(){
    moveX = 0;
    moveY = 0;
    TitlesArry=[];
    //设置将要现实的地图中心点
    centerGeoPoint={
        x:116.337737,
        y:39.912465
    };
    centerGeoPoint=lonlatTomercator(centerGeoPoint);
    level = 5;
    //当前窗口显示的范围
    minX=centerGeoPoint.x-(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
    maxX=centerGeoPoint.x+(MapConfig.Resolution[level]*MapConfig.ViewWidth/2);
    minY=centerGeoPoint.y-(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
    maxY=centerGeoPoint.y+(MapConfig.Resolution[level]*MapConfig.ViewHeight/2);
    //左上角开始的行列号
    leftTopTitleRow = Math.floor(Math.abs(maxY-MapConfig.FullExtent.ymax)/MapConfig.Resolution[level]/MapConfig.TitlePix);
    leftTopTitleCol = Math.floor(Math.abs(minX-MapConfig.FullExtent.xmin)/MapConfig.Resolution[level]/MapConfig.TitlePix);
    //实际地理范围
    realMinX = MapConfig.FullExtent.xmin+leftTopTitleCol*MapConfig.TitlePix*MapConfig.Resolution[level];
    realMaxY = MapConfig.FullExtent.ymax-leftTopTitleRow*MapConfig.TitlePix*MapConfig.Resolution[level];

    //计算左上角偏移像素
    offSetX = (realMinX-minX)/MapConfig.Resolution[level];
    offSetY = (maxY-realMaxY)/MapConfig.Resolution[level];
    //计算瓦片个数
    xClipNum = Math.ceil((MapConfig.ViewHeight+Math.abs(offSetY))/MapConfig.TitlePix);
    yClipNum = Math.ceil((MapConfig.ViewWidth+Math.abs(offSetX))/MapConfig.TitlePix);
    //右下角行列号
    rightBottomTitleRow = leftTopTitleRow+xClipNum-1;
    rightBottomTitleCol = leftTopTitleCol+yClipNum-1;
    realMaxX = MapConfig.FullExtent.xmin+(rightBottomTitleCol+1)*MapConfig.TitlePix*MapConfig.Resolution[level];
    realMinY = MapConfig.FullExtent.ymax-(rightBottomTitleRow+1)*MapConfig.TitlePix*MapConfig.Resolution[level];
    var mapcv = document.getElementById("mapcv");
    var myctx = mapcv.getContext("2d");
    for(var i=0;i<xClipNum;i++){
        for(var j=0;j<yClipNum;j++){
            var beauty = new Image();
            beauty.src = MapConfig.RootDir+level+"/"+(leftTopTitleRow+i)+"/"+(leftTopTitleCol+j)+".jpg";
            var TitleImg={
                img:null,
                x:0,
                y:0
            };
            TitleImg.img=beauty;
            TitleImg.x=offSetX+(j*MapConfig.TitlePix);
            TitleImg.y=offSetY+(i*MapConfig.TitlePix);
            TitlesArry.push(TitleImg);
            myctx.drawImage(TitleImg.img, TitleImg.x, TitleImg.y);
        }
    }
});
function lonlatTomercator(lonlat) {
    var mercator={x:0,y:0};
    var x = lonlat.x *20037508.34/180;
    var y = Math.log(Math.tan((90+lonlat.y)*Math.PI/360))/(Math.PI/180);
    y = y *20037508.34/180;
    mercator.x = x;
    mercator.y = y;
    return mercator ;
}