Rectangle
构造函数
创建矩形覆盖物对象
参数 类型 说明 boundsBounds矩形的地理区域范围，由西南角和东北角定义 opts可选RectangleOptions可选参数 属性 类型 说明 coordType"BMAP_COORD_BD09" | "BMAP_COORD_GCJ02" | "BMAP_COORD_WGS84"输入坐标的坐标类型。未设置时使用全局 BMap.coordType。 dashArraynumber[]虚线样式配置，如 [8, 4] 表示实线部分长8像素、间隙部分长4像素。 默认虚线中实线和空隙的长度均为线宽的2倍 enableClickingboolean是否响应点击事件 enableEditingboolean是否启用编辑功能 enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物 fillColorstring填充颜色，格式为 '#xxxxxx'，传入空字符串时无填充效果，默认跟随主题色（CSS 变量 --bmap-color-primary-bg，缺省为 '#eaf1ff'） fillOpacitynumber填充透明度，取值范围0 - 1 linkRightboolean跨180度经线时是否按最短路径绘制 strokeColorstring边线颜色，格式为 '#xxxxxx'，默认跟随主题色（CSS 变量 --bmap-color-primary，缺省为 '#1677ff'） strokeOpacitynumber边线透明度，取值范围0 - 1 strokeStyle"solid" | "dashed" | "dotted"边线样式 strokeWeightnumber边线宽度，以像素为单位 zIndexnumber覆盖物的初始层叠顺序，也可在实例上通过 setZIndex() 方法修改 返回值 Rectangle
示例代码1
const sw = new BMap.Point(116.38, 39.9);
const ne = new BMap.Point(116.42, 39.93);
const bounds = new BMap.Bounds(sw, ne);
const rectangle = new BMap.Rectangle(bounds, {
strokeColor: '#0066ff',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#0066ff',
fillOpacity: 0.3,
});
map.addOverlay(rectangle);
方法
- #addEventListener<K extends keyof RectangleEventMap>(
event: K,
handler: (e: RectangleEventMap[K]) => void,
): void添加事件监听函数
参数 类型 说明 eventK事件名称 handler(e: RectangleEventMap[K]) => void事件处理函数 返回值 void
示例代码1
rectangle.addEventListener('click', (e) => {
console.log('rectangle clicked', e);
});
关闭编辑功能
返回值 void
禁止覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
draw
- draw(): void
抽象生命周期方法，当地图状态发生变化时调用，对覆盖物进行绘制。
仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现，用户无需调用也无需重写。
返回值 void
开启编辑功能
返回值 void
允许覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
返回矩形的地理区域范围
返回值 Bounds
返回矩形的填充颜色
返回值 string
返回矩形填充透明度
返回值 number
返回覆盖物所在的地图实例
返回值 Map
返回矩形的边线颜色
返回值 string
返回矩形边线透明度
返回值 number
返回矩形边线样式
返回值 "solid" | "dashed" | "dotted"
返回矩形边线宽度
返回值 number
hide
- hide(): void
隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none
返回值 void
initialize
抽象生命周期方法，用于初始化覆盖物，当调用map.addOverlay时，API内部将调用此方法。
仅在自定义覆盖物时需要实现此方法，并返回覆盖物对应的HTML元素。 内置覆盖物（
Marker、Polyline、Polygon等）已在内部实现，用户无需调用也无需重写。参数 类型 说明 mapMap返回值 HTMLElement
示例代码2
class MyOverlay extends BMap.Overlay {
initialize(map: BMap.Map) {
const div = document.createElement('div');
div.textContent = '自定义覆盖物';
map.getPanes().markerPane.appendChild(div);
return div;
}
draw() {}
}
is
- isVisible(): boolean
判断覆盖物是否可见
返回值 boolean
- #removeEventListener<K extends keyof RectangleEventMap>(
event: K,
handler: (e: RectangleEventMap[K]) => void,
): void移除事件监听函数
参数 类型 说明 eventK事件名称 handler(e: RectangleEventMap[K]) => void事件处理函数 返回值 void
示例代码3
const handler = (e: any) => { console.log(e); };
rectangle.addEventListener('click', handler);
rectangle.removeEventListener('click', handler);
设置矩形的地理区域范围
参数 类型 说明 boundsBounds矩形的地理区域范围 返回值 void
示例代码1
const sw = new BMap.Point(116.36, 39.88);
const ne = new BMap.Point(116.44, 39.95);
rectangle.setBounds(new BMap.Bounds(sw, ne));
设置矩形的填充颜色，传入空字符串时无填充效果
参数 类型 说明 colorstring颜色值，合法的CSS颜色值 返回值 void
示例代码1
rectangle.setFillColor('#0055ff');
设置矩形填充透明度
参数 类型 说明 opacitynumber透明度，取值范围0 - 1 返回值 void
示例代码1
rectangle.setFillOpacity(0.3);
设置矩形的边线颜色
参数 类型 说明 colorstring颜色值，合法的CSS颜色值 返回值 void
示例代码1
rectangle.setStrokeColor('#ff0000');
设置矩形边线透明度
参数 类型 说明 opacitynumber透明度，取值范围0 - 1 返回值 void
示例代码1
rectangle.setStrokeOpacity(0.6);
设置矩形边线样式
参数 类型 说明 style"solid" | "dashed" | "dotted"线样式 返回值 void
示例代码1
rectangle.setStrokeStyle('dashed');
设置矩形边线宽度
参数 类型 说明 weightnumber线宽，单位像素，须为大于等于1的整数 返回值 void
示例代码1
rectangle.setStrokeWeight(3);
设置覆盖物的 zIndex
参数 类型 说明 zIndexnumber层叠顺序值 返回值 void
show
- show(): void
显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
返回值 void
此类表示一个矩形覆盖物。