问题描述
我在地图上使用诸如圆形(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);
}
}
但是它们是否可能具有以像素为单位的固定半径,或相对于窗口而不是相对于地图的半径?谢谢您的关注
解决方法
您可以尝试
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,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>