ios - react-native-maps 为每个区域填充颜色

Question

我需要将动态 GeoJSON 数据渲染到 iOS 中的 map 。

我正在使用 react-native-maps。我能够将 geojson 渲染到 map 上，但它只显示每个区域的笔划而不显示填充颜色:

如何为 map 上的每个州或地区添加独特的颜色？

Answer 1

您需要确保您的 GeoJSON 在 geojson.features[n].properties.fill 处具有有效的填充值。如果您的 GeoJSON 还没有那个值，您可以编写一个函数来添加它。例如:

const colorizedGeojson = {
    ...geojson,
    features: geojson.features.map(feature => ({
        ...feature,
        properties: {
            ...feature.properties,
            fill: getColor(feature.properties.values.population)
        }
    })),
};

您必须实现自己的 getColor 函数，具体取决于您要表示的数据。这里使用的 population 值只是一个例子。使用 d3 插值来获取要表示的值的颜色是一种常见的选择。

将 fill 属性添加到 GeoJSON 数据后，您可以将该对象传递给组件。确保您没有将 fillColor 属性传递给组件，因为这会覆盖特征颜色。

<Geojson geojson={colorizedGeojson} />

就是这样! react-native-maps 组件将使用您选择的颜色呈现每个地区/国家: