如何在运行时在react-native-mapbox-gl中显示/隐藏栅格图层(可见性属性可见/无) [英] How to show/hide raster layer (visibility property visible/none) at run time in react-native-mapbox-gl

问题描述

我在地图初始化中设置了自定义样式网址.像:

I have set custom style url in map initialization. Like :

<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中，我有两个基本映射，如下所示:

In mystyle.json I have two base map as below :

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

默认情况下，卫星"是可见的.

Satellite is visible default.

如何在运行时将Satellite属性的可见性设置为none，将Satellite2可见性设置为可见?

How to set visibility of satellite property to none and satellite2 visibility to visible at run time?

Mapbox gl:

Mapbox gl :

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

反应本机:

"react-native": "0.58.9",

推荐答案

最后我得到了解决方案:

Finally I got solution :

constructor() {
   this.state = {
      lightMap: 'visible', 
      darkMap: 'none'
   };
} 

changeMap(){
   this.setState({darkMap:'visible'})
}

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

<MapboxGL.RasterSource
   id="idLightMap" 
   url="LAYERURL1"
   tileSize={256}>
   <MapboxGL.RasterLayer 
      id="idLightMap"
      sourceID="idLightMap"
      style={{visibility: this.state.lightMap}}>
   </MapboxGL.RasterLayer>
</MapboxGL.RasterSource>

<MapboxGL.RasterSource
   id="idDarkMap" 
   url="LAYERURL2"
   tileSize={256}>
   <MapboxGL.RasterLayer
      id="idDarkMap"
      sourceID="idDarkMap"
      style={{visibility: this.state.darkMap}}>
   </MapboxGL.RasterLayer>
</MapboxGL.RasterSource>

</MapboxGL.MapView>

我添加了栅格图层并以编程方式对其进行切换.

I have added raster layer and programmatic toggling it.

这篇关于如何在运行时在react-native-mapbox-gl中显示/隐藏栅格图层(可见性属性可见/无)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！