如何將 activeID 的狀態設置為 React Native 中 MapBox 上選定圖標的特定 feature.id

Question

從如何使用 MapBox 和 React Native 將地圖集中在單擊的符號上所述的問題繼續前進？ ，我一直在嘗試從我的 geoJson 設置我的 activeID（我選擇的功能的 ID）的狀態。 也就是，當我選擇具有特定 feature.id 的圖標時，如何將狀態設置為該圖標的 feature.id。 在我下面的代碼中，activeID 未定義。 誰能告訴我我可能做錯了什么？ 謝謝！

更新：我試圖 console.log feature.id （見下面的代碼），但我沒有定義。 我由於某種原因無法達到它。

示例功能：

{ "type": "FeatureCollection", "features": [ { "id": 1, "type": "Feature", "properties": { "name": "Hotel" }, "geometry": { "type ": "點", "坐標": [ 12.584664, 55.680532 ] } }

---

constructor(props) {
    super(props);

    this.state = {
    activeIndex: 0,
    activeID: -1,

    this.onPress = this.onPress.bind(this);
    this.onActiveIndexChange = this.onActiveIndexChange.bind(this);

async onPress(pressFeature) {
    const { screenPointX, screenPointY } = pressFeature.properties;

    const hitFeatureCollection = await this.map.queryRenderedFeaturesAtPoint(
            [screenPointX, screenPointY],
            null,
            ['singleIcon']
     );

    let feature = null;
    let currentFeature = null;
    if (hitFeatureCollection.features.length > 0) {
        feature = hitFeatureCollection.features[0];

        for (let i = 0; i < this.props.featureCollection.features.length; i++) {
            currentFeature = this.props.featureCollection.features[i];
            console.log(feature.id);

            if (feature.id === currentFeature.id) {
                this.setState({
                    activeIndex: i,
                    isChangeFromPress: true,
                    destination: feature.geometry.coordinates
                });
            break;
        }
    }
}

onActiveIndexChange(index) {
    const feature = this.props.featureCollection.features[index];

        if (!feature) {
            return;
        }

        this.setState({
            activeIndex: index,
            activeID: feature.id,
            isChangeFromPress: false,
            destination: feature.geometry.coordinates
        });
}

Answer 1

短期解決方案是向 feature.properties 添加一個 id，所以新的 geoJson 看起來像這樣：

{ "type": "FeatureCollection", "features": [ { "id": 1, "type": "Feature", "properties": { "placeID": 1, "name": "Hotel" }, "幾何”：{“類型”：“點”，“坐標”：[ 12.584664, 55.680532 ] } }

如果您有更好的解決方案，請告訴我！