React Simple Maps

Если вы хотите включить в свой проект React общую динамическую карту, которая отображает некоторые точки и, возможно, имеет простую анимацию, RSM может быть для вас хорошим выбором. Если вы еще не проверяли RSM - поехали.

В этой статье мы будем визуализировать проекцию Альберса США (коническая проекция (согласно данным в Интернете)), которая помещает Гавайи и Аляску в кадр и изменяет их размер. Если вы, как и я, почти ничего не знаете о картографических проекциях, настоятельно рекомендую посмотреть этот замечательный клип, который оказался из Западного крыла.

В любом случае, мы также наносим точки на основе координат широты и долготы, что, к счастью, хорошо работает со смещением AK и HI.

Когда все будет сказано и сделано, мы получим примерно следующее:

Шаг 1:

В вашем терминале в папке текущего проекта запустите - npm install — save react-simple-maps

Шаг 2:

Мы сделаем эту карту компонентом в архитектуре нашего приложения, поэтому создайте новый файл и импортируйте следующие вверху.

import React, { Component } from 'react';
import {
    ComposableMap,
    ZoomableGroup,
    Geographies,
    Geography,
    Markers,
    Marker,
  } from "react-simple-maps"
import {geoAlbersUsa} from "d3-geo";

Эти элементы, импортируемые из react-simple-maps, являются компонентами библиотеки RSM. Из d3-geo (зависимость библиотеки RSM) мы получаем проекцию Альберса, США.

Шаг 3:

Настройте свой компонент класса. На этом этапе вставьте компонент <Map /> в свой код, где бы вы ни хотели, чтобы он отображался.

(import...)
class Map extends Component {
    
    render() { 
        return (
           <div className="map-container">
              ==== EVERYTHING WILL GO IN HERE ====
           </div>
        )
    }
}
export default Map

Шаг 4:

Настройте свой ComposableMap компонент.

<ComposableMap
   projection={geoAlbersUsa}
   projectionConfig={{ scale: 1000 }}
   width={980}
   height={551}
   style={{
      width: "100%",
      height: "auto",
   }}
>
   ==== NEXT ELEMENT WILL BE IN HERE ====
</ ComposableMap>

Обратите внимание, что мы добавляем импортированный geoAlbersUsa. Весь этот компонент позволяет системе узнать наши общие детали, как мы изменяем размер карты, какова будет ее проекция.

Шаг 5:

Добавьте компонент Zoomable Group

<ComposableMap ...>
  <ZoomableGroup center={[ -97, 40 ]} disablePanning>
    ==== NEXT ELEMENT WILL BE IN HERE ====
  </ ZoomableGroup>
</ ComposableMap>

Этот компонент позволяет RSM узнать, где вы будете центрировать карту с желаемой координатой. ОБРАТИТЕ ВНИМАНИЕ! Порядок, в котором вы указываете широту и долготу в массиве, отличается от того, который мы обычно видим. Обязательно введите: [Долгота, Широта]. Вышеуказанные координаты указаны для центральной части США.

S, шаг 6:

Вероятно, самый сложный шаг здесь, нам нужно создать файл topoJSON, который даст нам формы, которые наша проекция будет использовать для создания карты.

  • Перейдите на следующий веб-сайт и загрузите параметр Shapefile: https://gadm.org/download_country_v3.html
  • Перейдите на http://mapshaper.org/
  • Из загруженной папки импортируйте файлы gadm36_USA_1 с расширениями .shp, .dbf и .prj. (Когда вы импортируете первый, появится новый экран. Нажмите на имя файла в верхнем центре, и вы сможете наложить туда другие файлы.)
  • Нажмите «Упростить» в правом верхнем углу и прокрутите вниз до того, сколько деталей вы хотите отобразить в своей программе. Чем это проще, тем эффективнее будет загрузка файла в долгосрочной перспективе. Примените изменения.
  • Экспортируйте файл в topoJSON.
  • Добавьте этот новый блестящий файл topoJSON в свой проект

Шаг 7:

Визуализируйте карту с компонентами <Geographies> и <Geography>.

<ComposableMap ...>
<ZoomableGroup...>
<Geographies  geography='/gadm36_USA.json'>  <---- FILEPATH TO YOUR 
  {(geographies, projection) =>                  TOPOJSON FROM ROOT
    geographies.map((geography, i) =>
     <Geography
       key={i}
       geography={geography}
       projection={projection}
       style={{
         default: {
            fill: "#ECEFF1",
            stroke: "#607D8B",
            strokeWidth: 0.75,
            outline: "none",
         },
         hover: {
            fill: "#CFD8DC",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         },
         pressed: {
            fill: "#FF5722",
            stroke: "#607D8B",
            strokeWidth: 1,
            outline: "none",
         }
      }}
    />
   )
  }
</ Geographies>
</ ZoomableGroup>
</ ComposableMap>

Это итерация по штатам, превращающая каждое из них в «географию». Вам обязательно стоит заглянуть на свой сайт, чтобы взглянуть на карту! Щелкайте, наведите указатель мыши и поэкспериментируйте с изменением стилей.

Шаг 8:

Давайте обозначим точку

<ComposableMap ...>
<ZoomableGroup ...>
<Geographies>
   <Geography ...>
   </ Geography>
</ Geographies>
<Markers>
    <Marker
       marker={{coordinates: [-153.2917758, 67.75961636]}}
       style={{
         default: { fill: "#FF5722" },
         hover: { fill: "#FFFFFF" },
         pressed: { fill: "#FF5722" },
       }}
    >
       <circle
          cx={0}
          cy={0}
          r={5}
          style={{
            stroke: "#FF5722",
            strokeWidth: 3,
            opacity: 0.9,
          }}
       />
    </Marker>
</Markers>
</ ZoomableGroup>
</ ComposableMap>

В маркере - введите координаты, которые вы хотите отобразить. Опять же, помните, что желаемая структура координат - это долгота, а затем широта. (Просмотрите ресурс RSM, предоставленный вверху, чтобы узнать, как перебирать список для создания маркеров.)

Вот и все!

У вас должна получиться красивая карта.