Mapbox: Как добавить визуализацию Hexbins?

Question

Я работаю над проектом Angular 4 для визуализации огромного количества данных с помощью mapbox, мне нужно предоставить разные визуализации. сейчас я пытаюсь работать с Hexbins, но я не могу найти простые уроки по этому поводу. Мне нужен базовый пример для начинающих. Ваша помощь высоко ценится.

Answer 1

Mapbox работает с источниками Geojson, которые не знают о конкретных «формах» (таких как шестиугольник); только точки, линии и многоугольники.

Таким образом, вы можете использовать Turf.js , который имеет функцию, которая преобразует ограничивающий прямоугольник в гексагональную сетку: hexGrid:

const bbox = [-96,31,-84,40];
const cellSide = 50;
const options = { units: 'miles' };

const hexgrid = turf.hexGrid(bbox, cellSide, options);
const source = {
  "type": "FeatureCollection",
  "features": hexgrid
}

Полная демонстрация: https://codepen.io/eddydg/pen/erEydr