一、先学习下以下网址,了解下切片原理及定义。
http://www.cnblogs.com/jz1108/archive/2011/07/02/2095376.html
http://blog.csdn.net/mygisforum/article/details/8162751
二、百度的官方sample
var tileLayer = new BMap.TileLayer(); tileLayer.getTilesUrl = function (tileCoord, zoom) { var x = tileCoord.x; var y = tileCoord.y; return "http://developer.baidu.com/map/jsdemo/img/border.png"; } map.addTileLayer(tileLayer);
三、自定义图片请求地址
var PointConvert = new BaiduPointConvert(map);//百度坐标转换类 var lonlat_0 = PointConvert.tileToLngLat(tileCoord);//百度区块左下角经纬度 var tileCoord2 = new Object(); tileCoord2.x = x + 1; tileCoord2.y = y + 1; var lonlat2_0 = PointConvert.tileToLngLat(tileCoord2);//百度区块右下角经纬度 var lonlat_1=BD2GCJ(lonlat_0.lng, lonlat_0.lat);//百度转gcj var lonlat2_1 = BD2GCJ(lonlat2_0.lng, lonlat2_0.lat);//百度转gcj var lonlat = GCJ2WGS(lonlat_1.lng, lonlat_1.lat);//gcj转wgs var lonlat2 = GCJ2WGS(lonlat2_1.lng, lonlat2_1.lat);//gcj转wgs var worldCoordinate14 = lonLat2Mercator(lonlat);//转平面坐标 var worldCoordinate24 = lonLat2Mercator(lonlat2);//转平面坐标 var url= "*/MapServer/export?bbox=" + worldCoordinate14.x+ "%2C" + worldCoordinate14.y + "%2C" + worldCoordinate24.x + "%2C" + worldCoordinate24.y +"&bboxSR=102100&layers=&layerDefs=&size=256%2C256&imageSR=102100&format=png&transparent=true &dpi=&time=&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&f=image"; <pre name="code" class="javascript"> return url;//图片 通过arcgis server返回,后期可以把图片下载下来后就抛弃server,然后以瓦片x,y,z命名
BaiduPointConvert类
var BaiduPointConvert=function(map){ this.map=map; //图块坐标转为球面坐标 this.tileToLngLat=function(pixel){ return this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel))); } //球面坐标转为图块坐标 this.lngLatToTile=function(lngLat){ return this.pixelToTile(this.worldToPixel(this.lngLatToWorld(lngLat))); } //像素坐标转为球面坐标 this.pixelToLngLat=function(pixel){ return this.worldToLngLat(this.pixelToWorld(pixel)); } //球面坐标转为像素坐标 this.lngLatToPixel=function(lngLat){ return this.worldToPixel(this.lngLatToWorld(lngLat)); } //图块坐标转为像素坐标 this.tileToPixel=function(pixel){ return new BMap.Pixel(pixel.x * 256, pixel.y * 256); } //像素坐标转为平面坐标 this.pixelToWorld=function(pixel){ var zoom=this.map.getZoom(); return new BMap.Pixel(pixel.x / Math.pow(2, zoom- 18), pixel.y / Math.pow(2, zoom - 18)); } //平面坐标转为球面坐标 this.worldToLngLat=function(pixel){ var projection = this.map.getMapType().getProjection(); return projection.pointToLngLat(pixel) } //像素坐标转为图块坐标 this.pixelToTile=function(pixel){ return new BMap.Pixel(pixel.x / 256, pixel.y / 256); } //平面坐标转为像素坐标 this.worldToPixel=function(pixel){ var zoom=this.map.getZoom(); return new BMap.Pixel(pixel.x * Math.pow(2, zoom - 18), pixel.y * Math.pow(2, zoom - 18)); } //球面坐标转为平面坐标 this.lngLatToWorld=function(lngLat){ var projection = this.map.getMapType().getProjection(); return projection.lngLatToPoint(lngLat) } }
http://api.zdoz.net/
https://github.com/JackZhouCn/JZLocationConverter
http://252190122.blog.163.com/blog/static/43448176201282110363982/
https://on4wp7.codeplex.com/SourceControl/changeset/view/21483#353936
五、问题
这种方式可以将自定义矢量图层配色后切片方式叠加,但是有图片错层的问题,还需要改进图片请求过程。
不能将google这种已经切好的图片叠加在百度地图上。