如何在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);
}