中的draw函数_【OpenLayer 实战】draw交互组件绘制两种方式绘制椭圆过程详解

引言
OpenLayers可以通过代码绘制多种几何形状，也可以通过draw类型的交互组件绘制几何形状，官方实例提供了类如圆、折线、矩形、星形等方法。除此之外，椭圆这种图形其实也是非常常见的几何图形，但是官方没有提供现成的API，本文从使用代码绘制和交互绘制两种途径详细讲解一下椭圆的绘制。

一点理论基础
众所周知，OGC提供的标准geometry类型只有点、线、面以及它们的组合，并没有圆和椭圆，OpenLayers绘制圆的时候，采用的是正多边形逼近法拟合的“圆形”。虽然渲染到canvas上的实际图形是个多边形，但是在数据结构上，它仍然是个圆。圆形的公式可以写为：
\frac{X^{2}}{a^{2}}+\frac{Y^{2}}{a^{2}}=1
相对的，椭圆的公式可以写为：
\frac{X^{2}}{a^{2}}+\frac{Y^{2}}{b^{2}}=1
椭圆公式中的Y可以看做圆公式中的Y变换了\frac{a}{b}倍之后得来。这里的公式中的X和Y对应的就是横纵坐标值。
OpenLayers的SimpleGeometry类及其子类提供了具有这种功能的函数scale，可以对横纵坐标进行按比例的拉伸变换。可以利用这个函数实现椭圆的绘制。
核心代码
下面是实现绘制椭圆的核心代码，无论是用代码绘制还是用draw交互组件绘制都需要用到它： 

function genEllipseGeom(radiusMajor, radiusMinor, center, rotation) {
            var circle = new Circle(center, radiusMinor);        var polygon = fromCircle(circle, 64);        polygon.scale(radiusMajor / radiusMinor, 1);        polygon.rotate(rotation, center);        return polygon;}

参数radiusMajor, radiusMinor, center, rotation分别对应椭圆的长半轴、短半轴、重心和旋转角度。
算法的主要思想是：首先以短半轴为半径生成了一个Circle类型的几何，然后通过这个理想圆生成了一个正64边形多边形，拟合这个圆。再将这个多边形进行按比例变换，变换之后的结果再进行旋转，最后得到的就是使用多边形拟合的椭圆。
代码控制绘制椭圆的完整代码 

import { Map, View } from 'ol';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';import Circle from 'ol/geom/Circle';import { fromCircle } from 'ol/geom/Polygon'import VectorSource from '