## 中心点参考这个
data(){
tileInfo: {
dpi: 90.71428571427429,
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [
{
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
},
{
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
},
{
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
},
{
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
},
{
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
},
{
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
},
{
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
},
{
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
},
{
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
},
{
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
},
{
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
},
{
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
},
{
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-5,
scale: 36071.483527679447
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655
}
// { level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 }
],
},
},
methods:{
//计算需要的属性
ComputationAttribute () {
let para = this.weXinAmapMap.getBounds()//weXinAmapMap是地图对象
let ItemFour = {
CLASS_NAME: para.CLASS_NAME,
xmax: para.northeast.R,
ymax: para.northeast.Q,
xmin: para.southwest.R,
ymin: para.southwest.Q
}
let parm = {
evet: ItemFour,
scale: this.weXinAmapMap.getScale(),
}
return parm
},
//四至 瓦片的宽度
getTielsByExtent (extent, resolution) {
var tileInfoWeb = this.tileInfo
// 获取最近层
let lodNearest = null
// 获取第一层级别
let lodfirstlevel = null
for (let i = 0; i < tileInfoWeb.lods.length - 1; i++) {
lodfirstlevel = tileInfoWeb.lods[0]
const lod0 = tileInfoWeb.lods[i]
const lod1 = tileInfoWeb.lods[i + 1]
if (lod0.resolution <= resolution) {
lodNearest = lod0
break
} else if (
lod0.resolution > resolution &&
lod1.resolution <= resolution
) {
lodNearest = lod0
break
} else if (i === tileInfoWeb.lods.length - 2) {
// 如果已经是最后一个了还不满足,那就给最后一个
lodNearest = lod1
break
}
}
// 获取左上角所在瓦片的行列号
let leftTop = this.getTielsRowColum(
extent.xmin,
extent.ymax,
tileInfoWeb.origin,
lodNearest,
tileInfoWeb.rows
)
let rightBottom = this.getTielsRowColum(
extent.xmax,
extent.ymin,
tileInfoWeb.origin,
lodNearest,
tileInfoWeb.rows
)
// 从左往右,从上往下开始拼接数组
let arrayExtent = []
let widthl = tileInfoWeb.rows * lodNearest.resolution // 每行的宽度
for (let row = leftTop.row; row <= rightBottom.row; row++) {
for (let col = leftTop.colum; col <= rightBottom.colum; col++) {
// 当前行列的左下右上坐标
let envelop = {
type: 'extent',
spatialReference: { wkid: 4326 },
xmin: tileInfoWeb.origin.x + widthl * col,
xmax: tileInfoWeb.origin.x + widthl * col + widthl,
ymin: tileInfoWeb.origin.y - widthl * row - widthl,
ymax: tileInfoWeb.origin.y - widthl * row
}
if (this.YWConfig) {
if (this.YWConfig.isoffset === true) {
envelop.xmin += this.$globlevars.offset
envelop.xmax += this.$globlevars.offset
envelop.ymin += this.$globlevars.offset
envelop.ymax += this.$globlevars.offset
}
}
arrayExtent.push(envelop)
}
}
const dataContent = {
extents: arrayExtent,
level: lodNearest.level,
levelCount: tileInfoWeb.lods.length - 1,
firstlevel: lodfirstlevel.level
}
return dataContent
},
getTielsRowColum (x, y, origin, lod, tilesize) {
let widthl = tilesize * lod.resolution
let startCol = Math.floor((x - origin.x) / widthl)
let startRow = Math.floor((origin.y - y) / widthl)
return { row: startRow, colum: startCol }
},
}
//xyz协议瓦片编号转经纬度
//xyz协议瓦片编号转经纬度
export function tileNumbersToLonLat(xtile: number, ytile: number, zoom: number): [number, number] {
const n = Math.pow(2, zoom)
const lon_deg = xtile / n * 360.0 - 180.0
const lat_rad = Math.atan(Math.sinh(Math.PI * (1 - 2 * ytile / n)))
const lat_deg = lat_rad * 180.0 / Math.PI
return [lon_deg, lat_deg]
}
## PS:这个计算四的方法是天地图的所以最好配合天地图的底图来用,我没有高德的对应tileInfo表,有的人可以评论区发一下谢谢啦!