山东大学项目实训7

界面实现（2）

瓦片模式：

1、百度地图坐标转换

瓦片xy计算出经纬度坐标：

1. this.tileToPixel(pixel);百度地图瓦片大小为 256*256，根据 瓦片xy * 256计算出瓦片的像素坐标；
2. this.pixelToWorld(this.tileToPixel(pixel)) ; 将像素坐标转为平面坐标。
3. this.worldToLngLat(this.pixelToWorld(this.tileToPixel(pixel))); 调用API提供的方法将平面坐标转为经纬度坐标；

具体代码如下：

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)
    },
    //根据瓦片编号获取瓦片的经纬度
    this.tileToBounds = function (tileCoord) {
        var sw = this.tileToLngLat(tileCoord);//瓦片左下角坐标；
        var ne = this.tileToLngLat({ x: tileCoord.x + 1, y: tileCoord.y + 1 });//瓦片右上角坐标；
        return {
            sw: sw,
            ne: ne
        };  
    }，
}

2、获取当前地图所有瓦片

1. 获取到的经纬度是平面坐标，使用时需要使用上面声明的lngLatToTile（）转换成经纬度
2. 把范围内的点都压入数组tiles

    getTiles: function () {
        var convert = new BaiduPointConvert(this.map);
        var ne = this.map.getBounds().getNorthEast();//右上角经纬度
        var sw = this.map.getBounds().getSouthWest();//左下角经纬度

        var neTile = convert.lngLatToTile(ne);//右上角的瓦片
        neTile.x = Math.floor(neTile.x);
        neTile.y = Math.floor(neTile.y);

        var swTile = convert.lngLatToTile(sw);//左下角的瓦片
        swTile.x = Math.floor(swTile.x);
        swTile.y = Math.floor(swTile.y);

        this.tiles = [];
        for (var x = swTile.x; x <= neTile.x; x++) {
            for (var y = swTile.y; y <= neTile.y; y++) {
                this.tiles.push({ x: x, y: y });
            }
        }
    },