Vector Graphics Drawing
If you want to use the mouse to draw markers, lines, polygons, rectangles, circles, distance measurement, area measurement, zoom in, zoom out, etc., you can use the mouse tool plugin AMap.MouseTool. This article introduces the ability of this plugin to draw vector graphics.
Vector Graphics Drawing Example
1、Vector Graphics Drawing Steps
1.1 Create Map
const map = new AMap.Map("container", {
zoom: 10,
showOversea: true,
mapStyle: "amap://styles/whitesmoke",
viewMode: "2D",
});1.2 Create an instance of MouseTool
This example uses an asynchronous method to install the plugin. The plugin is introduced on-demand through the AMap.plugin method, and the plugin functions are used after the plugin callback. Plugin introduction method Plugin usage.
//Load plugin asynchronously
AMap.plugin("AMap.MouseTool", function () {
var mouseTool = new AMap.MouseTool(map); //Create an instance of the mouse tool plugin
});1.3 Bind events to MouseTool
//Use features in the plugin's callback function
mouseTool.on("draw", function (event) {
//event.obj For the drawn overlay objects
console.log("Overlay object drawing completed");
});1.4 Draw vector graphics
- Draw line
//Use functions in the plugin's callback function
mouseTool.polyline({
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeStyle: "solid", //Line style also supports 'dashed'
//strokeDasharray: [10, 5], //The strokeDasharray property is effective when strokeStyle is dashed
})Click the left mouse button on the map to start drawing a polyline, and double-click the left button or click the right button to finish the current polyline drawing.
- Draw polygon
//Use the function in the plugin's callback function
mouseTool.polygon({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: "solid", //The line style also supports 'dashed'
//strokeDasharray: [30,10], //The strokeDasharray property is valid when the strokeStyle is dashed
})Click the left mouse button on the map to start drawing a polygon, double click the left mouse button or right click to end the current polygon drawing.
- Draw a rectangle
//Use the function in the plugin's callback function
mouseTool.rectangle({
strokeColor:'red',
strokeOpacity:0.5,
strokeWeight: 6,
fillColor:'blue',
fillOpacity:0.5,
strokeStyle: 'solid', //The line style also supports 'dashed'
//strokeDasharray: [30,10], //The strokeDasharray property is valid when the strokeStyle is dashed
})On the map, click and hold the left mouse button and drag to start drawing a rectangle, and release the left button to end the current rectangle drawing process.
- Draw a circle
//Use the function in the plugin's callback function
mouseTool.circle({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: 'solid', //The line style also supports 'dashed'
//strokeDasharray: [30,10], //The strokeDasharray property is valid when the strokeStyle is dashed
})On the map, click and hold the left mouse button and drag to start drawing a circle, and release the left button to end the current circle drawing process.
2、Description of properties and methods involved in this chapter
2.1 AMap.MouseTool