高德地图JS API AMap.MouseTool绘制

fang

🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图JS API 开发——区划浏览DistrictExplorer
高德地图JS API加载行政区边界AMap.Polygon

高德地图JS API AMap.MouseTool绘制

在前期文章谈到过关于高德矢量图形，用于在地图上绘制线、面等矢量地图要素的类型；接下来介绍鼠标工具 MouseTool 绘制，包括绘制线段、多边形、矩形、圆形，这种功能来DIY区域块、设置为围栏划分。

鼠标工具 AMap.MouseTool

new AMap.MouseTool(map: Map)

AMap.MouseTool 插件主要通过用户在地图图面的鼠标操作，绘制相应的点、线、面覆盖物；或者进行图面的距离测量、面积量测、拉框放大、拉框缩小等。。其下的成员主体函数：marker(opts)、circle(opts)、rectangle(opts)、polyline(opts)、polygon(opts)、measureArea(opts)、rule(opts)、rectZoomIn(opts)、rectZoomOut(opts)、及close(ifClear)

成员函数	描述	参数
marker([opts])	开启鼠标画点标注模式。鼠标在地图上单击绘制点标注，标注样式参考MarkerOptions设置	opts (MarkerOptions) 可选，参考MarkerOptions设置
circle([opts])	开启鼠标画圆模式。鼠标在地图上拖动绘制相应的圆形。圆形样式参考CircleOptions设置	opts (CircleOptions) 可选，参考CircleOptions设置
rectangle([opts])	开启鼠标画矩形模式。鼠标在地图上拉框即可绘制相应的矩形。矩形样式参考PolygonOptions设置	opts (PolygonOptions) 可选，参考PolygonOptions设置
polyline([opts])	开启鼠标画折线模式。鼠标在地图上点击绘制折线，鼠标左键双击或右键单击结束绘制，折线样式参考PolylineOptions设置	opts (PolylineOptions) 可选，参考PolylineOptions设置
polygon([opts])	开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制，多边形样式参考PolygonOptions设置	opts (PolygonOptions) 可选，参考PolygonOptions设置
measureArea([opts])	开启面积量测模式。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。量测面样式参考PolygonOptions设置	opts (PolygonOptions) 可选，参考PolygonOptions设置
rule([opts])	开启距离量测模式。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。量测线样式参考PolylineOptions设置 注：不能同时使用rule方法和RangTool插件进行距离量测	opts (PolylineOptions) 可选，参考PolylineOptions设置
rectZoomIn([opts])	开启鼠标拉框放大模式。鼠标可在地图上拉框放大地图。矩形框样式参考PolygonOptions设置	opts (PolygonOptions) 可选，参考PolygonOptions设置
rectZoomOut([opts])	开启鼠标拉框缩小模式。鼠标可在地图上拉框缩小地图。矩形框样式参考PolygonOptions设置	opts (PolygonOptions) 可选，参考PolygonOptions设置
close([ifClear])	关闭当前鼠标操作。参数arg设为true时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象；设为false时，保留所绘制的覆盖物对象。默认为false	ifClear (boolean) 可选，是否清除地图上的覆盖物

运行示例

InsCode审核中

实现步骤

1.引入JS API加载地图

加载JS API注意AMap.MouseTool需要引入使用 plugins: ["AMap.MouseTool"]

引入方式看自己项目选择，前期文章可供参考👉 「JS API急救包」

  import AMapLoader from '@amap/amap-jsapi-loader';const initializeMap = async () => {await AMapLoader.load({key: "", // 请替换为您自己的高德地图API Keyversion: "2.0",plugins: ["AMap.MouseTool"] // 引入AMap.MouseTool 插件}).then((AMap) => {map = new AMap.Map('container', {zoom: 14});});};

2.创建MouseTool工具类

      //在地图中添加MouseTool插件mouseTool = new AMap.MouseTool(map);//添加绘制触发事件draw()mouseTool.on('draw', (e) => {overlays.value.push(e.obj);});

3.通过鼠标进行绘制覆盖物

mouseTool.marker({// 在这里配置样式
});

如果想通过鼠标点击，在图面添加自定义样式 Marker 点，只需要在 marker 方法中添加点样式 MarkerOptions。具体配置参考 「点覆盖物」。
线，面的添加方式同上。只要将 marker 方法替换成相应的线 mousetool.polyline(); 或者 面 mousetool.polygon(); 方法即可。

mouseTool.polyline(opts);
mouseTool.polygon(opts);
mouseTool.rectangle(opts);
// 更多...

4.获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径

使用鼠标工具绘制的点、折线、多边形、圆形、矩形等覆盖物，都可以通过多边形覆盖物自身的方法，获取到位置/范围/路径。此处以多边形为例，阐述获取相应信息的方式：

    //在地图中添加MouseTool插件var mouseTool = new AMap.MouseTool(map);//用鼠标工具画多边形var drawPolygon = mouseTool.polygon(); //添加事件AMap.event.addListener( mouseTool,'draw',function(e){console.log(e.obj.getPath());//获取路径/范围});

5.鼠标工具距离量测、面积量测、拉框放大

鼠标工具除可以绘制多种覆盖物以外，还可以进行距离量测、面积量测、拉框放大、拉框缩小等操作。

以下以距离量测模式为例介绍。鼠标在地图上单击绘制量测节点，并计算显示两两节点之间的距离，鼠标左键双击或右键单击结束当前量测操作。距离测量方式：

   //在地图中添加MouseTool插件var mouseTool = new AMap.MouseTool(map);//测量mouseTool .rule(); 

全部代码

<!-- Vue 3 Code -->
<template><div><div ref="container" id="container"></div><div class="info">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div><div class="input-card"><div class="input-item"><input type="radio" name="func" value="marker" v-model="selectedTool"><span class="input-text">画点</span><input type="radio" name="func" value="polyline" v-model="selectedTool"><span class="input-text">画折线</span><input type="radio" name="func" value="polygon" v-model="selectedTool"><span class="input-text" style="width:5rem;">画多边形</span></div><div class="input-item"><input type="radio" name="func" value="rectangle" v-model="selectedTool"><span class="input-text">画矩形</span><input type="radio" name="func" value="circle" v-model="selectedTool"><span class="input-text">画圆</span><input type="radio" name="func" value="distance" v-model="selectedTool"><span class="input-text">测距</span></div><div class="input-item"><input id="clear" type="button" class="btn" value="清除" @click="clearOverlays" /><input id="close" type="button" class="btn" value="关闭绘图" @click="closeDrawing" /></div></div></div></template><script setup>import { ref, onMounted, onBeforeUnmount, watch } from 'vue';import AMapLoader from '@amap/amap-jsapi-loader';const containerRef = ref(null);const selectedTool = ref('marker');const overlays = ref([]);let map = null;let mouseTool = null;const initializeMap = async () => {await AMapLoader.load({key: "22b379529dd2879095130ee6b2774d36", // 请替换为您自己的高德地图API Keyversion: "2.0",plugins: ["AMap.MouseTool"]}).then((AMap) => {map = new AMap.Map('container', {zoom: 14});mouseTool = new AMap.MouseTool(map);mouseTool.on('draw', (e) => {overlays.value.push(e.obj);});});};const draw = (type) => {switch (type) {case 'marker':mouseTool.marker();break;case 'polyline':mouseTool.polyline({ strokeColor: '#ff33ff', //轮廓线颜色strokeOpacity: 1, //轮廓线透明度strokeWeight: 3, //轮廓线宽度strokeStyle: "solid", //线样式还支持 'dashed'});break;case 'polygon':mouseTool.polygon({ strokeColor: '#3366FF',strokeWeight: 3, });break;case 'rectangle':mouseTool.rectangle({ fillColor: '#87CEFA', // 填充颜色fillOpacity: 0.2, // 填充透明度strokeColor: '#1E90FF',strokeWeight: 3, });break;case 'circle':mouseTool.circle({ fillColor: '#ff3333', strokeColor: '#DC143C',strokeWeight: 3, });break;case 'distance':mouseTool.rule();break;}};const clearOverlays = () => {map.remove(overlays.value);overlays.value = [];};const closeDrawing = () => {mouseTool.close(true);selectedTool.value = '';};watch(selectedTool, (newVal) => {if (newVal) {draw(newVal);}});onMounted(() => {initializeMap();});onBeforeUnmount(() => {if (map) {map.destroy();}});</script><style scoped>// import "../assets/mousetool.css"; 示例原样式https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css#container {height: 100vh;width: 100vw;
}</style>

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀