react原生mapbox设置唯一值以旋转SymbolLayer

Question

是否可以分别更改ShapeSource的每个子级的iconRotate？因为我想在路线上添加方向箭头

它类似于这个问题：https://github.com/nitaliano/react-native-mapbox-gl/issues/1173

<MapboxGL.ShapeSource
  id="symbolLayerSource"
  shape={{
      type: 'FeatureCollection',
      features: featureItems
  }}>
     <MapboxGL.SymbolLayer
       id='symbol'
       style={{
           iconImage: Arrow,
           iconSize: 0.3,
           iconAllowOverlap: true
           iconRotate: "unique value"
       }}>
  </MapboxGL.SymbolLayer>
</MapboxGL.ShapeSource>

Answer 1

您可以将标记划分为多个方向箭头，然后对每种类型使用MapboxGL.SymbolLayer

然后，可以使用以下命令过滤标记

filter={["!=", "icon", "symbol"]}

因此，您的代码可能如下所示：

<MapboxGL.ShapeSource
  id="symbolLayerSource"
  shape={{
      type: 'FeatureCollection',
      features: featureItems
  }}>
     <MapboxGL.SymbolLayer
       id='symbol'
       filter={["==", "icon", "arrow_up"]}
       style={{
           iconImage: Arrow_up,
           iconSize: 0.3,
           iconAllowOverlap: true
       }}>
     <MapboxGL.SymbolLayer
       id='symbol'
      filter={["==", "icon", "arrow_down"]}
       style={{
           iconImage: Arrow_down,
           iconSize: 0.3,
           iconAllowOverlap: true
       }}>
     <MapboxGL.SymbolLayer
       id='symbol'
       filter={["==", "icon", "arrow_left"]}
       style={{
           iconImage: Arrow_left,
           iconSize: 0.3,
           iconAllowOverlap: true
       }}>
   <MapboxGL.SymbolLayer
       id='symbol'
       filter={["==", "icon", "arrow_right"]}
       style={{
           iconImage: Arrow_right,
           iconSize: 0.3,
           iconAllowOverlap: true
       }}>
  </MapboxGL.SymbolLayer>
</MapboxGL.ShapeSource>