距离面积测量 AMap.MouseTool 最后更新时间: 2024年02月26日

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.rule({
  startMarkerOptions: { //设置量测起始点标记属性对象 可缺省   
    icon: new AMap.Icon({
      size: new AMap.Size(19, 31), //图标大小
      imageSize: new AMap.Size(19, 31), 
      image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
    }),
    offset: new AMap.Pixel(-9, -31),
  },
  endMarkerOptions: { //设置量测结束点标记属性对象 可缺省  
    icon: new AMap.Icon({
      size: new AMap.Size(19, 31), //图标大小
      imageSize: new AMap.Size(19, 31),
      image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
    }),
    offset: new AMap.Pixel(-9, -31),
  },
  midMarkerOptions: { //设置拖拽路线插件途经点点标记属性对象 可缺省
    icon: new AMap.Icon({
      size: new AMap.Size(19, 31), //图标大小
      imageSize: new AMap.Size(19, 31),
      image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
    }),
    offset: new AMap.Pixel(-9, -31),
  },
  lineOptions: { //可缺省
    strokeStyle: "solid",
    strokeColor: "#FF33FF",
    strokeOpacity: 1,
    strokeWeight: 2,
  },
});

1.5 测量面积

//在插件的回调函数中使用功能
mouseTool.measureArea({
   strokeColor:'#80d8ff',
   fillColor:'#80d8ff',
   fillOpacity:0.3
   //同 Polygon 的 Option 设置
 });

1.6 关闭鼠标工具

//在回调函数中使用插件功能
mouseTool.close();