获取地图瓦片的边界框

Question

如何获取瓦片的LngLat边界框？（如果可能，还要包括中心/宽度）

例如，给定任何一个瓦片“id”（例如6/33/24），计算所需的坐标。我非常渴望得到答案，因此不在意答案是用哪种语言编写的。

---

上下文

瓦片“id”有3个部分：6/33/24（z/x/y）。

z表示缩放级别（0-24），x/y表示从左上角原点开始的瓦片编号。

当缩放级别为1时，整个地图被分为4个相等的瓦片（如图所示）。每次缩放（z增加），每个瓦片都会分成4个相等的瓦片（例如，缩放级别为2时=16个瓦片）。

 _______________________
|          |           |
|  1/0/0   |   1/1/0   |
|          |           |
|__________|___________|
|          |           |
|  1/0/1   |   1/1/1   |
|          |           |
|__________|___________|

---

为什么？

我想实现客户端标记缓存，并将它们绑定到瓦片似乎是最合理的解决方案。我知道如何获取瓦片（循环遍历sourceCaches中的瓦片或使用几个transform方法），但我不知道如何从瓦片矩阵或瓦片ID中获取LngLat数据。

超级基本的JavaScript概念（供参考）：

const markerCache = {
  cache: {},

  getMarkersForTile: function(key) { // tiles have unique keys
    if (this.cache[key]) {
      return Promise.resolve(this.cache[key]);
    }

    // ??? what should be in "getTileBounds"?
    const bounds = getTileBounds(key);
    
    return fetchMarkersForTile(bounds).then(markers => {
      this.cache[key] = markers;
      return markers;
    });
  }
};

- Solo

---

ID数据从哪里来？ - Sully

我相信你的问题在这里被Alvin Lindstam回答了：https://dev59.com/147da4cB1Zd3GeqP9Sil。你要找的公式，在他的回答中用Javascript给出了。 - Mihai Serban

Answer 1

我相信你正在寻找这个库：

https://github.com/mapbox/tilebelt

它包括tileToBBOX(tile)函数，可以为给定的瓦片返回边界框。

用法：

var tilebelt = require('@mapbox/tilebelt');

var tile = [10,15,8] // x,y,z

var bbox = tilebelt.tileToBBOX(tile);

- Moritz

Answer 2

我相信您正在寻找滑动地图瓦片名称规格，正如https://docs.mapbox.com/api/maps/vector-tiles/中所提到的。

链接中有许多编程语言的实现。 Java示例

  class BoundingBox {
    double north;
    double south;
    double east;
    double west;   
  }

  BoundingBox tile2boundingBox(final int x, final int y, final int zoom) {
    BoundingBox bb = new BoundingBox();
    bb.north = tile2lat(y, zoom);
    bb.south = tile2lat(y + 1, zoom);
    bb.west = tile2lon(x, zoom);
    bb.east = tile2lon(x + 1, zoom);
    return bb;
  }

  static double tile2lon(int x, int z) {
     return x / Math.pow(2.0, z) * 360.0 - 180;
  }

  static double tile2lat(int y, int z) {
    double n = Math.PI - (2.0 * Math.PI * y) / Math.pow(2.0, z);
    return Math.toDegrees(Math.atan(Math.sinh(n)));
  }

- Sully