Как показать / скрыть растровый слой (свойство видимости visible / none) во время выполнения в react-native-mapbox-gl

#react-native #react-native-mapbox-gl

Вопрос:

Я установил URL пользовательского стиля при инициализации карты. Нравится :

 <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",
      "type": "raster",
      "source": "Satellite",
      "layout": {
        "visibility": "none"
      },
      "paint": {
        "raster-opacity": 1
      }
    }

По умолчанию виден спутник.

Как установить видимость свойства satellite равной none, а видимость satellite2 — видимой во время выполнения?

Mapbox gl :

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

React native :

 "react-native": "0.58.9",

Ответ №1:

Наконец-то я получил решение :

 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>

Я добавил растровый слой и программно переключил его.

Ответ №2:

допустим, у нас есть одно состояние 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>

1. Спасибо за вашу логику, но у меня есть более 2 слоев, которые я хочу показать и скрыть программно.

2. вы имеете в виду более двух стилей для одной карты или более двух карт?

3. Я использовал mapbox-gl-js, подобный этому.oMap.setLayoutProperty («layerid», ‘visibility’, ‘none’); для моего веб-сайта и искал то же самое в react-native-mapbox-gl

4. надеюсь, вы понимаете мою ситуацию

5. ну, я не знаю, доступен ли какой-либо метод прямого манипулирования, подобный setLayoutProperty , но вы можете создать controllerMethod и использовать switch внутри него и возвращать из него любой стиль, который вы хотите.

Ответ №3:

Я вижу, что вы используете более старую устаревшую версию mapbox-gl. Этот пакет устарел, пожалуйста, используйте это вместо.

Установка

Зависимости

 node
npm
React Native recommended version 0.50 or greater

Git

 git clone git@github.com:mapbox/react-native-mapbox-gl.git
cd react-native-mapbox-gl

Yarn

 yarn add @mapbox/react-native-mapbox-gl

Npm

 npm install @mapbox/react-native-mapbox-gl --save

Все готово!

1. Я использую последнюю версию.

2. Знаете ли вы, как изменить видимость слоя во время выполнения?

3. Смотрите github.com/agius/react-native-mapbox-gl/blob/master/docs / … но я не знаю, как изменить видимость во время выполнения.

4. docs.mapbox.com/help/troubleshooting/mapbox-gl-js-performance /… . Пожалуйста, проверьте это. я думаю, это могло бы помочь @KhurshidAnsari

5. Это mapbox gl js