8. Использование в React приложениях

React — это JavaScript библиотека, используемая для создания пользовательских интерфейсов. Поскольку React манипулирует DOM'ом, может быть сложно связать React с другими библиотеками, которые также манипулируют DOM'ом и управляют состоянием, подобным MMR GL JS. В этом разделе вы узнаете, как создать React приложение, которое использует MMR GL JS для визуализации карты, отображения координат центральной точки карты и уровня ее масштабирования, а затем обновления отображения при взаимодействии пользователя с картой. Вы сможете использовать принципы, описанные в этом гайде, для создания более сложных приложений, использующих как React, так и MMR GL JS.

Настройка структуры React приложения

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

В папке проекта создайте новый файл:

package.json — этот файл используется для указания всех пакетов, необходимых вашему приложению.

В папке проекта создайте папку public. В этой папке создайте два новых файла:

index.html — этот HTML-файл будет отображать визуализированную карту, с которой ваши пользователи смогут взаимодействовать.
site.css — этот файл будет содержать CSS, необходимый для правильного форматирования карты и боковой панели. Создание HTML каркаса

В папке проекта создайте другую папку с именем src. В папке src создайте новый файл:

index.js — этот файл JavaScript будет содержать всю логику React, необходимую для установки и управления состоянием приложения и отображения карты.

После создания этих папок и файлов у вас будет следующая файловая структура:

project
└── package.json
└── public
│     └── index.html
│     └── site.css
└── src
       └── index.js

Далее выполните npm install.

Создание React приложения

Откройте public/index.html файл и вставьте в него следующий код:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>MMR GL JS and React</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
     
    <link href="https://geo.rustore.ru/sdk/js/<version>/mmr-gl.css" rel="stylesheet" />
    <link href="%PUBLIC_URL%/site.css" rel="stylesheet" />
 
    <script src="https://geo.rustore.ru/sdk/js/<version>/mmr-gl.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

Этот код создает структуру HTML-страницы, которую будут видеть пользователь. В <body> страницы есть тэг <div> с идентификатором приложения. Этот <div> является контейнером, в котором приложение React будет отображаться на странице.

Этот код также ссылается на два разные файла стилей в <head>. Первый стиль — это стиль MMR GL JS, который гарантирует, что элементы на вашей карте отобразятся верно. Вторая стиль — это файл site.css, созданный ранее, в который вы добавите CSS для конкретного приложения.

Установка дефолтного стейта (default state)

Откройте src/index.js файл. Добавьте следующие импорты в верхнюю часть файла:

src/index.js

Вариант с хуками (hooks)

import React, { useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

Вариант с классами (classes)

import React from 'react';
import ReactDOM from 'react-dom';

Импортируйте MMR GL и добавьте свой токен доступа. Установить токен доступа (accessToken):

mmrgl.accessToken = 'token';

Вы можете настроить приложение React! Чтобы создать структуру, в которую вы добавите код из следующих нескольких шагов, добавьте следующее index.js:

Вариант с хуками (hooks)

const Map = () => {};
  
ReactDOM.render(<Map />, document.getElementById('app'));

Вариант с классами (classes)

class Map extends React.PureComponent {}
  
ReactDOM.render(<Map />, document.getElementById('app'));

Это определяет карту, а затем указывает, что она должна быть отображена в <div> с идентификатором приложения.

Отрисовка карты

Вам нужно визуализировать карту в вашем приложении. Точка входа для инициализации карты в приложении React находится через один элемент, указанный в return. Добавьте следующий код в свое приложение:

src/index.js

Вариант с хуками (hooks)

return (
    <div>
        <div className="map-container" ref={mapContainer} />
    </div>
);

Вариант с классами (classes)

render() {
    const { lng, lat, zoom } = this.state;
    return (
        <div>
            <div ref={this.mapContainer} className="map-container" />
        </div>
    );
}

mapContainer ref указывает, что карта должна быть нарисована на HTML-странице в новом элементе <div>.

Карта нуждается в нескольких правилах стиля для правильного отображения. Добавьте следующий код в файл site.css:

.map-container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

Сохраните изменения. В командной строке выполните команду npm start. Это запускает локальный сервер и открывает новую страницу в вашем браузере с вашим приложением.

Если вы откроете консоль вашего браузера, вы можете увидеть ошибку: 'map' is assigned a value but never used. Не волнуйтесь — на следующем шаге вы будете использовать переменную map!

Хранение координат

Затем вам нужно создать функцию, которая будет сохранять новые широту, долготу и масштаб, когда пользователь взаимодействует с картой. Вы напишете функцию MMR GL JS map.on('move'), которая устанавливает значения в стейт, когда пользователь перемещает карту. В useEffect, если вы используете хуки, или в componentDidMount(), если вы используете классы, добавьте следующий код:

Вариант с хуками (hooks)

map.on('move', () => {
    setLng(map.getCenter().lng.toFixed(4));
    setLat(map.getCenter().lat.toFixed(4));
    setZoom(map.getZoom().toFixed(2));
});

Вариант с классами (classes)

map.on('move', () => {
    this.setState({
        lng: map.getCenter().lng.toFixed(4),
        lat: map.getCenter().lat.toFixed(4),
        zoom: map.getZoom().toFixed(2)
    });
});

В этой функции используется useState(), если вы используете хуки (hooks), или setState(), если вы используете классы (classes), чтобы сбросить значения lng, lat и zoom при перемещении карты. В функции используются следующие методы:

getCenter(), метод MMR GL JS, чтобы получить новую долготу и широту точки в центре карты.
getZoom(), метод MMR GL JS, чтобы определить уровень масштабирования, на который установлена карта.
toFixed(), метод JavaScript, позволяющий усечь результирующее число с плавающей запятой до заданного числа цифр.

Отображение координат

Когда вы можете собирать и хранить эту информацию, вы можете использовать return для отображения ее на карте. Внутри открывающего тега <div>, созданного для хранения карты, добавьте новый <div> для отображения долготы, широты и масштаба карты. Теперь оператор return будет выглядеть так:

Вариант с хуками (hooks)

return (
    <div>
        <div className="sidebar">
            Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
        </div>
        <div className="map-container" ref={mapContainer} />
    </div>
);

Вариант с классами (classes)

render() {
    const { lng, lat, zoom } = this.state;
    return (
        <div>
            <div className="sidebar">
                Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
            </div>
            <div ref={this.mapContainer} className="map-container" />
        </div>
    );
}

Боковая панель нуждается в нескольких стилях, чтобы правильно отображаться на странице. Добавьте следующий CSS в файл site.css:

site.css

.sidebar {
    background-color: rgba(35, 55, 75, 0.9);
    color: #ffffff;
    padding: 6px 12px;
    font: 15px/24px monospace;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    margin: 12px;
    border-radius: 4px;
}

Сохраните свою работу и вернитесь на страницу браузера. В левом верхнем углу карты есть боковая панель, стилизованная в соответствии с правилами CSS, установленными в site.css. Боковая панель показывает текущую широту и долготу центра карты, а также уровень масштабирования. Когда вы масштабируете и перемещаете карту, содержимое боковой панели будет обновляться.

Обновлено 30 ноября 2022 г.