deck.gl - 如何在 react-map-gl/deck.gl 视口上获得 H3 六边形？

Question

我想根据视口上可见的 H3 六边形查询数据（以及每个视口更改的新数据）。无论如何用react-map-gl和deck.gl来实现这一点？

Answer 1

要获取视口内的六边形，您需要获取当前视口的边界框。如果您的当前视口为{latitude, longitude, zoom, width, height}（如果您正在使用，则可能处于组件状态react-map-gl），您可以使用以下方式获取视口viewport-mercator-project：

import WebMercatorViewport from 'viewport-mercator-project';

function bboxFromViewport(viewport) {
    const {width, height} = viewport;
    const projection = new WebMercatorViewport(viewport);
    const [west, north] = projection.unproject([0, 0]);
    const [east, south] = projection.unproject([width, height]);
    return {north, south, east, west};
}

然后，您可以使用边界框h3.polyfill来获取给定分辨率下包含的六边形列表：

const nw = [north, west];
const ne = [north, east];
const sw = [south, west];
const se = [south, east];
const hexes = h3.polyfill([nw, ne, se, sw], resolution);

根据您的用例，您可能希望在调用 之前扩展边界框polyfill，以获取即时视口之外的其他数据。

您可能还想以某种方式将其绑定在视口范围上，或者您最终可能会在缩小时得到数百万个六边形。我为此使用的一个便宜的技巧是对我们将获得的六边形数量进行非常粗略的估计，polyfill如果它太高就避免调用：

// Inexact, but it doesn't matter for our purposes
const KM_PER_DEGREE_LAT = 111.2;

function estimateHexagonsInBBox(bbox, width, height, res) {
    // This is an extremely rough estimate, but we're just trying
    // to get a reasonable order of magnitude
    const aspect = width / height;
    const latKm = (bbox.north - bbox.south) * KM_PER_DEGREE_LAT;
    const lonKm = latKm * aspect;
    return (latKm * lonKm) / h3.hexArea(res, h3.UNITS.km2);
}