Circle
此类表示地图上的圆覆盖物。
构造函数
| 构造函数 | 描述 |
|---|---|
| Circle(center: Point, radius: Number, opts: CircleOptions) | 创建圆覆盖物 |
CircleOptions
| 属性名 | 类型 | 描述 |
|---|---|---|
| strokeColor | String | 圆形边线颜色 |
| fillColor | String | 圆形填充颜色。当参数为空时，圆形将没有填充效果 |
| strokeWeight | Number | 圆形边线的宽度，以像素为单位 |
| strokeOpacity | Number | 圆形边线透明度，取值范围0 - 1 |
| fillOpacity | Number | 圆形填充的透明度，取值范围0 - 1 |
| strokeStyle | String | 圆形边线的样式，solid或dashed |
| enableMassClear | Boolean | 是否在调用map.clearOverlays清除此覆盖物，默认为true |
| enableEditing | Boolean | 是否启用线编辑，默认为false |
| enableClicking | Boolean | 是否响应点击事件，默认为true |
方法
| 方法 | 返回值 | 描述 |
|---|---|---|
| setCenter(center: Point) | none | 设置圆形的中心点坐标 |
| getCenter() | Point | 返回圆形的中心点坐标 |
| setRadius(radius: Number) | none | 设置圆形的半径，单位为米 |
| getRadius() | Number | 返回圆形的半径，单位为米 |
| getBounds() | Bounds | 返回圆形的地理区域范围 |
| setStrokeColor(color: String) | none | 设置圆形的边线颜色，参数为合法的CSS颜色值 |
| getStrokeColor() | String | 返回圆形的边线颜色 |
| setFillColor(color: String) | none | 设置圆形的填充颜色，参数为合法的CSS颜色值。当参数为空字符串时，圆形覆盖物将没有填充效果 |
| getFillColor() | String | 返回圆形的填充颜色 |
| setStrokeOpacity(opacity: Number) | none | 设置圆形的边线透明度，取值范围0 - 1 |
| getStrokeOpacity() | Number | 返回圆形的边线透明度 |
| setFillOpacity(opacity: Number) | none | 设置圆形的填充透明度，取值范围0 - 1 |
| getFillOpacity() | Number | 返回圆形的填充透明度 |
| setStrokeWeight(weight: Number) | none | 设置圆形边线的宽度，取值为大于等于1的整数 |
| getStrokeWeight() | Number | 返回圆形边线的宽度 |
| setStrokeStyle(style: String) | none | 设置圆形边线样式为实线或虚线，取值solid或dashed |
| getStrokeStyle() | String | 返回圆形边线样式 |
| enableEditing() | none | 开启编辑功能 |
| disableEditing() | none | 关闭编辑功能 |
| enableMassClear() | none | 允许覆盖物在map.clearOverlays方法中被清除 |
| disableMassClear() | none | 禁止覆盖物在map.clearOverlays方法中被清除 |
| getMap() | Map | 返回覆盖物所在的map对象 |
| addEventListener(event: String, handler: Function) | none | 添加事件监听函数 |
| removeEventListener(event: String, handler: Function) | none | 移除事件监听函数 |
事件
| 事件 | 参数 | 描述 |
|---|---|---|
| click | {type: string, target: any, point: [Point](./point.md)} | 点击圆形时触发此事件 |
| dblclick | {type: string, target: any, point: [Point](./point.md)} | 双击圆形时触发此事件 |
| mousedown | {type: string, target: any, point: [Point](./point.md)} | 鼠标在圆形上按下时触发此事件 |
| mouseup | {type: string, target: any, point: [Point](./point.md)} | 鼠标在圆形释放时触发此事件 |
| mouseover | {type: string, target: any, point: [Point](./point.md)} | 鼠标移入圆形时触发此事件 |
| mouseout | {type: string, target: any, point: [Point](./point.md)} | 鼠标移出圆形时触发此事件 |
| remove | {type: string, target: any} | 移除圆形时触发此事件 |
| lineupdate | {type: string, target: any} | 圆形编辑时触发此事件 |
示例
ts
// 创建圆形覆盖物
const center = new BMapGL.Point(116.404, 39.915);
const circle = new BMapGL.Circle(center, 500, {
strokeColor: '#FF0000',
fillColor: '#00FF00',
strokeWeight: 2,
strokeOpacity: 0.8,
fillOpacity: 0.5
});
// 添加到地图
map.addOverlay(circle);
// 添加事件监听
circle.addEventListener('click', function(e) {
console.log('圆形被点击', e.point);
});常见用途
在地图上标注圆形区域范围，如：
- 商圈覆盖范围
- 配送服务范围
- 信号覆盖范围
- 地理围栏
- 景区范围标注
交互式区域选择，如：
- 周边设施查询
- 区域范围筛选
- 距离测量工具
注意事项
- 半径单位为米，在不同比例尺下圆的大小会随地图缩放而改变
- 建议根据实际使用场景合理设置圆形的透明度，以免遮挡底图信息
- 当需要编辑圆形时，请先调用
enableEditing()方法 - 圆形边线宽度请使用大于等于1的整数，否则可能导致显示异常
- 如果不需要填充效果，可以将
fillColor设置为空字符串