OpenLayers 5 ExtentInteraction getTopLeft 等

Question

我正在使用 OpenLayers 5 ExtentInteraction 来构建边界框。 这就是我实现此功能的方式：

const vectorSource = new VectorSource({
    url: 'data/geojson/countries.geojson',
    format: new GeoJSON(),
});

const extent = new ExtentInteraction({ condition: shiftKeyOnly });
/**
 *
 * @param {*} props
 */
function OpenLayer(props) {
    const [map, setMap] = useState();

    const mapElement = useRef();
    mapElement.current = map;

    useEffect(() => {
        const initialMap = new Map({
            target: mapElement.current,
            layers: [
                new TileLayer({
                    source: new OSM(),
                }),
                new VectorLayer({
                    source: vectorSource,
                }),
            ],
            view: new View({
                center: [0, 0],
                zoom: 0,
            }),
        });
        setMap(initialMap);
        initialMap.addInteraction(extent);
    }, []);
    /**
     *
     * @param {*} props
     */
    const extentChange = () => {
        const topLeft = olExtent.getTopLeft(extent);
        const topRight = olExtent.getTopRight(extent);
        const bottomLeft = olExtent.getBottomLeft(extent);
        const bottomRight = olExtent.getBottomRight(extent);
        console.log('topLeft: ', topLeft, topRight, bottomLeft, bottomRight);
    };

    return (
        <div className="mapRow">
            <div ref={mapElement} onClick={extentChange} className="map-container" />
        </div>
    );
}

在 extentChange() 中，console.log 值返回未定义。 我确实注意到我可以简单地 console.log 范围并返回一个数组，我认为这是我需要的四个点，但我不确定是否是这种情况。 这就是我要说的：

    const extent = new ExtentInteraction({ condition: shiftKeyOnly });

    console.log('extent: ', extent);

最后，我想知道对象中的这些值是否等同于 getTopLeft、getTopRight、getBottomRight 和 getBottomLeft 提供的结果？ 另外，如何将这些方法应用于范围 const？

Answer 1

@Mike 有正确的答案，但我没有看到发布他的答案的选项，所以这里是：

getTopLeft 等需要一个范围，而不是范围交互，所以你需要 olExtent.getTopLeft(extent.getExtent())