开发 地图 JS API 2.0 进阶教程 服务插件和工具 鼠标工具绘制矢量图形

绘制矢量图形 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'  //设置地图模式
});
2

创建MouseTool实例

var mouseTool = new AMap.MouseTool(map)
提示

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

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

示例
中心
常见
问题
智能
客服