Javascript 如何使用Openlayers3绘制椭圆

我在做一个我们正在使用的项目

我们需要给用户在地图上绘制各种特征的能力。是在地图上绘制要素的官方示例

---

我们需要在地图上画一个椭圆，但官方并没有给出这样的功能。我想知道是否有可能自定义圆几何体，这样我们就可以在地图上画一个椭圆

在绘图交互中，可以指定

geometryFunction

作为参数。在绘制时，此函数将绘制其他几何图形。这就是当前在

Circle

模式下绘制交互的内容

---

查看更多信息。

大多数贴图系统不提供椭圆几何体或特征。我在Android中使用google maps时也有同样的要求，我解决它的方法是使用多边形，通过椭圆的参数方程计算顶点

x=h+a*cos（t）

y=k+b*sin（t）

---

请看一个例子。

对于将来会搜索此内容的人，我希望它会有所帮助。 在开放层V5.3中创建椭圆的工作代码：

// this works for a static image (pixels) but the idea can be on any coordinate system 
addEllipseFeature(center, semiMajor, semiMinor) {
    let coordinates = [] ;
    const radinas = Math.PI / 180 ;
    for (let angle = 1; angle <= 360; angle ++) {
      const px = center[0] + semiMajor * Math.cos(radinas * angle);
      const py = center[0] + semiMinor * Math.sin(radinas * angle);
      coordinates.push([px, py]);
    }
    const geoJson = {
      'type': 'Feature',
      'geometry': {
        'type': 'Polygon',
        'coordinates': []
      }
    };
    const featureId = source.getFeatures().length;
    coordinates = this.convertCoordinates('Polygon', [coordinates]);
    geoJson.geometry.coordinates = coordinates ;
    const polygonFeature = (new GeoJSON()).readFeature(geoJson);
    polygonFeature.setId(featureId );
    const layerStyle = [  new Style({
      stroke: new Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })];
    polygonFeature.setStyle(layerStyle);
    source.addFeature(polygonFeature);
    return featureId;
}

//这适用于静态图像（像素），但可以在任何坐标系下使用
加法特征（中音、半大调、半小调）{
设坐标=[]；
常数半径=Math.PI/180；
对于（让angle=1；angle绘制一个圆，将其转换为圆形多边形，然后缩放x和y方向。两次单击足以定义椭圆沿轴的中心和半径。对于斜椭圆，需要三次单击，一次单击中心，每个半径单击一次，第三次单击也可以设置旋转


var光栅=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（{wrapX:false}）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var typeSelect=document.getElementById（'type'）；
var draw；//全局，以便稍后删除它
函数addInteraction（）{
var值=typeSelect.value；
var最大点；
如果（值！=“无”）{
var几何函数；
如果（值=='Square'）{
值='圆'；
geometryFunction=ol.interaction.Draw.createRegularPolygon（4）；
}else if（值=='Box'）{
值='圆'；
geometryFunction=ol.interaction.Draw.createBox（）；
}else if（值=='Star'）{
值='圆'；
geometryFunction=函数（坐标、几何）{
变量中心=坐标[0]；
var last=坐标[1]；
var dx=中心[0]-最后[0]；
var dy=中心[1]-最后[1]；
变量半径=数学sqrt（dx*dx+dy*dy）；
变量旋转=数学atan2（dy，dx）；
var newCoordinates=[]；
var numPoints=12；
对于（变量i=0；i2）{
var last=坐标[2]；
dx=中心[0]-最后[0]；
dy=中心[1]-最后[1]；
}
var radius2=数学sqrt（dx*dx+dy*dy）；
变量旋转=数学atan2（dy，dx）；
变量圆=新的几何圆（中心，半径1）；
var polygon=ol.geom.polygon.fromCircle（圆形，64）；
多边形比例（半径2/半径1,1）；
多边形。旋转（旋转，中心）；
如果（！几何体）{
几何=多边形；
}否则{
geometry.setCoordinates（polygon.getCoordinates（））；
}
返回几何；
};
}
draw=新ol.interaction.draw({
资料来源：资料来源，
类型：值，
maxPoints:maxPoints，
geometryFunction:geometryFunction
});
地图。添加交互作用（绘制）；
}
}
/**
*处理更改事件。
*/
typeSelect.onchange=函数（）{
映射。移除交互（绘制）；
addInteraction（）；
};
addInteraction（）；
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.地图{
宽度：100%；
身高：90%；
const circle = new Circle(
    fromLonLat([longitude, latitude]),
    radius
)

// fromCircle is a function inside Polygon class
const ellipse = fromCircle(circle, 100)
ellipse.scale(1, bigRadius / smallRadius) 

// OL is counterclockwise rotation
ellipse.rotate(-(angleDegree * Math.PI) / 180, circle.getCenter())

this.yourLayer.getSource().addFeature(
    new Feature({
      geometry: ellipse
    })
)