Why do I need getPointResolution when creating circle polygons in Openlayers?

Question

So I saw an example of creating a polygon circle to scale. That is the actual distance from the point of interest to the how far the radius is.

  map.on('postrender', function (event) {
        const { projection, resolution, center, } = event.frameState.viewState;
        pointResolution = getPointResolution(projection.getCode(), resolution, center);
    });

Is it necessary to do this var newradius = radius / pointResolution because this does not give me the right distance in meters. It actually divides it. I don't know if this makes sense.

 function addCirclePolygon(coordinates) {
        if (vectorSource && vectorSource.getFeatures().length > 0) {
            vectorSource.clear();
        }
        var radius = $scope.options.radius;
        if (createPolygon) {
            **var radius = radius / pointResolution;** <---problem
            circle = new Feature(new Circle(coordinates, radius));
            circle.setStyle(new Style({
                stroke: new Stroke({
                    color: $scope.options.lcolor,
                    width: $scope.options.lwidth
                }),
                fill: new Fill({
                    color: $scope.options.fcolor ? $scope.options.fcolor : 'rgba(255, 255, 255, 0.0)'
                })
            }));
            var geom = circle.get('geometry');
            if (circle instanceof Circle) {
                // We don't like circles, at all.  So here we convert
                // drawn circles to their equivalent polygons.  
                circle.set('geometry', fromCircle(geom));
            }
            vectorSource.addFeature(circle);
            /**
             * Adds a line to show the radius in Units(meters as default)
             * Leaving this here for prosterity
             */
            if (circle) {
                let line = addRadius(circle);
                vectorSource.addFeature(line);
            }
        }
    }

Answer 1

tldr; You don't need getPointResolution to create circle polygons.

You can use geom.Polygon.circular to create the blue circle which has the correct radius.

new ol.geom.Polygon.circular([lng, lat], radius);

You will need to divide the radius by the resolution if you plan to create a circle (green) or create a polygon.fromCircle (red).

https://codepen.io/dbauszus-glx/pen/LYmjZvP