Вариант использования
Я хочу создать приложение React Native, которое отображает координаты, хранящиеся в базе данных PostGIS на карте мира со специальной проекцией карты.
Что я сделал до сих пор
Я успешно загрузил карту в среду React для моей веб-версии приложения. Это код, который я реализовал (только включая компонент, который содержит карту):
import React, { useEffect, useRef } from 'react';
import Aux from '../../../../hoc/Auxiliary';
import styles from './Backmap.module.css';
import * as d3 from "d3";
import { feature } from "topojson-client";
import landmass from "./../../../../land-50m";
const Backmap = (props) => {
const mapContainer = useRef(null);
let width = props.windowSize.windowWidth;
let height = props.windowSize.windowHeight;
useEffect(() => {
const svg = d3.select(mapContainer.current)
.attr("width", width)
.attr("height", height)
const g = svg.append("g")
let features = feature(landmass, landmass.objects.land).features
let projection = d3.geoAzimuthalEqualArea()
.center([180, -180])
.rotate([0, -90])
.fitSize([width, height], { type: "FeatureCollection", features: features })
.clipAngle(150)
let path = d3.geoPath().projection(projection)
g.selectAll("#landmass")
.data(features)
.enter().append("path")
.attr("id", "landmass")
.attr("d", path);
}, [])
return (
<Aux>
<svg
className={styles.Backmap}
width={props.windowSize.windowWidth}
height={props.windowSize.windowHeight}
ref={mapContainer}
>
</svg>
</Aux>
)
}
export default Backmap;
Это карта, полученная из кода выше:
Я также исследовал, как реализовать формы SVG и даже карты в React Native, и натолкнулся на несколько способов сделать это:
Проблема
Однако я не смог реализовать карту с помощью этих решений. Первые два в приведенном выше списке не упоминают о какой-либо реализации карты, а последняя представляется очень ранней бета-версией. Поэтому мне интересно, возможно ли это в настоящее время даже в React Native. Кто-нибудь знает подход к вставке SVG-карты в React native?