@React-Native-mapbox-gl/map (React-Native)中多边形的灰色外侧区域

Question

我想展示一张这样的地图

​

​

我的代码只显示多边形区域。

下面是我的代码：

 <MapboxGL.ShapeSource
      id="polygonSource"
      maxZoomLevel={12}
      shape={{
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-64.13955742852858, -37.12282253796483],
            [-64.1177564338672, -37.12241191755813],
            [-64.11689812699333, -37.14376122487725],
            [-64.12805611638079, -37.14430856379878],
            [-64.12736947088707, -37.13404529984051],
            [-64.13835579890784, -37.13281361461875]
          ]
          ],
        },
      }}>
      <MapboxGL.FillLayer
        id="polygion"
        style={{
          fillOpacity: 0.5,
          fillColor: '#bbff33',
          fillOutlineColor: 'red',
          // fillColor: 'rgba(255, 255, 255, 0.2)',
        }}
      />
    </MapboxGL.ShapeSource>

我试图在地图上创建一个多边形，并在多边形的区域之外设置为灰色。任何能解释我哪里做错了的人。

Answer 1

我已经通过坐标解决了我的问题。

 <MapboxGL.ShapeSource
      id="polygonSource"
      maxZoomLevel={12}
      shape={{
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-193.359375, -52.908902047770255],
              [192.65625, -52.908902047770255],
              [192.65625, 84.19650681922975],
              [-193.359375, 84.19650681922975],
              [-193.359375, -52.908902047770255],
            ],
            [
              [-77.05796599388123, 38.961269179625134],
              [-77.05622792243958, 38.96127752205847],
              [-77.05621719360352, 38.96044327386091],
              [-77.05621719360352, 38.95991769245298],
              [-77.05600261688231, 38.95884983250593],
              [-77.0563244819641, 38.95831589649745],
              [-77.05686092376709, 38.957898756191405],
              [-77.05697894096375, 38.957698527972255],
              [-77.05717206001282, 38.957089496994705],
              [-77.05738663673401, 38.956780808062035],
              [-77.05768704414368, 38.95672240730187],
              [-77.05801963806152, 38.95673909323827],
              [-77.0582127571106, 38.95663897756105],
              [-77.05847024917603, 38.95632194365002],
              [-77.05842733383179, 38.9560132513738],
              [-77.05767631530762, 38.95559609751282],
              [-77.05752611160278, 38.95532077461942],
              [-77.05763339996336, 38.95504545065637],
              [-77.05765485763548, 38.954736752819755],
              [-77.05740809440613, 38.95437799418506],
              [-77.0558202266693, 38.95349360467786],
              [-77.0552408695221, 38.95292625465489],
              [-77.05503702163696, 38.95266760828427],
              [-77.05485463142394, 38.95213362569452],
              [-77.05441474914551, 38.95193338118615],
              [-77.05340623855591, 38.95174147966809],
            ],
          ],
        },
      }}>
      <MapboxGL.FillLayer
        id="polygion"
        style={{
          fillOpacity: 0.7,
          fillColor: '#b4b4b4',
          fillOutlineColor: '#b4b4b4',
        }}
      />
    </MapboxGL.ShapeSource>