@ react-native-mapbox-gl / maps中多边形的灰色外侧区域React-Native

编程问答 2022-06-11

问题描述

我想显示这样的地图

enter image description here

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

这是我的代码：

 <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,0.2)',}}
      />
    </MapBoxGL.ShapeSource>

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

解决方法

我通过使用坐标来解决了我的问题。

 <MapboxGL.ShapeSource
      id="polygonSource"
      maxZoomLevel={12}
      shape={{
        type: 'Feature',geometry: {
          type: 'Polygon',coordinates: [
            [
              [-193.359375,-52.908902047770255],[192.65625,84.19650681922975],[-193.359375,],[
              [-77.05796599388123,38.961269179625134],[-77.05622792243958,38.96127752205847],[-77.05621719360352,38.96044327386091],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>
mapboxmapboxmapbox-glmapspolygon