当前位置：首页 > news >正文

源码分析之Openlayers样式篇CircleStyle类

news 2025/7/8 15:08:38

访问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方法