nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 699 forks source link

OnPress to select 3D extruded layer (raycasting) #1704

Open tempranova opened 3 years ago

tempranova commented 3 years ago

Hello! I am working on a project where we are extruding 3D buildings and allowing the user to press to select/highlight a given building.

There are a few Mapbox GL JS examples that do this, where we can select the building by clicking on the extrusion. See https://demos.mapbox.com/buildings-picker-3d/#17.63/40.714793/-73.991739/16/60 for an example.

In reconstructing this example inside React Native Mapbox, it appears that queryRenderedFeaturesAtPoint does not select anything if the "base" of the polygon is not directly pressed. This mirrors the original issue that the Mapbox GL JS library had (https://github.com/mapbox/mapbox-gl-js/issues/3122).

Is there something I am missing here, or can anyone else confirm if this is not able to be done in React Native Mapbox?

Thanks. Some relevant basic code is included below.

const onPress = async (e) => {
    var features = await _map.current.queryRenderedFeaturesAtPoint([e.properties.screenPointX, e.properties.screenPointY], null, ['3d-buildings']);
    console.log(features);
    if(features.features) {
      console.log(features.features)
    }
  }

<MapboxGL.MapView
          ref={_map}
          style={styles.map}
          styleURL="mapbox://styles/labs-sandbox/ck2aiw9cl37jr1co3qfrdazd4"
          onPress={(e) => onPress(e)}
        >
          <MapboxGL.Camera
            defaultSettings={{
              centerCoordinate : [-74.0066, 40.7135],
              zoomLevel : 15.5,
              pitch : 80,
              bearing: -17.6,
            }}
          />
          <MapboxGL.FillExtrusionLayer
            id="3d-buildings"
            sourceID="composite"
            sourceLayerID="buildings_plus"
            filter={["==", "extrude", "true"]}
            minZoomLevel={14}
            style={{
              fillExtrusionColor: [
                "match",
                ["feature-state", "highlight"],
                "true",
                "#F0F",
                "#09F"
              ],
              // use an 'interpolate' expression to add a smooth transition effect to the
              // buildings as the user zooms in
              fillExtrusionHeight: [
                "interpolate",
                ["linear"],
                ["zoom"],
                15,
                0,
                15.05,
                ["get", "height"]
              ],
              fillExtrusionBase: [
                "interpolate",
                ["linear"],
                ["zoom"],
                15,
                0,
                15.05,
                ["get", "min_height"]
              ],
              fillExtrusionOpacity: 0.6
            }}
          />
        </MapboxGL.MapView>