用例

我想创建一个React Native应用，该应用在具有特殊地图投影的世界地图上显示存储在PostGIS数据库中的坐标。

到目前为止我做了什么

我已成功将地图加载到应用程序的Web版本的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（SVG）
• React Native ART（SVG）
• react-native-simple-maps（地图）

问题

但是，我无法使用这些解决方案来实现任何地图。上面列表中的前两个没有提及任何地图实现，而后一个似乎是非常早期的beta版本。所以我想知道在React Native中目前是否还可以做到这一点。有人知道在React native中插入SVG地图的方法吗？