Как установить фиксированные размеры объектов на карте Yandex JS Api?

Я использую объекты на карте, такие как круги (Circle), и мне нужно, чтобы их размер оставался постоянным при увеличении карты. Есть ли способ добиться такого результата?

Ниже приведен код, где создаются объекты типа Circle, радиусом 1000 м:

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);
  }
}

А можно ли им иметь фиксированный радиус в пикселях, или относительно окна, но не относительно карты? Спасибо за внимание


javascript yandex-maps yandex yandex-api
person Kiten    schedule 16.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать это

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>

person shchedrin    schedule 24.10.2020