在线生成百度瓦片范围json_百度地图瓦片生成在线-优快云博客

1.确定经纬度坐标范围。

随便打开一个百度地图API示例，如http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

在<script></script>标签内插入1个函数：

//经纬度转为平面坐标
function lnglatToPoint(longitude, latitude) {
    let projection = new BMap.MercatorProjection();
    let lnglat = new BMap.Point(longitude, latitude);
    let point = projection.lngLatToPoint(lnglat);
    return {
        pointX: point.x,
        pointY: point.y
    };
}

既然是百度地图的api示例，代码中一定有BMap对象mp(也可能是其他名称)。在</script>之前加入以下代码：

//单击时显示该点经纬度
mp.addEventListener("click",function(e){
    var pt = lnglatToPoint(e.point.lng,e.point.lat);
    console.log(pt);
});

单击页面上方的“运行”，打开浏览器调试界面(chrome浏览器按F12)，在地图中单击目标区域的上下左右边界处，可以在调试界面的Console面板看到输出的经纬度范围。我确定的地图经纬度范围是：

经度：72~136

纬度：1~54

2.转换为百度瓦片坐标。

百度瓦片分为3-18级，分别计算每一级的瓦片坐标范围。在<script></script>标签内插入以下2个函数：

// 平面坐标转为瓦片坐标
function getTile(point,level){
    return point * Math.pow(2,level-18)/256;
}

//计算level=3~18时瓦片编号x,y的范围，编为json格式字符串,输出到控制台
function getMyTiles(){
    var top = 54;
    var bottom = 1;
    var left = 72;
    var right = 136;
	//左下角,右上角
    var start  = lnglatToPoint(left,bottom);
    var end = lnglatToPoint(right,top);
    var str = "";
    for(var z=3;z<19;z++){
      str+=("{z:"+z+",xmin:"+getTile(start.pointX,z)+",ymin:"+getTile(start.pointY,z)+",xmax:"+getTile(end.pointX,z)+",ymax:"+getTile(end.pointY,z)+"},");
    }
    console.log(str);
}

在Console面板输入getMyTiles()，回车运行，可以看到json字符串已经打印出来了。