react-native-maps使用Geojson组件时如何为不同区域设置不同填充色

可以通过给Geojson组件的fillColor属性传入回调函数实现不同区域自定义填充色，该回调会接收当前渲染的GeoJSON Feature对象作为入参，你可以根据Feature内的属性返回对应的填充色即可。

实现示例 #

首先确认你的GeoJSON文件中每个区域（Feature）的properties字段包含可区分不同区域的标识（比如国家名、国家ISO编码、区域ID等），参考以下代码修改：

// 1. 预先定义区域标识到颜色的映射表，可根据自己的需求调整
const regionColorMap = {
  "CN": "#f44336", // 中国对应红色
  "US": "#2196f3", // 美国对应蓝色
  "JP": "#4caf50", // 日本对应绿色
  // 可继续添加更多区域的颜色配置
}

<MapView
   style={styles.map}
   zoomEnabled
   provider={PROVIDER_GOOGLE}
 >
      <Geojson 
         fillColor={(feature) => {
           // 2. 从当前Feature的属性中取区域标识，字段名要和你GeoJSON内properties的实际字段对应
           const countryCode = feature.properties.iso_a2
           // 匹配到对应颜色就返回，无匹配返回默认灰色
           return regionColorMap[countryCode] ?? "#cccccc"
         }}
         geojson={geojson}
      />
</MapView>

补充说明 #

• 如果你需要根据数值维度（比如人口、GDP）生成渐变色，也可以直接在回调中写逻辑计算对应色值返回即可
• 描边颜色strokeColor、描边宽度strokeWidth等样式属性，也支持使用同样的回调方式为不同区域配置差异化样式
• 如果你的GeoJSON没有带区分字段，也可以先手动给每个Feature的properties新增自定义标识字段，再在回调中判断即可

内容的提问来源于stack exchange，提问作者Exoriri