反应原生 mapbox 设置唯一值来旋转 SymbolLayer答案

【问题标题】：react native mapbox set unique value to rotate SymbolLayer反应原生 mapbox 设置唯一值来旋转 SymbolLayer
【发布时间】：2021-03-30 12:12:56
【问题描述】：

是否可以为 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>

【问题讨论】：

标签： reactjs react-native mapbox native

【解决方案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>

【讨论】：