绘制矢量图形 AMap.MouseTool 最后更新时间: 2023年04月12日
鼠标工具插件。通过该插件,可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。
准备
成为开发者并创建 key
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
绘制矢量图形 AMap.MouseTool
使用方式如下:
1
创建地图
const map = new AMap.Map('container',{
zoom: 10, //设置地图显示的缩放级别
center: [116.397428, 39.90923], //设置地图中心点坐标
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D' //设置地图模式
});
3
绑定MouseTool事件
mouseTool.on('draw', function(event) {
// event.obj 为绘制出来的覆盖物对象
log.info('覆盖物对象绘制完成')
})
4
绘制矢量图形
- 绘制线
mouseTool.polyline({
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 6,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [10, 5],
})
- 绘制多边形
mouseTool.polygon({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
// 线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
// strokeDasharray: [30,10],
})
- 绘制矩形
mouseTool.rectangle({
strokeColor:'red',
strokeOpacity:0.5,
strokeWeight: 6,
fillColor:'blue',
fillOpacity:0.5,
// strokeStyle还支持 solid
strokeStyle: 'solid',
// strokeDasharray: [30,10],
})
- 绘制圆形
mouseTool.circle({
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillColor: '#1791fc',
fillOpacity: 0.4,
strokeStyle: 'solid',
// 线样式还支持 'dashed'
// strokeDasharray: [30,10],
})