Картограмма — это тематическая карта, на которой области заштрихованы или нанесены узором пропорционально измерению статистической переменной, отображаемой на карте, такой как плотность населения или доход на душу населения.
В этом гайде мы создадим карту Канады Choropleth, но ее можно использовать в качестве руководства для создания аналогичной карты любой страны. Мы будем использовать Datamap для этой цели. Я предполагаю, что вы знакомы с React.
- Создайте новый проект с помощью create-react-app
$ create-react-app map-example
Зайдите в папку проекта и запустите сервер разработки -
$ cd map-example $ yarn start
2. Установите карты данных с помощью yarn или npm
Datamaps предназначен для предоставления некоторых визуализаций данных на основе географических данных. Он основан на SVG, может масштабироваться до любого размера экрана и включает все в одном файле сценария. Он в значительной степени зависит от замечательной библиотеки D3.js.
$ yarn add datamaps
3. Получить файл topoJson страны, для которой необходимо создать карту
Файл topoJson содержит геометрические данные для построения карты страны. Чтобы получить файл TopoJson для определенной страны, выполните следующие действия:
- Перейдите на https://github.com/markmarkoh/datamaps/tree/master/dist
- Найдите файл datamaps.{xyz}.js для страны xyz. xyz — это трехзначный код любой страны. Поскольку мы создаем карту для Канады, мы найдем файл с именем datamaps.can.js в указанном выше репозитории («can» — это трехсимвольный код для Канады).
- Скопируйте содержимое файла и вставьте его в консоль браузера (Вы можете открыть консоль, нажав F12 в браузере).
- Выполните следующий код после запуска вышеуказанного кода в браузере.
copy(Datamap.prototype.canTopo);
Он скопирует данные, возвращенные функцией Datamap.prototype.canTopo, в буфер обмена.
(Вы можете заменить «can» любым другим кодом страны, если вы создаете карту для другой страны).
- Создайте новый файл с именем Canada.topo.json в каталоге src/components в папке проекта.
- Вставьте содержимое, скопированное из консоли браузера.
- Если коды штатов содержат точку (.) в topo json, вам нужно удалить точку из кода, например, если ваш код штата CA.AL, удалите CA. часть, чтобы получить 2-значный код ISO AL. Если код штата уже представлен двузначным кодом ISO или не имеет точки (.), не вносите никаких изменений, следуя следующим шагам.
- Название страны объектов в {xyz}.topo.json должно быть таким же, как мы объявили в области Datamap. например, для Канады в canada.topo.json у нас есть
{“type”:”Topology”,
“objects”:{“can”:{“type”:”GeometryCollection”}}}
и мы предоставили область действия как «Канада» в компоненте карты на следующем шаге. Таким образом, этот случай «может» в canada.topo.json должен быть как «канада», т.е.
{“type”:”Topology”,
“objects”:{“canada”:{“type”:”GeometryCollection”}}}
4. Создайте компонент ChoroplethMap
Это будет компонент, который будет отображать картографическую карту (или географическую тепловую карту) в DOM.
Создайте новый файл с именем ChoroplethMap.js в каталоге src/components в папке проекта.
Содержимое файла должно быть следующим:
Теперь мы рассмотрим приведенный выше код.
Начав с обычных действий, мы импортировали все необходимые пакеты, а также файл topo json.
В методе жизненного цикла componentDidMount мы настроили и визуализировали картограмму Choropleth, используя карты дат и d3.
Мы преобразовали данные, поступающие в качестве реквизита, в формат, который ожидает Datamaps, найдя минимальное и максимальное значение из данных, а затем сгенерировав цветовую палитру с использованием шкалы d3.
После этого мы создали карту с помощью new Datamap() и передачи всех конфигураций и данных для построения карты.
Обратите внимание, что мы переопределили метод setProjection для определения таких свойств карты, как центр и масштаб. Центр карты зависит от страны.
Мы установили [-106.3468, 68.1304], чтобы найти центральную точку Канады на карте мира. Это означает, что широта = -106,3468 восточной долготы и долгота = 68,1304 северной широты. Помните, что широта и долгота всегда указывают на восток и север. Для западных стран широта находится на западе, поэтому преобразуйте ее как отрицательную для востока. например 102,3421 Вт ==> -102,3421 В.
После этого мы визуализировали элемент div с id="choropleth_map", который используется Datamap для визуализации карты.
5. Импорт и визуализация компонента ChoroplethMap в App.js
Теперь внутри компонента App.js мы должны импортировать компонент ChoroplethMap, который мы создали на предыдущих шагах, и визуализировать его внутри элемента div, чтобы компонент приложения выглядел, как показано ниже:
Мы определили некоторые примеры данных в состоянии и передали их компоненту карты в качестве свойств. Кроме того, мы установили высоту и ширину контейнера div с помощью встроенных стилей. Это важно, так как высота и ширина компонента карты равны 100 % родительского элемента.
Теперь запустите $ react start в терминале и протестируйте приложение.
Вы можете клонировать и протестировать проект из следующего репозитория на github —
https://github.com/WebDevRaj/choropleth-карта
Ссылки:
