时间戳

首页 > 解决方案 > 世博地图查看国家颜色

reactjs - 世博地图查看国家颜色

问题描述

我需要有关 Expo MapView 的帮助。 在此处输入图像描述

我想在 MapView 上实现这种表示。我尝试使用多边形，但是很难找到所有的国家边界，并且不确定这是否是我能做到这一点的唯一方法。

标签： reactjsreact-nativemapsexpo

解决方案

我设法找到了解决方案，如果有人有相同的要求，我会在这里解释。我使用了 react-native-maps 和 GeoJson 功能中的 MapView。我也从这里复制了 json 文件：https ://github.com/johan/world.geo.json

  1. 从 json 文件中复制内容后，将其放在项目中的某个位置（我在 assets/georgia.json 中添加了

  2. 转到组件并添加以下代码：

    import React, { Component } from 'react'

    import { StyleSheet, Dimensions } from 'react-native'

    import MapView, {Geojson} from 'react-native-maps';

    import myPlace from '../../assets/georgia.json';

    export default class DataCoverage extends Component { render() { return ( <MapView style={styles.mapStyle} > <Geojson geojson={myPlace} strokeColor="#0568AE" fillColor="#009FDB" strokeWidth={2} /> </MapView> ); } }

    const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, mapStyle: { width: Dimensions.get('window').width, height: Dimensions.get('window').height, }, })

  3. 地图应以您想要的突出显示的国家/地区呈现。

  4. 如果您想要多个国家/地区，您只需复制“功能”对象并粘贴到您的 json 文件中的全局功能数组中（在我的情况下：georgija.json）。
  5. 如果您有任何问题，请随时提出。

推荐阅读