如何得到高德坐标的每个瓦片的四至,和中心点

## 中心点参考这个

Canvas作为切片-自有数据图层-示例中心-JS API 2.0 示例 | 高德地图API高德开放平台官网https://lbs.amap.com/demo/jsapi-v2/example/selflayer/flex-canvas# 计算每个瓦片的四至

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表,有的人可以评论区发一下谢谢啦!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值