Почему значки Mapbox Symbol Layer становятся прозрачными с помощью MapboxGL React Native? - PullRequest
Новая
       18

Почему значки Mapbox Symbol Layer становятся прозрачными с помощью MapboxGL React Native?

0 голосов
/ 29 октября 2019

Я использую библиотеку MapboxGL React Native на моем эмуляторе Android.

Я успешно показываю значки для своих функций с использованием слоев символов. Я хотел бы показать альтернативное изображение значка при выборе булавки. Однако в момент выбора булавки они становятся слегка прозрачными, что не является тем, что я намереваюсь.

Кроме того, когда я увеличиваю карту, она начинает показывать правильные изображения.

Что я делаю не так?

Пожалуйста, смотрите код ниже. 

import MapboxGL from "@react-native-mapbox-gl/maps"
import pinImage from '../../Assets/Images/pin.png'
import pinSelectedImage from '../../Assets/Images/pinSelected.png'


const layerStyles = {
  pin: {
    iconImage: pinImage,
    iconSize: 0.3,
    iconOpacity: 1,
    iconAllowOverlap: true,
    iconIgnorePlacement: true
  },
  pinSelected: {
    iconImage: pinSelectedImage,
    iconSize: 0.3,
    iconOpacity: 1,
    iconAllowOverlap: true,
    iconIgnorePlacement: true
  }
}

class ExampleScreen extends React.Component {
  constructor() {
    super()

    this.state = {
      selectedPinID: null
    }
  }

  buildFeatureCollection() {
    return {
      "type": "FeatureCollection",
      "features": this.props.m.map( m => {
        return {
          type: "Feature",
          id: m.id,
          properties: {
            id: m.id,
            m: m.fields,
            isSelected: this.state.selectedPinID === m.id
          },
          geometry: {
            type: "Point",
            coordinates: [ x, y ],
          }
        }
      })
    }
  }

  onPress( e ) {
    const feature = e.nativeEvent.payload;
    this.setState({ selectedPinID: feature.properties.id })
  }

  render() {
    const featureCollection = this.buildFeatureCollection();

    console.log("FC", featureCollection)

    return (
               <MapboxGL.MapView 
                  style={styles.map}
                  >
                  <MapboxGL.UserLocation />   
                  <MapboxGL.Camera 
                    zoomLevel={12} 
                    followUserLocation={false} 
                    followUserMode='normal' 
                    centerCoordinate={[0.1275000, 51.5074000]} />

                  <MapboxGL.ShapeSource
                    id="symbolLocationSource"
                    hitbox={{ width: 30, height: 30 }}
                    shape={featureCollection}
                    onPress={this.onPress}
                  >
                    <MapboxGL.SymbolLayer
                      id="pin"
                      filter={['==', 'isSelected', false]}
                      style={layerStyles.pin}
                    />
                    <MapboxGL.SymbolLayer
                      id="pinSelected"
                      filter={['==', 'isSelected', true]}
                      style={layerStyles.pinSelected}
                    />

                  </MapboxGL.ShapeSource>
                </MapboxGL.MapView>
     )
  }
}
...