React+OpenLayers地图组件故障：GeoJSON不渲染、定位失效且无法共存

我正在开发一个基于React和OpenLayers的地图组件，用于渲染GeoJSON要素并追踪用户地理位置。地图可正常初始化，但存在以下问题：

• GeoJSON要素无法渲染
• 点击“Track Position”按钮后，地图无法更新用户位置
• 即使GeoJSON要素与用户位置重合，两者也无法同时显示，同一时间仅能生效其一

已验证：

• GeoJSON格式正确
• vectorSource、vectorLayer配置无误

相关代码 #

// ShareMap.js - OpenLayers in React
import React, { Component, createRef } from 'react';
import { Feature, Map, View } from 'ol';
import TileLayer from 'ol/layer/WebGLTile';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { defaults as defaultInteraction } from 'ol/interaction';
import GeoJSON from 'ol/format/GeoJSON';
import { fromLonLat } from 'ol/proj';
import { Point } from 'ol/geom';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import 'ol/ol.css';
import 'ol-ext/dist/ol-ext.min.css';
import { Crosshair2Icon } from 'lucide-react';

class ShareMap extends Component {
    mapRef = createRef();

    vectorSource = new VectorSource({ wrapX: false });

    vectorLayer = new VectorLayer({
        source: this.vectorSource,
        style: () => new Style({
            image: new CircleStyle({
                radius: 6,
                fill: new Fill({ color: 'blue' }),
                stroke: new Stroke({ color: 'white', width: 2 }),
            }),
        }),
    });

    constructor(props) {
        super(props);
        this.state = { isLoading: true, isTrack: false };
    }

    renderGeoLocation = async () => {
        const map = this.mapRef.current?.map;
        if (!map && !this.state.isTrack) return;

        const pointStyle = new Style({
            image: new CircleStyle({
                radius: 8,
                fill: new Fill({ color: '#3399CC' }),
                stroke: new Stroke({ color: '#fff', width: 2 }),
            }),
        });

        const userFeature = new Feature();
        userFeature.setStyle(pointStyle);

        const getUserCoords = () => {
            return new Promise((resolve) => {
                if (!navigator?.geolocation) return resolve([]);

                navigator.geolocation.getCurrentPosition(
                    (pos) => resolve([pos.coords.longitude, pos.coords.latitude]),
                    (error) => {
                        alert(`ERROR: ${error.message}`);
                        resolve([]);
                    },
                    { enableHighAccuracy: true }
                );
            });
        };

        const coords = await getUserCoords();
        if (!coords.length) return;

        const transformedCoords = fromLonLat(coords);
        userFeature.setGeometry(new Point(transformedCoords));

        this.vectorSource.clear();
        this.vectorSource.addFeature(userFeature);

        this.setState({ isTrack: false });
    };

    renderGeoJsonData = () => {
        try {
            const map = this.mapRef?.current?.map;
            if (this.props.geoJson && map) {
                this.vectorSource.clear();
                const features = new GeoJSON().readFeatures(JSON.parse(this.props.geoJson));
                if (features.length > 0) {
                    this.vectorSource.addFeatures(features);
                }
            }
            this.vectorSource.changed();
        } catch (err) {
            console.error(err);
        }
    };

    mapRender = () => {
        const map = new Map({
            interactions: defaultInteraction(),
            target: 'mapShare',
            layers: [new TileLayer({ source: new OSM() }), this.vectorLayer],
            view: new View({ center: fromLonLat([0, 0]), zoom: 5 }),
        });

        this.mapRef.current = { map };
        this.renderGeoLocation();
        this.renderGeoJsonData();
    };

    componentDidMount() {
        if (!this.mapRef?.current?.map) this.mapRender();
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.isTrack !== this.state.isTrack) {
            this.state.isTrack && this.renderGeoLocation();
        }
    }

    trackPosition = () => {
        this.setState({ isTrack: true });
    };

    render() {
        return (
            <div className="h-full w-full relative flex items-center justify-center">
                <button
                    type="button"
                    className="flex items-center space-x-2 absolute right-4 top-5 rounded-lg bg-white p-2 shadow z-50 hover:bg-gray-50"
                    onClick={this.trackPosition}
                >
                    <Crosshair2Icon />
                    <span className="text-sm">Track Position</span>
                </button>

                <div id="mapShare" className="h-full w-full"></div>
            </div>
        );
    }
}

export default ShareMap;

已尝试的解决措施 #

• 使用在线验证工具确认GeoJSON结构合法
• 确保vectorSource.addFeatures()传入有效要素
• 调用vectorSource.changed()强制重渲染
• 尝试实现位置重合时两者共存但未成功

内容的提问来源于stack exchange，提问作者Maherabbas Momin