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 файл и вставьте в него следующий код:
<!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
import React, { useRef, useEffect, useState } from 'react';import ReactDOM from 'react-dom'; |
import React from 'react';import ReactDOM from 'react-dom'; |
Импортируйте MMR GL и добавьте свой токен доступа. Установить токен доступа (accessToken):
mmrgl.accessToken = 'token'; |
Вы можете настроить приложение React! Чтобы создать структуру, в которую вы добавите код из следующих нескольких шагов, добавьте следующее index.js:
const Map = () => {}; ReactDOM.render(<Map />, document.getElementById('app')); |
class Map extends React.PureComponent {} ReactDOM.render(<Map />, document.getElementById('app')); |
Это определяет карту, а затем указывает, что она должна быть отображена в <div> с идентификатором приложения.
Отрисовка карты
Вам нужно визуализировать карту в вашем приложении. Точка входа для инициализации карты в приложении React находится через один элемент, указанный в return. Добавьте следующий код в свое приложение:
src/index.js
return ( <div> <div className="map-container" ref={mapContainer} /> </div>); |
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(), если вы используете классы, добавьте следующий код:
map.on('move', () => { setLng(map.getCenter().lng.toFixed(4)); setLat(map.getCenter().lat.toFixed(4)); setZoom(map.getZoom().toFixed(2));}); |
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 будет выглядеть так:
return ( <div> <div className="sidebar"> Longitude: {lng} | Latitude: {lat} | Zoom: {zoom} </div> <div className="map-container" ref={mapContainer} /> </div>); |
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:
.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. Боковая панель показывает текущую широту и долготу центра карты, а также уровень масштабирования. Когда вы масштабируете и перемещаете карту, содержимое боковой панели будет обновляться.
