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

1.1 准备

1.2 创建地图

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

1.3 创建 MouseTool 实例

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

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

1.4 给 MouseTool 绑定事件

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

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 时有效
})