ol.control.Resolution: reports the resolution as number of meters in 96 pixels (unsure how to get the actual dpi)

ResolutionWatcher.ts

class ResolutionWatcher extends ol.control.Control {

    private element: HTMLElement;

    constructor(options?: olx.control.ControlOptions & {
        className?: string;
        render?: Function;
    }) {
        options = _.defaults(options || {}, {
            element: document.createElement("div"),
            className: "ol-resolution",
            render: (mapEvent: ol.MapEvent) => this.renderResolution(mapEvent),
        });

        super(options);

        this.element = options.element as HTMLElement;
        this.element.classList.add(options.className);
    }

    private renderResolution(mapEvent: ol.MapEvent) {
        let frameState = mapEvent.frameState;
        if (frameState) {
            let viewState = frameState.viewState;
            let projection = viewState.projection;
            let resolution = viewState.resolution;
            let metersPerUnit = projection.getMetersPerUnit();
            let metersPerPixel = resolution * metersPerUnit;
            let pixelsPerInch = 96;
            // 1 inch on the screen that is
            let metersPerInch = metersPerPixel * pixelsPerInch;
            this.element.innerHTML = `${metersPerInch.toPrecision(5)} m`;
            this.element.title = `1 inch = ${metersPerInch.toPrecision(5)} meters`;
        } else {
            this.element.innerHTML = "";
        }
    }

}

.ol-resolution {
position: absolute;
bottom: 0.5em;
right: 0.5em;
width: 1in;
border-left: 1px solid black;
border-right: 1px solid black;
text-align: center;
}