高德地图JS API AMap.MouseTool绘制

fang 在这里插入图片描述

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

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

- 高德地图JS API AMap.MouseTool绘制
- - 鼠标工具 AMap.MouseTool
  - 运行示例
  - 实现步骤
  - - 1.引入JS API加载地图
    - 2.创建MouseTool工具类
    - 3.通过鼠标进行绘制覆盖物
    - 4.获取通过 AMap.MouseTool 绘制的点、线、面覆盖物的位置/范围/路径
    - 5.鼠标工具距离量测、面积量测、拉框放大
    - 全部代码

高德地图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 Key
      version: "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 Key
      version: "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>