如何在 Yandex JS Api 地图上设置固定大小的对象？

Posted 2023-03-25

【中文标题】如何在 Yandex JS Api 地图上设置固定大小的对象？

【英文标题】：How to set fixed sizes of objects on the Yandex JS Api map?

【发布时间】：2020-10-16 12:47:15

【问题描述】：

我在地图上使用对象，例如圆圈 (Circle)，我需要它们的大小在地图放大时保持不变。有没有办法实现这个结果？

以下是创建“Circle”类型对象的代码，半径为 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);
  

但是它们是否有可能具有以像素为单位的固定半径，或者相对于窗口，而不是相对于地图？谢谢关注

【参考方案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_US&apikey=7b1b79b3-8fad-410d-9704-a6f542e7a6bd"></script>