Performance issues with RDraw

[PaliMartin]

I get performance issues (mouse pointer starts lagging) when I add an Rdraw element to the map component. Works when I use pure openlayer. Any ideas on what could be causing this?

export const RlayerMap = memo(() => {
    const origin = [2.364, 48.82];
    const initial: RView = { center: fromLonLat(origin), zoom: 11 };

    return (
        <div style={{ height: 800, width: "100%" }}>
            <RMap
                width={"100%"}
                height={"100%"}
                initial={initial}
                noDefaultControls={true}
            >
                <RControl.RLayers>
                    <RLayerTileWebGL
                        properties={{ label: "OpenTopo" }}
                        // url="my url"
                        attributions="Kartendaten: © OpenStreetMap-Mitwirkende, SRTM | Kartendarstellung: © OpenTopoMap (CC-BY-SA)"
                    />
                    <RControl.RZoom />
                </RControl.RLayers>
                <RLayerVector>
                    <RInteraction.RDraw type={"Circle"} />
                </RLayerVector>
            </RMap>
        </div>
    );
});

[mmomtchev]

Alas, this is a very error-prone optimization and the difference is barely noticeable - it comes mostly because Chrome emits a warning. I prefer to not do this especially since it will be valid only when the interaction is empty - once you add any processing to this interaction, the performance is the same as raw Openlayers.

[mmomtchev]

@PaliMartin Which version of Openlayers are you using? 7.3.0 has a number of improvements - including suppression of the Chrome warning - and it is marginally faster.

[mmomtchev]

If you don't use pointer move events in your application, you can somewhere in the initialisation before the map is created (it is fine in the global context):

RFeature.pointerEvents = ['click'];

This will increase performance if you have a layer with lots of features.

[mmomtchev]

Addressed in #165