界面实现(2)
瓦片模式:
1、百度地图坐标转换
瓦片xy计算出经纬度坐标:
- this.tileToPixel(pixel);百度地图瓦片大小为 256*256,根据 瓦片xy * 256计算出瓦片的像素坐标;
- this.pixelToWorld(this.tileToPixel(pixel)) ; 将像素坐标转为平面坐标。
- 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、获取当前地图所有瓦片
- 获取到的经纬度是平面坐标,使用时需要使用上面声明的
lngLatToTile()
转换成经纬度 - 把范围内的点都压入数组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 });
}
}
},