时间戳

首页 > 解决方案 > 获取地图瓦片边界框

mapbox-gl-js - 获取地图瓦片边界框

问题描述

是否有可能获得瓷砖 LngLat 边界框？（如果可能，还有中心/宽度）

即给定任何瓷砖“id”（例如6/33/24），计算想要的坐标。我非常渴望得到答案，我什至不在乎它是用什么语言写的。

语境

平铺“id”有 3 个部分：( 6/33/24) z/x/y。

zx/y从左/上原点开始缩放（0-24）和瓷砖编号。

当缩放为 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;
    });
  }
};

标签： mapbox-gl-jsvector-tiles

解决方案

我相信你正在寻找这个图书馆：

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);

推荐阅读