d3-плитка

Квадродеревянные плитки часто используются для представления большой геометрии и изображений с несколькими разрешениями, как в «плавающих» картах. d3.tile предоставляет удобный механизм для вычисления координат плиток, которые должны быть видны в данном окне просмотра. В отличие от специализированных библиотек для «плавающих» карт, таких как Leaflet, крошечный API низкого уровня d3.tile не зависит от способа отображения плиток и предлагает большую гибкость. d3.tile хорошо сочетается с d3-geo для географических карт и d3-zoom для взаимодействия.

Примеры можно посмотреть в коллекции d3-tile на Observable.

Установка

Если вы используете NPM, npm install d3-tile. В противном случае скачайте последнюю версию. Также вы можете загрузить её напрямую как отдельную библиотеку. Поддерживаются ES-модули, AMD, CommonJS и обычные среды. В обычной среде экспортируется d3 глобальная переменная:

<script src="https://cdn.jsdelivr.net/npm/d3-tile@1"></script>
<script>

const tile = d3.tile();
const tiles = tile({k: 256, x: 480, y: 250});

</script>

Справочник по API

d3.плитка() · Исходный код, Примеры

Создаёт новую структуру плиток с настройками по умолчанию.

const tile = d3.tile();

плитка(…аргументы) · Исходный код, Примеры

Вычисляет набор плиток для отображения, учитывая текущие настройки, вычисляя масштаб и сдвиг путём вызова соответствующих функций доступа с заданными аргументами. Возвращает массив массивов [x, y, z], представляющих целочисленные координаты x (горизонтальные), y (вертикальные) и z (увеличение) видимых плиток, пересекающих текущее окно просмотра. Возвращаемый массив плиток также имеет свойства tiles.scale и tiles.translate, которые вместе с x и y каждой плитки определяют предполагаемое расположение плитки в окне просмотра.

Например, следующая функция вычисляет пиксельные координаты верхнего левого угла заданной плитки в текущем окне просмотра:

function position(tile, tiles) {
  const [x, y] = tile;
  const {translate: [tx, ty], scale: k} = tiles;
  return [(x + tx) * k, (y + ty) * k];
}

И в использовании:

const tile = d3.tile();
const tiles = tile({k: 256, x: 480, y: 250});
for (const t of tiles) {
  console.log(`tile ${t} is at ${position(t, tiles)}`);
}

Дополнительную информацию о координатах плиток можно найти в Увеличиваемые плитки.

плитка.область([область]) · Исходный код

Если задано область, устанавливает область видимости для данной структуры плиток в заданный массив [[x0, y0], [x1, y1]], где [x0, y0] — верхний левый угол, а [x1, y1] — нижний правый угол, и возвращает структуру плиток. Если область не задана, возвращает текущую область видимости, которая по умолчанию равна [[0, 0], [960, 500]].

const tile = d3.tile().extent([[100, 200], [300, 400]]);

Установка области видимости подразумевает установку размера области видимости.

плитка.размер([размер]) · Исходный код

Если задан размер, устанавливает размер области просмотра для данной структуры плиток в заданный массив чисел [ширина, высота] и возвращает эту структуру плиток. Если размер не задан, возвращает текущий размер области видимости, который по умолчанию равен [960, 500].

const tile = d3.tile().size([200, 200]);

Это удобный метод для установки области видимости области видимости в [[0, 0], [ширина, высота]].

плитка.масштаб([масштаб]) · Исходный код

Если задан масштаб, устанавливает функцию масштабирования этой структуры плиток и возвращает эту структуру плиток. Если масштаб — функция, она вызывается при вызове структуры плиток, получив те же аргументы, что и структура плиток; эта функция должна вернуть число, указывающее желаемую ширину и высоту плитки мира [0, 0, 0].

const tile = d3.tile().scale(t => t.scale).translate(t => t.translate);
const tiles = tile({scale: 1024, translate: [100, 200]});

Если масштаб не является функцией, он предполагается как константа и оборачивается в функцию.

const tile = d3.tile().scale(1024).translate([100, 200]);

Если масштаб не задан, возвращает текущую функцию масштабирования структуры, которая по умолчанию:

function scale(transform) {
  return transform.k;
}

Этот параметр по умолчанию совместим с преобразованием d3-zoom.

плитка.сдвиг([сдвиг]) · Исходный код

Если задан сдвиг, устанавливает функцию сдвига этой структуры плиток и возвращает эту структуру плиток. Если сдвиг — функция, она вызывается при вызове структуры плиток, получив те же аргументы, что и структура плиток; эта функция должна вернуть массив чисел [x, y], указывающий желаемые координаты центра плитки мира [0, 0, 0].

const tile = d3.tile().scale(t => t.scale).translate(t => t.translate);
const tiles = tile({scale: 1024, translate: [100, 200]});

Если сдвиг не является функцией, он предполагается как константа [x, y] и оборачивается в функцию.

const tile = d3.tile().scale(1024).translate([100, 200]);

Если сдвиг не задан, возвращает текущую функцию сдвига структуры, которая по умолчанию:

function translate(transform) {
  return [transform.x, transform.y];
}

Этот параметр по умолчанию совместим с преобразованием d3-zoom.

плитка.clampX([зажим]) · Исходный код, Примеры

Если задан зажим, устанавливает, будут ли видимые плитки зажиматься по оси x, и возвращает эту структуру плиток. Если зажим не задан, возвращает, включен ли зажим по оси x, по умолчанию он включен. Если зажим по оси x отключен, структура плиток может вернуть плитки, которые находятся вне обычных пределов 0 ≤ x < 2^z плитки мира [0, 0, 0].

const tile = d3.tile().clampX(false);

См. d3.tileWrap для преобразования этих координат в обернутые координаты в мире и Обёрнутые плитки для примера.

плитка.clampY([зажим]) · Исходный код

Если задан зажим, устанавливает, будут ли видимые плитки зажиматься по оси y, и возвращает эту структуру плиток. Если зажим не задан, возвращает, включен ли зажим по оси y, по умолчанию он включен. Если зажим по оси y отключен, структура плиток может вернуть плитки, которые находятся вне обычных пределов 0 ≤ y < 2^z плитки мира [0, 0, 0].

const tile = d3.tile().clampY(false);

См. d3.tileWrap для преобразования этих координат в обернутые координаты в мире и Обёрнутые плитки для примера. Также см. плитка.clampX.

плитка.зажим([зажим]) · Исходный код

Если задан зажим, устанавливает плитка.clampX и плитка.clampY в указанное логическое значение зажим и возвращает эту структуру плиток. Если зажим не задан, возвращает true, если оба плитка.clampX и плитка.clampY равны true, и false в противном случае.

const tile = d3.tile().clamp(false);

плитка.размерПлитки([размерПлитки]) · Исходный код, Примеры

Если задан размерПлитки, устанавливает ширину и высоту плитки этой структуры плиток в заданное число размерПлитки и возвращает эту структуру плиток. Если размерПлитки не задан, возвращает текущий размер плитки структуры, который по умолчанию равен 256. 256 и 512 — наиболее распространённые размеры плиток.

const tile = d3.tile().tileSize(512);

плитка.zoomDelta([zoomDelta]) · Исходный код, Примеры

Если задан zoomDelta, устанавливает смещение масштабирования для этой структуры плиток в указанное число zoomDelta и возвращает эту структуру плиток. Если zoomDelta не задан, возвращает текущее смещение масштабирования, которое по умолчанию равно 0. Смещение масштабирования влияет на выбор координаты z на основе текущего масштаба; значение по умолчанию 0 выбирает z, ближайшее к отображаемому размеру; значение смещения масштабирования -1 использует z - 1, давая плитки в два раза больше (более низкое разрешение); значение смещения масштабирования +1 использует z + 1, давая плитки в два раза меньше (более высокое разрешение). Последнее может быть уместным для отображения плиток 256×256 в пространстве 128×128 на экране высокого разрешения.

const tile = d3.tile().zoomDelta(2);

d3.tileWrap(плитка) · Исходный код, Примеры

При заданных координатах плитки [x, y, z], где x и y могут находиться вне плитки мира [0, 0, 0], возвращает обернутые координаты плитки [x′, y′, z], где j = 2 ^ z, x′ = x - ⌊x / j⌋ * j и y′ = y - ⌊y / j⌋ * j. Эта функция чаще всего используется в сочетании с плитка.clampX для обеспечения горизонтального обёртывания веб-плиток Меркатора.

d3.tileWrap([-1, 0, 1]) // [1, 0, 1]
d3.tileWrap([-1, 0, 2]) // [3, 0, 2]

Пример можно посмотреть в Обёрнутые плитки.