绘制矢量图形 AMap.MouseTool 最后更新时间: 2023年04月12日

亲手试一试

下载完整代码

鼠标工具插件。通过该插件，可进行鼠标画标记点、线、多边形、矩形、圆、距离量测、面积量测、拉框放大、拉框缩小等功能。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

绘制矢量图形 AMap.MouseTool

使用方式如下：

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

创建MouseTool实例

var mouseTool = new AMap.MouseTool(map)

提示

插件初始化前需要引入插件，查看引入方式。

绑定MouseTool事件

mouseTool.on('draw', function(event) {
  // event.obj 为绘制出来的覆盖物对象
  log.info('覆盖物对象绘制完成')
})

绘制矢量图形

绘制线

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],
})

查看全部属性和方法