高德地图测距工具的使用

借用 RangingTool 插件实现

let rule;
AMap.plugin(['AMap.RangingTool'], function() {
  // 初始化测距工具
  rule = new window.AMap.RangingTool(map);
  // 开启测距工具
  rule.turnOn();
})

单次测距结束之后关闭测距工具

测距工具双击结束本次测距，默认结束之后还可以再次进行测距，如果不关闭测距工具在地图上无法进行其它操作。可以通过监听测距结束事件关闭测距工具。

let rule;
AMap.plugin(['AMap.RangingTool'], function() {
  // 初始化测距工具
  rule = new window.AMap.RangingTool(map);
  // 监听测距结束事件关闭测距工具
  rule.on('end', () => { rule.turnOff() });
  // 开启测距工具
  rule.turnOn();
})

单次测距结束之后关闭测距工具时地图会缩放

测距工具双击结束本次测距，在结束时如果关闭了测距工具此时地图会响应双击缩放的效果，所以延时关闭测距工具来避免此问题。

let rule;
AMap.plugin(['AMap.RangingTool'], function() {
  // 初始化测距工具
  rule = new window.AMap.RangingTool(map);
  // 监听测距结束事件关闭测距工具 (延时关闭避免双击结束测距时地图缩放)
  rule.on('end', () => { setTimeout(() => rule.turnOff(), 200) });
  // 开启测距工具
  rule.turnOn();
})

多次测距且每一次测距之后不销毁测距所画的线，可以自定义时机清除测距所画的线

由于 RangingTool 只能在每一次测距结束后清除所画的线，所以使用鼠标工具 MouseTool 的测距模式实现。

let rules = []; // 使用数组存储每一次测距工具的实例
window.AMap.plugin(['AMap.MouseTool'], function() {
  // 当前的测距工具实例
  const currentRule = new window.AMap.MouseTool(map);
  // 存储测距实例
  rules.push(currentRule);
  // 监听绘制结束事件关闭测距工具
  currentRule.on('draw', () => { setTimeout(() => currentRule.close(), 200) });
  // 开启距离量测模式
  currentRule.rule();
});


// 清除测距工具所画的线
rules.forEach((item: any) => item.close(true));
rules = [];