Deck.gl, Mapbox и React: отображение точек, маршрутов и кластеризация на карте

Mapbox является американским поставщиком пользовательских онлайн-карт для веб-сайтов и приложений. С 2010 года он быстро расширил нишу пользовательских карт, в ответ на ограниченный выбор, предложенный поставщиками карт, такими как Google Maps. На данный момент остается достойным продуктом на фоне большого количества конкурентов.

• Официальный сайт

Deck.gl это платформа на базе WEB API WebGL для визуального исследовательского анализа больших наборов данных (не только для визуализации географических данных). Создана и поддерживается Uber. Изначально разработана с использованием Mapbox. Также поддерживаются Google Maps, но возможности будут ограничены.

• Официальный сайт

Теперь мы можем переходить к практике, которую разделим на несколько пунктов. Напомню, что для реализации поставленных задач будем использовать React.

1. Отображение карты

Для начала нам нужно зарегистироваться на сайте Mapbox и в личном кабинете получить токен. Он понадобится для работы с картами в проекте.

Переходим к установке зависимостей: yarn add mapbox-gl @urbica/react-map-gl

Итоговый код для простого отображения карты на весь экран будет выглядеть следующим образом:

import * as React from "react";
import MapGL from "@urbica/react-map-gl";

import "mapbox-gl/dist/mapbox-gl.css";

const App = () => {
 const viewport = {
   latitude: 0,
   longitude: 0,
   zoom: 1,
 };

 return (
   <MapGL
     style={{ width: "100vw", height: "100vh" }}
     accessToken={TOKEN}
     {...viewport}
   />
 );
};

2. Отображение точек

Будем использовать Deck.gl слой IconLayer.

Подробнее о нем можно почитать здесь.

Установим зависимости: yarn add @deck.gl/mapbox @deck.gl/layers
Атлас с иконками возьмем по ссылке.

В объекте ICON_MAPPING описаны все виды иконок и их координаты в атласе выше.

Массив для двух точек будет выглядеть следующим образом. Обращаю внимание, что нужно в ключе icon указать вид иконки из объекта ICON_MAPPING.

const iconsData = [
 {
   id: 1,
   name: "First Point",
   size: 5,
   icon: "marker",
   coordinates: [-100.12097640000002, 35.449965],
   color: [0, 0, 128],
 },
 {
   id: 2,
   name: "Second Point",
   size: 5,
   icon: "marker",
   coordinates: [-100.0893059, 40.39611790000001],
   color: [255, 0, 0],
 },
];

Итоговый код:

import * as React from "react";
import MapGL, { CustomLayer } from "@urbica/react-map-gl";
import { MapboxLayer } from "@deck.gl/mapbox";
import { IconLayer } from "@deck.gl/layers";

import "mapbox-gl/dist/mapbox-gl.css";

import Atlas from "../src/img/icon-atlas.png";
import iconsData from "./layersData/iconsData";

const ICON_MAPPING = {
 marker: { x: 0, y: 0, width: 140, height: 148, mask: true },
 circle: { x: 0, y: 130, width: 120, height: 120, mask: true },
};

const App = () => {
 const [viewport, setViewport] = React.useState({
   latitude: 0,
   longitude: 0,
   zoom: 1,
 });

 const iconsLayer = new MapboxLayer({
   id: "icon-layer",
   type: IconLayer,
   data: iconsData,
   iconAtlas: Atlas,
   sizeScale: 10,
   iconMapping: ICON_MAPPING,
   getIcon: (d) => d.icon,
   getPosition: (d) => d.coordinates,
   getSize: (d) => d.size,
   getColor: (d) => d.color,
 });

 return (
   <MapGL
     style={{ width: "100vw", height: "100vh" }}
     accessToken={TOKEN}
     onViewportChange={setViewport}
     {...viewport}
   >
     <CustomLayer layer={iconsLayer} />
   </MapGL>
 );
};

3. Построение маршрутов

Для этой задачи используем TripsLayer слой.

В качестве данных я создаю объект с уже готовыми массивами, поэтому мне не нужно дополнительно использовать метод map при создании слоя и передачи координат с временем как в примере по ссылке. Хотелось бы отметить, что каждой координате соответствует свое время (unix timestamp).

const tripsData = [
 {
   coordinates: [
     [-100.149639, 35.440481],
     [-100.151832, 35.439649],
     [-100.152752, 35.439323],
     [-100.154222, 35.439699],
     [-100.154293, 35.439301],
     [-100.15539, 35.438506],
     [-100.155745, 35.43833],
     [-100.156138, 35.4382],
     [-100.157342, 35.43783],
     [-100.157729, 35.437787],
     [-100.15931, 35.438335],
     [-100.159402, 35.438002],
     [-100.159333, 35.437877],
     [-100.159702, 35.437776],
     [-100.160215, 35.437766],
     [-100.160195, 35.43783],
     [-100.160439, 35.43806],
     [-100.160269, 35.437808],
     [-100.160124, 35.438099],
     [-100.143509, 35.441997],
     [-100.142375, 35.442401],
     [-100.141645, 35.442632],
     [-100.141291, 35.442684],
     [-100.141841, 35.442592],
     [-100.139913, 35.443157],
     [-100.139481, 35.443198],
     [-100.138995, 35.443288],
     [-100.138686, 35.443415],
   ],
   timestamps: [
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009520,
     1556009880,
     1556009880,
     1556010060,
     1556011440,
     1556011440,
     1556011500,
     1556011500,
     1556011500,
     1556011680,
     1556012100,
     1556012160,
     1556012160,
     1556012160,
     1556012160,
     1556012160,
     1556012160,
     1556012160,
     1556012160,
   ],
   color: [18, 83, 2],
 },
];

Итоговый код. Обращаю внимание, что в ключе currentTime данного слоя я указал для примера последнее время unix timestamp из массива выше.

import * as React from "react";
import MapGL, { CustomLayer } from "@urbica/react-map-gl";
import { MapboxLayer } from "@deck.gl/mapbox";
import { TripsLayer } from "@deck.gl/geo-layers";

import "mapbox-gl/dist/mapbox-gl.css";

import tripsData from "./layersData/tripsData";

const App = () => {
 const [viewport, setViewport] = React.useState({
   latitude: 0,
   longitude: 0,
   zoom: 1,
 });

 const tripsLayer = new MapboxLayer({
   id: "trips-layer",
   type: TripsLayer,
   data: tripsData,
   widthMinPixels: 3,
   rounded: true,
   trailLength: 200,
   currentTime: 1556012340,
   getPath: (d) => d.coordinates,
   getTimestamps: (d) => d.timestamps,
   getColor: (d) => d.color,
 });

 return (
   <MapGL
     style={{ width: "100vw", height: "100vh" }}
     accessToken={TOKEN}
     onViewportChange={setViewport}
     {...viewport}
   >
     <CustomLayer layer={tripsLayer} />
   </MapGL>
 );
};

4. Кластеризация

Для ее реализации нам потребуется установить зависимости: yarn add supercluster @urbica/react-map-gl-cluster

Подробнее можно почитать здесь.

Данные для точек запишем следующим образом:

const clusterData = [
 {
   id: 1,
   name: "First Point",
   coordinates: [-110.12097640000002, 35.449965],
 },
 {
   id: 2,
   name: "Second Point",
   coordinates: [-112.0893059, 35.39611790000001],
 },
];

Нам понадобится написать компоненту, которая будет описывать точку, содержащую в себе несколько других. Например на скриншоте точка содержит в себе две обычные единичные и при приближении распадается.

import React from "react";
import { Marker } from "@urbica/react-map-gl";

import { pointStyle } from "./App";

const ClusterMarker = (props) => (
 <Marker longitude={props.longitude} latitude={props.latitude}>
   <div style={pointStyle}>{props.pointCount}</div>
 </Marker>
);

Главная компонента выглядит так. Для надежности добавил дополнительную проверку координат:

import * as React from "react";
import MapGL, { Marker } from "@urbica/react-map-gl";
import Cluster from "@urbica/react-map-gl-cluster";

import "mapbox-gl/dist/mapbox-gl.css";

import ClusterMarker from "./ClusterMarker";
import clusterData from "./layersData/clusterData";

export const pointStyle = {
 display: "flex",
 justifyContent: "center",
 alignItems: "center",
 width: "32px",
 height: "32px",
 borderRadius: "50%",
 border: "1px solid black",
 backgroundColor: "white",
};

const App = () => {
 const [viewport, setViewport] = React.useState({
   latitude: 0,
   longitude: 0,
   zoom: 1,
 });

 const clusterLayerData = React.useMemo(
   () =>
     clusterData.map((point) => {
       const [fCoordinate, sCoordinate] = point.coordinates;
       const lng =
         sCoordinate > -90 && sCoordinate < 90 ? fCoordinate : sCoordinate;
       const lat = lng === fCoordinate ? sCoordinate : fCoordinate;

       return (
         <Marker key={point.id} longitude={lng} latitude={lat}>
           <div style={pointStyle}>1</div>
         </Marker>
       );
     }),
   []
 );

 return (
   <MapGL
     style={{ width: "100vw", height: "100vh" }}
     accessToken={TOKEN}
     onViewportChange={setViewport}
     {...viewport}
   >
     <Cluster
       radius={40}
       extent={512}
       nodeSize={64}
       component={ClusterMarker}
       children={clusterLayerData}
     />
   </MapGL>
 );
};

Заключение

На сайте Deck.gl еще собрано множество разнообразных слоев. Но как вы могли заметить, с помощью Deck.gl и Mapbox можно с легкостью реализовывать достаточно сложный на первый взгляд функционал. Успехов!