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

绘制矢量图形 AMap.MouseTool 最后更新时间: 2024年01月15日

如果你想通过鼠标实现画标记点、线、多边形、矩形、圆,距离量测,面积量测,拉框放大,拉框缩小等功能,可以使用鼠标工具插件AMap.MouseTool,本文介绍该插件绘制矢量图形的能力。

绘制矢量图形示例

1、绘制矢量图形步骤

1

1.1 准备

成为开发者并创建 key

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

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

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

1.3 创建 MouseTool 实例

本例使用异步方式安装插件。通过AMap.plugin方法按需引入插件,在plugin回调之后使用插件功能。插件引入方式 插件的使用

//异步加载插件
AMap.plugin("AMap.MouseTool", function () {
  var mouseTool = new AMap.MouseTool(map); //创建鼠标工具插件实例
});
4

1.4 给 MouseTool 绑定事件

//在插件的回调函数中使用功能
mouseTool.on("draw", function (event) {
  //event.obj 为绘制出来的覆盖物对象
  console.log("覆盖物对象绘制完成");
});
5

1.5 绘制矢量图形

  • 绘制线
//在插件的回调函数中使用功能
mouseTool.polyline({
  strokeColor: "#3366FF", //轮廓线颜色
  strokeOpacity: 1, //轮廓线透明度
  strokeWeight: 6, //轮廓线宽度
  strokeStyle: "solid", //线样式还支持 'dashed'
  //strokeDasharray: [10, 5], //strokeDasharray 属性在 strokeStyle 是 dashed 时有效
})
提示

在地图上单击鼠标左键开始绘制折线,鼠标左键双击或右键单击结束当前折线绘制。

  • 绘制多边形
//在插件的回调函数中使用功能
mouseTool.polygon({
  strokeColor: "#FF33FF", //轮廓线颜色
  strokeOpacity: 1, //轮廓线透明度
  strokeWeight: 6, //轮廓线宽度
  strokeOpacity: 0.2, //轮廓线透明度
  fillColor: '#1791fc', //多边形填充颜色
  fillOpacity: 0.4, //多边形填充透明度
  strokeStyle: "solid", //线样式还支持 'dashed'
  //strokeDasharray: [30,10], //strokeDasharray 属性在 strokeStyle 是 dashed 时有效
})
提示

在地图上单击鼠标左键开始绘制多边形,鼠标左键双击或右键单击结束当前多边形的绘制。

  • 绘制矩形
//在插件的回调函数中使用功能
mouseTool.rectangle({
  strokeColor:'red', //轮廓线颜色
  strokeOpacity:0.5, //轮廓线透明度
  strokeWeight: 6, //轮廓线宽度
  fillColor:'blue', //多边形填充颜色
  fillOpacity:0.5, //多边形填充透明度
  strokeStyle: 'solid', //线样式还支持 'dashed'
  //strokeDasharray: [30,10], //strokeDasharray 属性在 strokeStyle 是 dashed 时有效
})
提示

在地图上点击鼠标左键并拖动开始绘制矩形,抬起左键后结束当前矩形的绘制。

  • 绘制圆形
//在插件的回调函数中使用功能
mouseTool.circle({
  strokeColor: "#FF33FF", //轮廓线颜色
  strokeOpacity: 1, //轮廓线透明度
  strokeWeight: 6, //轮廓线宽度
  strokeOpacity: 0.2, //轮廓线透明度
  fillColor: '#1791fc', //多边形填充颜色
  fillOpacity: 0.4, //多边形填充透明度
  strokeStyle: 'solid', //线样式还支持 'dashed'
  //strokeDasharray: [30,10], //strokeDasharray 属性在 strokeStyle 是 dashed 时有效
})
提示

在地图上点击鼠标左键并拖动开始绘制矩形,抬起左键后结束当前矩形的绘制。

2、本章涉及的属性及方法说明

2.1 AMap.MouseTool

方法

说明

参数值描述

polyline(opts)

开启鼠标画折线模式

opts:参考 PolylineOptions 设置

polygon(opts)

开启鼠标画多边形模式

opts:参考 PolygonOptions 设置

rectangle(opts)

开启鼠标画矩形模式

opts:参考 PolygonOptions 设置

circle(opts)

开启鼠标画圆模式

opts:参考 CircleOptions 设置

返回顶部 示例中心 常见问题 智能客服 公众号
二维码