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, предоставленный вверху, чтобы узнать, как перебирать список для создания маркеров.)
Вот и все!
У вас должна получиться красивая карта.