Polyline 类

使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。

构造函数

构造函数	描述
Polyline(points: Array<Point>, opts: PolylineOptions)	创建折线覆盖物对象

PolylineOptions

属性	类型	描述
strokeColor	string	折线颜色
strokeWeight	number	折线的宽度，以像素为单位
strokeOpacity	number	折线的透明度，取值范围0 - 1
strokeStyle	string	折线的样式，solid或dashed
strokeLineCap	string | StyleExpress	描边线端头类型，可选'round', 'butt', 'square'，默认round
enableMassClear	boolean	是否在调用map.clearOverlays清除此覆盖物，默认为true
enableEditing	boolean	是否启用线编辑，默认为false
enableClicking	boolean	是否响应点击事件，默认为true
geodesic	boolean	是否开启大地线模式，true时，两点连线将以大地线的形式。默认为false
linkRight	boolean	跨180度走右侧，默认是false
clip	boolean	是否进行跨经度180度裁剪，绘制跨精度180时为了优化效果，可以设置成false，默认为true

方法

方法	返回值	描述
setPath(path: Array<Point>)	void	设置折线的点数组
getPath()	Array<Point>	返回折线的点数组
setStrokeColor(color: string)	void	设置折线的颜色
getStrokeColor()	string	返回折线的颜色
setStrokeOpacity(opacity: number)	void	设置透明度，取值范围0 - 1
getStrokeOpacity()	number	返回透明度
setStrokeWeight(weight: number)	void	设置线的宽度，范围为大于等于1的整数
getStrokeWeight()	number	返回线的宽度
setStrokeStyle(style: string)	void	设置是为实线或虚线，solid或dashed
getStrokeStyle()	string	返回当前线样式状态，实线或者虚线
getBounds()	Bounds	返回覆盖物的地理区域范围
enableEditing()	void	开启编辑功能
disableEditing()	void	关闭编辑功能
setZIndex(zIndex: number)	void	设置覆盖物的zIndex
enableMassClear()	void	允许覆盖物在map.clearOverlays方法中被清除
disableMassClear()	void	禁止覆盖物在map.clearOverlays方法中被清除
setPositionAt(index: number, point: Point)	void	修改指定位置的坐标。索引index从0开始计数
getMap()	Map	返回覆盖物所在的map对象
addEventListener(event: string, handler: Function)	void	添加事件监听函数
removeEventListener(event: string, handler: Function)	void	移除事件监听函数

事件

事件	参数	描述
click	{type: string, target: any, point: [Point](./point)}	点击折线后会触发此事件
dblclick	{type: string, target: any, point: [Point](./point)}	双击折线后会触发此事件
mousedown	{type: string, target: any, point: [Point](./point)}	鼠标在折线上按下触发此事件
mouseup	{type: string, target: any, point: [Point](./point)}	鼠标在折线释放触发此事件
mouseout	{type: string, target: any, point: [Point](./point)}	鼠标离开折线时触发此事件
mouseover	{type: string, target: any, point: [Point](./point)}	当鼠标进入折线区域时会触发此事件
remove	{type: string, target: any}	移除折线时触发
lineupdate	{type: string, target: any}	覆盖物的属性发生变化时触发

示例

// 创建折线
var points = [
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920),
    new BMapGL.Point(116.425, 39.900)
];
var polyline = new BMapGL.Polyline(points, {
    strokeColor: "#ff0000",
    strokeWeight: 3,
    strokeOpacity: 0.8,
    strokeStyle: "solid"
});

// 添加到地图
map.addOverlay(polyline);

// 启用编辑功能
polyline.enableEditing();

// 添加事件监听
polyline.addEventListener("click", function(e) {
    console.log("点击位置：", e.point);
});

常见用途

1. 创建基本折线

var polyline = new BMapGL.Polyline([
    new BMapGL.Point(116.399, 39.910),
    new BMapGL.Point(116.405, 39.920)
], {
    strokeColor: "#333",
    strokeWeight: 2
});
map.addOverlay(polyline);

2. 创建可编辑的虚线

var polyline = new BMapGL.Polyline(points, {
    strokeColor: "#0066ff",
    strokeWeight: 4,
    strokeStyle: "dashed",
    enableEditing: true
});
map.addOverlay(polyline);

注意事项

1. 折线至少需要两个点才能绘制
2. strokeWeight 必须是大于等于1的整数
3. strokeOpacity 取值范围是0到1之间的小数
4. 编辑模式下可以拖动折线的顶点来修改形状
5. setPositionAt 方法的索引从0开始计数
6. 大地线模式下折线会沿着地球表面的最短路径绘制
7. 跨180度经线时可以通过 clip 和 linkRight 属性控制显示效果