Javascript 如何在Openlayers中基于地图上的点创建圆

我试图根据用户单击的点/坐标创建一个圆。我知道如何创建一个点，并找到了一个函数来创建一个基于点的圆（如缓冲区/范围环），但它似乎只适用于x，y点（0,0）。我尝试使用ol.proj.transform将我的lon和lat坐标转换为X和Y坐标，但它根本没有渲染圆

这就是我想要创造的

函数createCircle（CircleCenter、CircleCenter、circleRadius、pointsToEnd）{
让角度ToAdd=360/点ToEnd；
设coords=[]；
设角度=0；
for（设i=0；i

---

您的问题是

addMarker

函数在EPSG:3857投影中获取坐标，

addCircle

函数在EPSG:4326投影中获取坐标

如果要传递相同的坐标，必须使它们一致

对于

[708683.3598450683，1850098.1965979263]

而言，圆圈不会出现，因为这与地图相差很远（纬度的最大值为90度）

代码片段：

var-map=新的ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat（[0,0]）的其他项目，
缩放：3
})
});
var layer=新ol.layer.Vector({
来源：新ol.source.Vector({
投影：‘EPSG:4326’，
特色：[]
}),
});
map.addLayer（层）；
var vectorSource=layer.getSource（）；
函数createCircle（CircleCenter、CircleCenter、circleRadius、pointsToEnd）{
让角度ToAdd=360/点ToEnd；
设coords=[]；
设角度=0；
for（设i=0；i
html，
身体{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
}
.地图{
身高：100%；
宽度：100%；
}

您的问题是
addMarker
函数获取EPSG:3857投影中的坐标，
addCircle
函数获取EPSG:4326投影中的坐标

如果要传递相同的坐标，必须使它们一致

对于
[708683.3598450683，1850098.1965979263]
而言，圆圈不会出现，因为这与地图相差很远（纬度的最大值为90度）



代码片段：


var-map=新的ol.map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat（[0,0]）的其他项目，
缩放：3
})
});
var layer=新ol.layer.Vector({
来源：新ol.source.Vector({
投影：‘EPSG:4326’，
特色：[]
}),
});
map.addLayer（层）；
var vectorSource=layer.getSource（）；
函数createCircle（CircleCenter、CircleCenter、circleRadius、pointsToEnd）{
让角度ToAdd=360/点ToEnd；
设coords=[]；
设角度=0；
for（设i=0；ifunction createCircle(circleCenterX, circleCenterY, circleRadius, pointsToEnd) {
            let angleToAdd = 360 / pointsToEnd;
            let coords = [];
            let angle = 0;
            for (let i = 0; i < pointsToEnd; i++) {
                angle += angleToAdd;
                let coordX = circleCenterX + circleRadius * Math.cos(angle * Math.PI / 180);
                let coordY = circleCenterY + circleRadius * Math.sin(angle * Math.PI / 180);
                coords.push([coordX, coordY]);
            }
            return coords;
        }

        function addMarker(coordinates) {
            console.log(coordinates);
            var marker = new ol.Feature(new ol.geom.Point([708683.3598450683, 1850098.1965979263]));
            marker.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 5,
                    fill: new ol.style.Fill({
                        color: 'red'
                    })
                })
            }));
            vectorSource.addFeature(marker);
        }

        function addCircle(coords) {
            // var lonlat1 = ol.proj.transform([coords[0], coords[1]], 'EPSG:4326','EPSG:3857');
            // console.log('var lonlat1',lonlat1)
            var circleCoords = createCircle(708683.3598450683, 1850098.1965979263, 20, 180);
            console.log(circleCoords);
            var polygon = new ol.geom.Polygon([circleCoords]);
            polygon.transform('EPSG:4326', 'EPSG:3857');
            polygon = new ol.Feature(polygon);
            vectorSource.addFeature(polygon);
        }

addCircle(ol.proj.toLonLat([708683.3598450683, 1850098.1965979263]));
addMarker([708683.3598450683, 1850098.1965979263]);