开发 地图 JS API 2.0 进阶教程 服务插件和工具 鼠标工具距离面积测量

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

本文介绍如何使用AMap.MouseTool鼠标工具插件来实现RagingTool测距功能和measureArea 面积测量功能。

距离面积测量示例

1、距离面积测量 AMap.MouseTool

1

1.1 准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2

1.2 创建地图

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

1.3 创建 MouseTool 实例

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

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

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,
  },
});
5

1.5 测量面积

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

1.6 关闭鼠标工具

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

mouseTool.close(ifClear)方法用于关闭鼠标工具。ifClear参数可缺省(默认为false)。设为true时,关闭工具并清除地图上通过鼠标工具编辑绘制的所有覆盖物对象;设为false时,仅关闭工具,保留覆盖物。

返回顶部 示例中心 常见问题 智能客服 公众号
二维码