Polyline
构造函数
创建折线覆盖物对象
参数 类型 说明 pointsPoint[]折线的坐标点数组 opts可选PolylineOptions可选参数 属性 类型 说明 clipboolean是否进行跨经度180度裁剪,绘制跨经度180度的折线时可设置为 false 以优化效果 coordType"BMAP_COORD_BD09" | "BMAP_COORD_GCJ02" | "BMAP_COORD_WGS84"输入坐标的坐标类型。未设置时使用全局 BMap.coordType。 dashArraynumber[]虚线样式配置,如 [8, 4] 表示实线部分长8像素、间隙部分长4像素。 默认虚线中实线和空隙的长度均为线宽的2倍 enableClickingboolean是否响应点击事件 enableEditingboolean是否启用线编辑 enableMassClearboolean是否在调用 map.clearOverlays() 时清除此覆盖物 geodesicboolean是否开启大地线模式,为 true 时两点连线将以大地线的形式呈现 iconsIconSequence[]配置贴合折线的图标 linkRightboolean跨180度经线时是否按最短路径绘制 strokeColorstring折线颜色,格式为 '#xxxxxx',默认跟随主题色(CSS 变量 --bmap-color-primary,缺省为 '#1677ff') strokeLineCap"round" | "butt" | "square"描边线端头类型 strokeLineJoin"round" | "miter" | "bevel"描边线连接处类型 strokeOpacitynumber折线的透明度,取值范围0 - 1,默认值为 1 strokeStyle"solid" | "dashed" | "dotted"折线的样式 strokeTexture{ height?: number; url: string; width?: number }线纹理配置,用于沿折线重复绘制图片(如方向箭头),仅 WebGL 渲染模式支持 strokeWeightnumber折线的宽度,以像素为单位,默认值为 2 zIndexnumber覆盖物的初始层叠顺序,也可在实例上通过 setZIndex() 方法修改 返回值 Polyline
示例代码1
const polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.415, 39.915),
]);
map.addOverlay(polyline);示例代码2:自定义样式
const polyline = new BMap.Polyline(
[new BMap.Point(116.399, 39.910), new BMap.Point(116.415, 39.915)],
{ strokeColor: '#0055ff', strokeWeight: 4, strokeOpacity: 0.8 }
);
map.addOverlay(polyline);
方法
- #addEventListener<K extends keyof PolylineEventMap>(
event: K,
handler: (e: PolylineEventMap[K]) => void,
): void添加事件监听函数
参数 类型 说明 eventK事件名称 handler(e: PolylineEventMap[K]) => void事件处理函数 返回值 void
示例代码1
polyline.addEventListener('click', (e) => {
console.log('polyline clicked', e);
});
关闭折线编辑功能
返回值 void
禁止覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
draw
- draw(): void
抽象生命周期方法,当地图状态发生变化时调用,对覆盖物进行绘制。
仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现,用户无需调用也无需重写。
返回值 void
开启折线编辑功能
返回值 void
允许覆盖物在 map.clearOverlays() 方法中被清除
返回值 void
返回折线的地理区域范围
参数 类型 说明 normalize可选boolean跨越世界边界时,是否将经度范围扩展为完整世界;默认为 false,保留跨 180° 经线的紧凑范围,传 true 时返回 [-180°, 180°] 的整世界范围。 返回值 Bounds
返回覆盖物所在的地图实例
返回值 Map
返回折线的坐标点数组
返回值 Point[]
返回折线颜色
返回值 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 Visible
- isVisible(): boolean
判断覆盖物是否可见
返回值 boolean
- #removeEventListener<K extends keyof PolylineEventMap>(
event: K,
handler: (e: PolylineEventMap[K]) => void,
): void移除事件监听函数
参数 类型 说明 eventK事件名称 handler(e: PolylineEventMap[K]) => void事件处理函数 返回值 void
示例代码3
const handler = (e: any) => { console.log(e); };
polyline.addEventListener('click', handler);
polyline.removeEventListener('click', handler);
设置折线的坐标点数组
参数 类型 说明 pathPoint[]坐标点数组 返回值 void
示例代码1
polyline.setPath([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.415, 39.915),
]);
修改指定索引处的坐标点,索引从0开始
参数 类型 说明 indexnumber坐标点索引 pointPoint新的坐标点 返回值 void
示例代码1
polyline.setPositionAt(0, new BMap.Point(116.400, 39.912));
设置折线颜色
参数 类型 说明 colorstring颜色值,格式为 '#xxxxxx' 返回值 void
示例代码1
polyline.setStrokeColor('#ff0000');
设置折线透明度
参数 类型 说明 opacitynumber透明度,取值范围0 - 1 返回值 void
示例代码1
polyline.setStrokeOpacity(0.6);
设置折线样式
参数 类型 说明 style"solid" | "dashed" | "dotted"线样式 返回值 void
示例代码1
polyline.setStrokeStyle('dashed');
设置折线线宽
参数 类型 说明 weightnumber线宽,单位像素,须为大于等于1的整数 返回值 void
示例代码1
polyline.setStrokeWeight(4);
设置覆盖物的 zIndex
参数 类型 说明 zIndexnumber层叠顺序值 返回值 void
示例代码1
polyline.setZIndex(10);
show
- show(): void
显示覆盖物。对于自定义覆盖物,此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
返回值 void
使用浏览器的矢量制图工具在地图上绘制折线的覆盖物。