如何在react-native-maps中设置Circle或Polygon的外部区域颜色？

嘿，这个需求我之前也碰到过，react-native-maps本身确实没有直接提供“填充外部区域”的属性，但我们可以用反向遮罩的思路来实现，刚好能满足你标记限制区域的需求——让限制区域外的部分显示高亮色，内部保留地图原本的样子。

核心思路很简单：先画一个覆盖整个地图可视范围的大多边形，然后把你要标记的限制区域（Circle或Polygon）作为这个大多边形的“镂空区域”（hole）。这样大多边形的填充色就会成为外部区域的颜色，而镂空的部分就是你要保留的限制区域。

具体实现步骤 #

1. 处理Circle的情况（需要转成Polygon）

因为react-native-maps的Polygon组件的holes属性只接受多边形坐标，所以如果你的限制区域是Circle，得先把它转换成近似的多边形坐标。可以写一个工具函数来计算：

// 将Circle转为近似的Polygon坐标点
const circleToPolygon = (center, radius, points = 64) => {
  const coordinates = [];
  const earthRadius = 6378137; // 地球半径（单位：米）
  const latRadians = (center.latitude * Math.PI) / 180;
  const lngRadians = (center.longitude * Math.PI) / 180;
  
  for (let i = 0; i < points; i++) {
    const angle = (i * 2 * Math.PI) / points;
    // 基于球面几何计算圆周上的点
    const newLat = Math.asin(
      Math.sin(latRadians) * Math.cos(radius / earthRadius) +
      Math.cos(latRadians) * Math.sin(radius / earthRadius) * Math.cos(angle)
    );
    const newLng =
      lngRadians +
      Math.atan2(
        Math.sin(angle) * Math.sin(radius / earthRadius) * Math.cos(latRadians),
        Math.cos(radius / earthRadius) - Math.sin(latRadians) * Math.sin(newLat)
      );
    
    coordinates.push({
      latitude: (newLat * 180) / Math.PI,
      longitude: (newLng * 180) / Math.PI,
    });
  }
  
  coordinates.push(coordinates[0]); // 闭合路径
  return coordinates;
};

2. 构建反向遮罩的Polygon

接下来在地图组件中，先定义一个覆盖整个地图的大多边形（可以用全球范围的坐标，或者根据地图可视区域动态调整），然后把限制区域作为hole传入：

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

// 示例：限制区域的Circle参数
const restrictedCircle = {
  center: { latitude: 37.78825, longitude: -122.4324 },
  radius: 1000 // 单位：米
};

// 覆盖整个地图的大Polygon坐标（全球范围）
const fullMapArea = [
  { latitude: 90, longitude: -180 },
  { latitude: 90, longitude: 180 },
  { latitude: -90, longitude: 180 },
  { latitude: -90, longitude: -180 },
  { latitude: 90, longitude: -180 } // 闭合路径
];

// 将Circle转为可作为hole的Polygon坐标
const circleHole = circleToPolygon(restrictedCircle.center, restrictedCircle.radius);

export default function RestrictedAreaMap() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: restrictedCircle.center.latitude,
        longitude: restrictedCircle.center.longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      {/* 外部区域的遮罩Polygon */}
      <Polygon
        coordinates={fullMapArea}
        holes={[circleHole]}
        fillColor="rgba(255, 0, 0, 0.3)" // 外部区域的半透明红色
        strokeWidth={0} // 不需要边框的话设为0
      />

      {/* 可选：显示限制区域的边界 */}
      <Circle
        center={restrictedCircle.center}
        radius={restrictedCircle.radius}
        strokeColor="#ff0000"
        strokeWidth={2}
      />
    </MapView>
  );
}

3. 处理Polygon的情况（更简单）

如果你的限制区域本身就是Polygon，直接把它的坐标作为hole传入大多边形即可：

// 示例：限制区域的Polygon坐标
const restrictedPolygon = [
  { latitude: 37.789, longitude: -122.433 },
  { latitude: 37.787, longitude: -122.431 },
  { latitude: 37.788, longitude: -122.429 },
  { latitude: 37.789, longitude: -122.433 } // 闭合路径
];

// 在MapView中使用：
<Polygon
  coordinates={fullMapArea}
  holes={[restrictedPolygon]}
  fillColor="rgba(255, 0, 0, 0.3)"
  strokeWidth={0}
/>

额外提示 #

• 如果需要动态适配地图的可视区域，可以监听MapView的onRegionChangeComplete事件，实时更新fullMapArea的坐标，确保遮罩始终覆盖用户当前看到的地图范围。
• 调整fillColor的透明度（比如rgba(255,0,0,0.3)中的0.3），可以让地图底色仍然可见，同时突出外部限制区域。

备注：内容来源于stack exchange，提问作者Burak Tekin