How to set fixed sizes of objects on the Yandex JS Api map?

Question

I use objects on the map, such as circles (Circle) and I need their size to remain constant as the map is zoomed in. Is there a way to achieve this result?

Below is the code where objects of the "Circle" type are created, with a radius of 1000 m:

const { data } = this;
const ymaps = window.ymaps;
ymaps.ready(init);
function init() {
  var myMap = new ymaps.Map('map', {
    center: [43.00, 40.97],
    zoom: 9
  });

  let circle;

  for (let x = 0; x < data.length; x++) {
    circle = new ymaps.Circle([[data[x].coordx, data[x].coordy], 1000], {}, {
      fillColor: '#DB709377',
      strokeColor: '#990066',
      strokeOpacity: 0.8,
      strokeWidth: 1,
    });
    myMap.geoObjects.add(circle);
  }
}

But is it possible for them to have a fixed radius in pixels, or relative to the window, but not relative to the map? Thank you for attention

Answer 1

You can try this

var precision = 30;
var map;
var points = [];
var polygon;

function init() {
    map = new ymaps.Map("map", {
      center: [51.50, -0.12],
      zoom: 10
    });
    // вычисляем точки полигона в глобальных координатах
    var zoom = map.getZoom();
    var projection = map.options.get('projection');
    
    var center = projection.toGlobalPixels([51.50, -0.12], zoom);
    var radius = 120;
    var start = 0;
    var end = Math.PI * 2;

    var delta = end - start;
    var step = delta / precision;

        points.push(center);
    for(var i = 0; i <= delta + step; i += step){
      points.push([
        center[0] + radius * Math.cos(start + i),
        center[1] + radius * Math.sin(start + i)
       ]);
    }
    points.push(center);
    points = points.map(function (point) {
            return projection.fromGlobalPixels(point, zoom);
    });

    polygon = new ymaps.Polygon([points]);
  
    map.geoObjects.add(polygon);
}

ymaps.ready(init);

</style>

<style>
        html, body {
            width: 100%; height: 100%; padding: 0; margin: 0;
            font-family: Arial;
        }

        #map {
            width: 100%;
            height: 80%;
        }

        .header {
            padding: 5px;
        }

<div id="map"></div>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=en_US&apikey=7b1b79b3-8fad-410d-9704-a6f542e7a6bd"></script>