openlayer绘制扇形

yi.前瞻

本节内容用到最核心的知识，初中数学知识，正弦、余弦。

er.上代码，实战

一开始我以为像这种图像的简单绘制，应该很简单，但是自带的API却没有找到，但是他有绘制多边形（Polygon）的接口，那么我们只需要计算出扇形所有的点位就可以了。然后我就开始在草稿纸上绘制草图,经过分析计算点位用初中学到的正弦、余弦就可以搞定

/**
* 创建扇形多边形点位集合
 * @param origin 中心点
 * @param radius 半径、
 * @param angle 以正北方向偏移角度
 * @param range 范围
 * @returns 返回点位集合
 */
static createRegularPolygonCurve = (origin: any, radius: any, angle: any, range: any) => {
   let pointList: any = [];
    /**
     * 添加起始点位
     */
    pointList.push(origin)
    /**
     * 开始角度
     */
    let startAngle = angle - (range / 2);
    /**
     * 根据传进来的角度范围绘制
     */
    for (let i = 0; i < range; i++) {
        startAngle += 1;
        /**
         * 利用余弦计算出维度，因为在二维地图中正北方向是朝上的，同理经度有正弦可以计算出来
         */
        let lon = Math.cos(startAngle * Math.PI / 180) * radius + origin[0];
        let lat = Math.sin(startAngle * Math.PI / 180) * radius + origin[1];
        /**
         * 添加进数组中
         */

        pointList.push([lon, lat]);
    }
    return pointList;
}

san.完整实例（总结）

/**
  * 返回原型实例对象
  */
let opiton: any = new Feature({
     geometry: new Polygon([this.createRegularPolygonCurve(center, radius, 45, 90)])
 });
opiton.setStyle(this.style())


/**
* 创建扇形多边形点位集合
 * @param origin 中心点
 * @param radius 半径、
 * @param angle 以正北方向偏移角度
 * @param range 范围
 * @returns 返回点位集合
 */
static createRegularPolygonCurve = (origin: any, radius: any, angle: any, range: any) => {
   let pointList: any = [];
    /**
     * 添加起始点位
     */
    pointList.push(origin)
    /**
     * 开始角度
     */
    let startAngle = angle - (range / 2);
    /**
     * 根据传进来的角度范围绘制
     */
    for (let i = 0; i < range; i++) {
        startAngle += 1;
        /**
         * 利用余弦计算出维度，因为在二维地图中正北方向是朝上的，同理经度有正弦可以计算出来
         */
        let lon = Math.cos(startAngle * Math.PI / 180) * radius + origin[0];
        let lat = Math.sin(startAngle * Math.PI / 180) * radius + origin[1];
        /**
         * 添加进数组中
         */

        pointList.push([lon, lat]);
    }
    return pointList;
}
/**
* 定义样式
*/
static style = ()=>{

	return new Style({
            stroke: new Stroke({       // 线样式
                color: 'blue',
                width: 0.01
            }),
            fill: new Fill({           // 填充样式
                color: 'blue'
            })
        })
}

完整代码如上所示，绘制一个扇形很简单有没有？

转载请注明出处: https://blog.csdn.net/weixin_43356511/article/details/123610458.