5

我在地图初始化中设置了自定义样式 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
      }
    }

卫星默认可见。

如何在运行时将卫星属性的可见性设置为无，将卫星 2 的可见性设置为可见？

地图框 gl ：

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

反应原生：

"react-native": "0.58.9",
4

3 回答 3

4

最后我得到了解决方案：

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>

我添加了栅格图层并以编程方式切换它。

于 2019-03-10T10:40:33.050 回答
3

假设我们有一个状态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>
于 2019-03-07T06:55:54.200 回答
2

我可以看到您使用的是旧版本的 mapbox-gl。此软件包已弃用，请改用此软件包。

安装

依赖项

node
npm
React Native recommended version 0.50 or greater

吉特

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

纱

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

Npm

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

你可以走了！

于 2019-03-07T05:17:06.463 回答