Блог

Главная - Вопросы по программированию - Как установить фиксированные размеры объектов на карте Яндекс JS Api?

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

#javascript #yandex #yandex-maps #yandex-api

#javascript #яндекс #яндекс-карты #яндекс-api

Вопрос:

Я использую объекты на карте, такие как круги (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);
  }
}

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

Ответ №1:

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

 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_USamp;apikey=7b1b79b3-8fad-410d-9704-a6f542e7a6bd"></script>