Как добавить карту SVG / d3 в React Native? - PullRequest
1 голос
/ 21 января 2020

Вариант использования

Я хочу создать приложение 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;

Это карта, полученная из кода выше:

enter image description here

Я также исследовал, как реализовать формы SVG и даже карты в React Native, и натолкнулся на несколько способов сделать это:

Проблема

Однако я не смог реализовать карту с помощью этих решений. Первые два в приведенном выше списке не упоминают о какой-либо реализации карты, а последняя представляется очень ранней бета-версией. Поэтому мне интересно, возможно ли это в настоящее время даже в React Native. Кто-нибудь знает подход к вставке SVG-карты в React native?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...