如何在React Native中创建完整的世界地图？

Question

我想创建一个完整的世界地图，我可以根据提供的数据绘制一些点。 我已经尝试了许多 React Native 库，但我没有从中得到任何解决方案。

这是我试图使用 React Native 实现的目标的图像。

Answer 1

解决方案

您可以使用 SVG 创建此类地图，方法是查找世界地图 SVG 并跟踪该 SVG 地图中国家/地区的位置。使用这些位置，您可以绘制国家/地区周围的圆圈。

先决条件

我建议阅读this以更好地理解SVG路径。

渲染地图

步骤1

下载 SVG 世界地图。 svg 地图图像中需要的东西是，

• 每个国家/地区应使用单独的 SVG 路径来绘制，以定位国家/地区或附近地区。
• SVG 应该是可扩展的。

我从 SimpleMaps 下载了 svg 地图。这里的地图具有我上面提到的两件事。您可以选择下载具有自定义高度/宽度的地图，并且每个国家/地区都使用单独的路径绘制。

第2步

将下载的SVG转换为JSX，网上有很多转换器，这个是我使用的。 现在在屏幕上渲染这个转换后的 JSX。

这样，我们就完成了地图。

绘制圆圈

步骤1

在下载 SVG 地图时，我们检查每个国家/地区都是使用单独的路径绘制的，您还可以注意到每个路径都有一个以国家/地区命名的 id 或类。这个名字可能是简写。这就是我们为各个国家找到路径的方式。

第2步

要了解这部分，必须先阅读this。

现在假设印度的地图路径以

M223.14 53.577

开头，这意味着在整个世界地图中，我们将在该点得到印度的位置（223.1, 53.577）。通过这种方式，您可以使用路径获取地图中任何国家/地区的位置。我们可以用这个点来绘制一个圆。

第3步

要在该点上绘制圆，我们将使用

Circle

中的

react-native-svg

， 在 svg 的末尾绘制这个圆圈，就在像这样关闭 Svg 标签之前，

    ...
       <Circle cx={223.14} cy={53.577} r={5} fill={'red'}/>
    </Svg>

请注意，您从路径获得的位置位于国家/地区边界，您可能需要调整位置以使圆圈位于您所需的位置。

结果

我已经创建了this零食，可以免费使用我从上面建议的网站下载的地图，你可以按照它，我在这里画了一个关于英国的圆圈。如前所述，您也可以下载自定义尺寸的地图 svg，但我认为这不是免费使用的，因此我没有在其中使用自定义尺寸地图，但您将需要具有自定义尺寸的地图以使其适合移动屏幕。

编辑

检查 this 小吃，我已经在一个对象中映射了 3 个国家，并使用了您共享的相同 api 响应。它也正在动态工作，您现在只需在该位置添加更多国家/地区即可。我在这里使用 this svg 世界地图。

我已将您共享的api响应传递给世界地图组件

<WorldMap apiResponse={apiResponse} />

在

WorldMap

组件中，我已将国家/地区位置映射到其 ID，如下所示，

const COUTRIES = {
  'ZA' : [562.70375, 527.0484],
  'GB' : [471.90475,298.2024],
  'US' : [79.174748,187.7204],
}

为了绘制圆圈，我在 SVG 末尾添加了圆圈，

    {
      props.apiResponse.map(country => 
        <Circle cx={COUTRIES[country.id][0]} cy={COUTRIES[country.id][1]} r={10} fill={'red'} key={country.id} />
      )
    }

现在您只需使用每个国家/地区 ID 和位置更新

COUNTRIES

对象， 它会动态地在地图上绘制圆圈。

截图

Answer 2

考虑使用完整的地图 sdk，例如 mapbox、maplibre 或 Google 地图，并托管自定义图块集。

为什么要使用地图sdk？

• 使用图像进行所有这些计算可能可行，但可能会耗费大量时间，容易出错，需要进行大量测试。 VS map-sdk 已经提供了大部分计算。
• 绘制具体特征。就像显示当前位置一样。地图 SDK 做得很好。

示例 Mapbox 允许自定义地图样式，您可以直接托管自己的图块/图层。 看这里

这些服务中的大多数都有反应本机变体。示例

• @rnmapbox/地图

这些服务将允许您使用世界坐标在地图上准确放置点。您将需要为您的图钉添加符号图层，添加自定义图像作为源，并使用与符号类型匹配的坐标将位置固定在地图上。

Answer 3

导入地图以将本机反应为 jpg，以获得更好的性能和加载时间速度，然后创建一个可压的，在该可压的内创建一个圆圈，然后创建另一个视图并将其可见性设置为一个名为可见的钩子布尔变量，在该视图内创建一个将显示数据的文本标签，当按下可压时，useState 钩子将更新页面并将可见设置为 true。

const Car = (props) =>{
 if(props.visibility == true){
 return (<View><Text>Data</Text></View>)
 }
 else{
 return 0;
}

const Map = () => {
const [visible, setvisible] = useState(false);

return(
<Image width={400} height={200} src={require('path')}/>
<Pressable onPress={()=> setvisible(true)}>
<View style={{borderRadius:50,backgroundColor:'red', marginTop: 50, marginLeft:50}}/>
</Pressable>
<Card visibility={visible}/>
);
}