源码分析之Openlayers样式篇CircleStyle类

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

在 Openlayers 中，CircleStyle 类继承自 RegularShape 类，用于表示和渲染一个圆形的样式。CircleStyle 主要用于地图上的图形渲染，比如设置一个图标或标记为圆形。它提供了圆形样式的配置、渲染和复制功能。

关于RegularShape类，可以参考这篇文章源码分析之Openlayers样式篇RegularShape类
。

源码

CircleStyle类的源码实现

CircleStyle类的源码实现如下：

class CircleStyle extends RegularShape {constructor(options) {options = options ? options : { radius: 5 };super({points: Infinity,fill: options.fill,radius: options.radius,stroke: options.stroke,scale: options.scale !== undefined ? options.scale : 1,rotation: options.rotation !== undefined ? options.rotation : 0,rotateWithView:options.rotateWithView !== undefined ? options.rotateWithView : false,displacement:options.displacement !== undefined ? options.displacement : [0, 0],declutterMode: options.declutterMode,});}clone() {const scale = this.getScale();const style = new CircleStyle({fill: this.getFill() ? this.getFill().clone() : undefined,stroke: this.getStroke() ? this.getStroke().clone() : undefined,radius: this.getRadius(),scale: Array.isArray(scale) ? scale.slice() : scale,rotation: this.getRotation(),rotateWithView: this.getRotateWithView(),displacement: this.getDisplacement().slice(),declutterMode: this.getDeclutterMode(),});style.setOpacity(this.getOpacity());return style;}setRadius(radius) {this.radius = radius;this.render();}
}

CircleStyle类的构造函数

CircleStyle 的构造函数，接收一个 options 对象来初始化样式的属性。

参数解析：

• options = options ? options : { radius: 5 }：

  • 如果没有传入 options 对象，则使用默认值 { radius: 5 }，即默认圆形半径为 5。

• 在调用 super() 时，传入了 RegularShape 的配置对象。具体配置如下：

  • points: Infinity：表示圆形的点数，Infinity 表示该形状没有角，类似一个平滑的圆。

  • fill: options.fill：填充颜色（如果有的话）。

  • radius: options.radius：圆形的半径，使用 options.radius。

  • stroke: options.stroke：边框样式（如果有的话）。

  • scale: options.scale !== undefined ? options.scale : 1：缩放因子，如果没有传入则默认为 1。

  • rotation: options.rotation !== undefined ? options.rotation : 0：旋转角度（如果没有传入则默认为 0）。

  • rotateWithView: options.rotateWithView !== undefined ? options.rotateWithView : false：指定是否在地图视图旋转时一起旋转（默认为 false）。

  • displacement: options.displacement !== undefined ? options.displacement : [0, 0]：设置圆形的位移，默认为 [0, 0]（即不偏移）。

  • declutterMode: options.declutterMode：此属性用于解决多个标记重叠的情况，可以设置是否启用去重模式。

CircleStyle类的主要方法

CircleStyle类的主要方法就是clone和setRadius方法，如下:

• clone方法

该方法用于克隆一个新的 CircleStyle 实例，返回一个新的样式对象，且它的属性与当前样式一致。

步骤解析：

• 获取当前样式的 scale。

• 创建一个新的 CircleStyle 实例，传入当前实例的属性（例如：fill, stroke, radius, scale, rotation, displacement 等）。这些属性通过 this.getFill()、this.getStroke() 等方法获取当前样式的值，并进行克隆（如果有的话）。特别是 fill 和 stroke 可能是对象，因此需要调用 clone() 方法进行深拷贝。

• 设置新样式的透明度：style.setOpacity(this.getOpacity())。

• 返回克隆的新样式。

• setRadius方法

这个方法用来更新圆形的半径，并重新渲染图形。

步骤解析：

• this.radius = radius;：更新当前样式实例的 radius 属性。

• this.render();：调用 render() 方法重新渲染样式。这会触发更新图形显示。

总结

• CircleStyle 继承自 RegularShape，用于绘制圆形样式。它接受一个配置对象来设置圆形的填充、边框、半径、缩放、旋转等属性。

• 该类的 clone 方法提供了一个深拷贝功能，允许创建与当前样式相同的新样式。

• setRadius 方法可以动态修改圆形的半径，并重新渲染样式。

CircleStyle 是 Openlayers 中非常实用的样式类，适用于各种基于圆形的标记或图形样式，例如在地图上显示位置标记、路径圆形标记等。