Введение в React MapBox GL JS

Отображение полигонов

Хорошо вернуться! Вернемся к другой статье о React MapBox. Это длилось слишком долго, и я был безумно занят, так что надеюсь, что смогу помочь некоторым людям.

Если вас интересуют другие статьи о React MapBox и о том, как что-то делать, см.

В противном случае читайте дальше!

Полигоны

Полигоны - отличный способ визуализировать область. Я использую их все время на работе, они чрезвычайно важны для того, что мы делаем. Многоугольник - это, по сути, замкнутый пространственный объект, где первая точка совпадает с последней, образуя замкнутую область.

Бум. Пять районов Нью-Йорка.

React Map GL и React MapBox GL:

На самом деле это разные библиотеки. До сих пор в своих статьях я использовал React Map GL (библиотека с открытым исходным кодом Ubers), поэтому, если вы хотите узнать об этом больше, посмотрите другие статьи. Но сейчас я собираюсь перейти на React MapBox GL. Причина этого заключается в простоте реализации полигонов, а оболочка React MapBox GL также имеет функцию рисования, о которой я определенно собираюсь написать статью.

Если вы хотите увидеть различия, ознакомьтесь с ними здесь.

React Map GL

Реагировать на MapBox GL

Настраивать:

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

create-react-app polygon
cd polygon
npm install react-mapbox-gl mapbox-gl — save
Открой это!

Итак, эта установка будет очень похожа на то, что мы видели до сих пор. Идея состоит в том, что мы загружаем карту, добавляем слой, а затем придаем нашему слою необходимые размеры (источник GeoJSON).

GeoJSON:

Если вам нравятся карты, вы захотите познакомиться с GeoJSON, если вы собираетесь работать с картами и географией, вы познакомитесь с ним. Проверить,

Https://github.com/tmcw/awesome-geojson

Существует безумное количество бесплатного GeoJSON. Я выбрал Орегон, это мой родной штат. Я имею в виду полигон? Оригон? Можете ли вы придумать лучшее состояние для создания многоугольника?

Если хотите, можете воспользоваться моим примером, в противном случае найдите собственный GeoJSON. Вот небольшой фрагмент того, как выглядят мои данные GeoJSON, потому что, если ваши данные не являются sqaure, ваш GeoJSON будет огромным.

В общем, так выглядит GeoJSON, много широт и долгот.

Вот ссылка на то, где я получил свой GeoJSON.

Https://raw.githubusercontent.com/glynnbird/usstatesgeojson/master/oregon.geojson

Код:

Очевидно, нам нужно загрузить карту. Это делается так же, как и в другом руководстве, за исключением import ReactMapboxGL from “@urbica/react-map-gl”.

Затем используйте компонент ReactMapboxGL вот так.

Это делает то, что вы думаете, дает нам навигационную карту с состоянием, нашим accessToken и стилем карты.

Мы собираемся использовать компонент Source и компонент Layer.

Поэтому мы должны импортировать их, изменив наш импорт ReactMapboxGL на,

import ReactMapboxGL, { Source, Layer } from “@urbica/react-map-gl”

Источник:

Это компонент, который мы используем, чтобы указать на фактические данные, которые мы используем. Вы можете использовать его, чтобы указать на конечную точку API GeoJSON,

Бывший. Https://raw.githubusercontent.com/glynnbird/usstatesgeojson/master/alaska.geojson

Или вы можете разместить свой GeoJSON в локальном каталоге проекта в файле .json или даже встроить его.

Параметры:

id: Обязательно, это необходимо, чтобы связать ваш слой с источником данных (который является компонентом Source).

data: это свойство используется для указания на наш источник данных (конечную точку api, файл json или встроенный объект GeoJSON).

Слой:

Это сам слой, визуальная часть. Здесь есть много вариантов, поэтому, если вы хотите поэкспериментировать, сделайте это самостоятельно, потому что я не собираюсь проходить через все.

Мы собираемся использовать свойства id, type и fill.

id: он должен быть, вы можете назвать его как угодно.

type: это предоставляемый вами тип GeoJson, а заливка связана с многоугольниками, поэтому мы его используем.

source: очень важно, это значение id нашего компонента Source.

paint: это стиль, в котором мы хотим, чтобы наш цвет заливки был, подробнее об этом.

Итак, теперь наш рендер выглядит именно так.

Идите вперед и проверьте страницу, и вы должны увидеть многоугольник!

Заключение:

Мне нравится этот инструмент. Он очень полезен для визуализации и дает отличные возможности для использования данных GeoJSON. Вы можете легко представить, что делаете намного больше со слоями и данными GeoJSON, и теперь вы знаете основы, так что вперед!