Перейти к основному содержимому

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)

src/index.js
import React, { useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

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

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

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

Установите токен доступа (accessToken) — см. ниже.

src/index.js
mmrgl.accessToken = 'token';

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

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

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

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

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

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

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

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

Добавьте следующий код в свое приложение (см. ниже).

src/index.js

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

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

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

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

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

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

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. Боковая панель показывает текущую широту и долготу центра карты, а также уровень масштабирования. Когда вы масштабируете и перемещаете карту, содержимое боковой панели будет обновляться.