AMap.BezierCurve
Construct a Bezier curve object, specifying the style via BezierCurveOptions
new AMap.BezierCurve(opts: BezierCurveOptions)
Parameter
opts (BezierCurveOptions): Bezier curve parameters
Attribute | Type | Description |
path | Array | The path of a Bezier curve. Described as a two-dimensional array with the following rules: the first element is the starting point, the subsequent elements describe both control points and waypoints, and each element can have 0 to 2 control points, with control points first and waypoints last [ [lng,lat],//Starting point 0
[lng,lat,lng,lat],//Control point、Waypoint 1
[lng,lat,lng,lat,lng,lat],//Control point、Control point、Waypoint 2
[lng,lat,lng,lat]//Control point、Waypoint 3 ] Or [ [ [lng,lat] ],//Starting point 0
[ [lng,lat] , [lng,lat] ],//Control point、Waypoint 1
[ [lng,lat] , [lng,lat] , [lng,lat]],//Control point、Control point、Waypoint 2
[ [lng,lat] , [lng,lat] ]//Control point、Waypoint 3 ] |
zIndex | number | The stacking order of curve overlays. When multiple polyline overlays are stacked on the map, this property ensures that higher-level curve overlays are displayed on top, default value: 10 |
bubble | boolean | Whether to bubble mouse or touch events of the overlay to the map (added in v1.3), default value: false |
cursor | string | Specify the style when the mouse hovers over the curve. Custom styles should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, and Opera does not support custom cursors |
strokeColor | string | Line color, assigned using hexadecimal color code. Default: #00D3FC |
strokeOpacity | number | Line opacity, range [0 ~ 1], 1 means completely opaque, 0 means completely transparent. Default: 0.5 |
strokeWeight | number | Line width, default: 2 |
borderWeight | number | Stroke width, default: 1 |
isOutline | boolean | Whether to display the stroke, default: false |
outlineColor | string | Line stroke color, this item is only valid when the isOutline property is true, default value: #00B2D5 |
height | number | Set whether the Bezier curve is drawn off the ground, default value: 0; when greater than 0, it is drawn off the ground, and the curve height equals the height value plus the elevation value of the curve's starting point. The current polyline height can be obtained via getPolylineHeight (this attribute is only applicable to JSAPI v2.1Beta and above) |
draggable | boolean | Set whether the curve can be dragged, default value: false |
extData | object | Custom attributes, supporting any JavaScript API data type, such as the id of BezierCurve, etc. Custom data can be saved in this attribute for subsequent operations |
strokeStyle | "solid" | "dashed" | Line style, solid:"solid", dashed:"dashed", default value:"solid" |
strokeDasharray | Array<number> | The style of dashed lines and gaps for outlining shapes, this property is effective when strokeStyle is dashed, and it is effective in IE9+ browsers. Values: Solid line: [0,0,0] Dashed line: [10,10], [10,10] represents a dashed line composed of 10 pixels of solid line and 10 pixels of blank (repeating) Dot-dash line: [10,2,10], [10,2,10] represents a dashed line composed of 10 pixels of solid line and 2 pixels of blank + 10 pixels of solid line and 10 pixels of blank (repeating) |
lineJoin | "miter" | "round" | "bevel" | The drawing style of the curve's corners, default value: 'miter' sharp corner, other options: 'round' round corner, 'bevel' beveled corner |
lineCap | "butt" | "round" | "square" | The drawing style of the line caps at both ends of the curve, default value: 'butt' no cap, other options: 'round' round cap, 'square' square cap |
geodesic | boolean | Whether to draw as a geodesic line, default value: false |
showDir | boolean | Whether to display white direction arrows along the path, default value: false. Recommended when the curve width is greater than 6 |
Demo
//2D Array of Start Points, Waypoints, and Control Points for Bezier Curve
var startPoint = [[100.469964, 13.771655]]; //Start Point
var viaPoint = [
//Linear Bezier Curve
[100.468763, 13.763819], //Control Point
[100.473483, 13.763903], //Waypoint
];
var endPoint = [
//Linear Bezier Curve
[100.479663, 13.734389], //Control Point
[100.4861, 13.734139], //Waypoint
];
//Curve path configuration
var path = [startPoint,viaPoint,endPoint];
var bezierCurve = new AMap.BezierCurve({
path: path,
});
map.add(bezierCurve);
Method
setOptions(optsArg)
Modify curve properties (including nodes of the path, line style, whether to draw the geodesic, etc. For details on properties, refer to the BezierCurveOptions list). Path modification is not supported; use the setPath(path) method to modify the path
Parameter: optsArg(BezierCurveOptions) Curve properties
Demo:
bezierCurve.setOptions({
strokeColor: "#fff",
isOutline: true,
});
getPath()
Get the array of nodes for the Bezier curve path
return value: (Array<Array<number>> | Array<Array<Array<number>>>) Array of nodes for the curve path
Demo:
bezierCurve.getPath();
setPath(path)
Set the array of nodes that make up the polyline
Parameter: path(Array) Path of the Bezier curve, see the path attribute introduction for details
Demo:
var startPoint = [[100.469964, 13.771655]]; //Start Point
var viaPoint = [
//Linear Bezier Curve
[100.468763, 13.763819], //Control Point
[100.473483, 13.763903], //Waypoint
];
var endPoint = [
//Linear Bezier Curve
[100.479663, 13.734389], //Control Point
[100.4861, 13.734139], //Waypoint
];
var path = [startPoint, viaPoint, endPoint];
bezierCurve.setPath(path);
getBounds()
Get the rectangular range object of the current curve
return value: (Bounds) Rectangular range fully containing the curve (latitude and longitude coordinates of the southwest and northeast corners)
Demo:
bezierCurve.getBounds();
hide()
Hide Bezier Line
Demo:
bezierCurve.hide();
show()
Show Bezier Curve
Demo:
bezierCurve.show();
setHeight(height)
Set the elevation of the Bezier curve (This method and the related attribute height are applicable to JSAPI v2.1Beta and above)
Parameter: height (Number) Elevation of the Bezier curve
Demo:
bezierCurve.setHeight(0);
getPolylineHeight()
Get the current elevation value of the Bezier curve (This method is applicable to JSAPI 2.1Beta and above)
return value: (number) Elevation of the Bezier curve
Demo:
bezierCurve.getPolylineHeight();
getExtData()
Get user-defined properties
return value: (Object) The value set by the extData property, returns an empty object if not set
Demo:
bezierCurve.getExtData();
setExtData(extData)
Set user-defined properties, supports any data type in JavaScript API
Parameter: extData (Object) User-defined data
Demo:
bezierCurve.setExtData({id:1});
destroy()
Destroy memory - Bezier curve
Demo:
bezierCurve.destroy();
getOptions()
Get line properties
return value: (BezierCurveOptions) Properties of the line
Demo:
bezierCurve.getOptions();
contains(point)
Determine whether the coordinate is inside the curve
Parameter: point (Vector2 | LngLat) The coordinate point to be judged, such as: AMap.LngLat(116.39,39.9) or [116.39, 39.9]
return value: (boolean) true includes, false excludes
Demo:
bezierCurve.contains(new AMap.LngLat(116.39, 39.9));
Event
Event Name | Description |
hide | Triggered when the overlay is hidden |
show | Triggered when the overlay is displayed |
click | Left Mouse Click Event |
dblclick | Left Mouse Double Click Event |
rightclick | Right Mouse Click Event |
mousedown | Event triggered when the mouse is pressed on a point marker |
mouseup | Event triggered when the mouse is pressed and then released on a point marker |
mouseover | Mouse over |
mouseout | Mouse out |
touchstart | Event triggered when touch starts, only applicable to mobile devices |
touchmove | Event triggered during touch movement, only applicable to mobile devices |
touchend | Event triggered when touch ends, only applicable to mobile devices |
For event object property descriptions, go to:MapsEvent
