如何在react-native-mapbox-gl中运行时显示/隐藏栅格图层(可见性

发布时间：2020-12-15 16:18:54 所属栏目：百科来源：网络整理

导读：我在地图初始化中设置了自定义样式网址.喜欢： Mapbox.MapView styleURL="asset://mystyle.json" logoEnabled={false} attributionEnabled={false} ref={(e) = { this.oMap = e }} animate={true} zoomLevel={6} centerCoordinate={[54.0,24.0]} style={{ f

我在地图初始化中设置了自定义样式网址.喜欢：

<Mapbox.MapView
   styleURL="asset://mystyle.json"
   logoEnabled={false}
   attributionEnabled={false}
   ref={(e) => { this.oMap = e }}
   animate={true}
   zoomLevel={6}
   centerCoordinate={[54.0,24.0]}
   style={{ flex: 1 }}
   showUserLocation={true}>
</Mapbox.MapView>

在mystyle.json中我有两个基本地图如下：

{
      "id": "Satellite","type": "raster","source": "Satellite","layout": {
        "visibility": "visible"
      },"paint": {
        "raster-opacity": 1
      }
    },{
      "id": "Satellite2","layout": {
        "visibility": "none"
      },"paint": {
        "raster-opacity": 1
      }
    }

卫星是默认可见的.

如何将卫星属性的可见性设置为none,将satellite2的可见性设置为在运行时可见？

Mapbox gl：

"@mapbox/react-native-mapbox-gl": "^6.1.3"

反应原生：

"react-native": "0.58.6",

解决方法

假设我们有一个状态isStateliteVisible：false,

现在,当您想要查看时,将此状态更改为true

并像这样使用mapbox,

<Mapbox.MapView
   styleURL={this.state.isStateliteVisible?...visiblityStyle:....noneStyle} // use this as per your case
   logoEnabled={false}
   attributionEnabled={false}
   ref={(e) => { this.oMap = e }}
   animate={true}
   zoomLevel={6}
   centerCoordinate={[54.0,24.0]}
   style={{ flex: 1 }}
   showUserLocation={true}>
</Mapbox.MapView>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!