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