鼠标工具距离面积测量

您所在的位置：网站首页 › 高德测距在哪里 › 鼠标工具距离面积测量

鼠标工具距离面积测量

2024-07-16 18:16| 来源: 网络整理| 查看: 265

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

距离面积测量示例

亲手试一试

下载完整代码

1、距离面积测量 AMap.MouseTool11.1 准备成为开发者并创建 key

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

提示

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

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

前往展示地图，了解完整地图创建

31.3 创建 MouseTool 实例

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

//异步加载插件 AMap.plugin("AMap.MouseTool", function () { var mouseTool = new AMap.MouseTool(map); //创建鼠标工具插件实例 });41.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, }, });51.5 测量面积//在插件的回调函数中使用功能 mouseTool.measureArea({ strokeColor:'#80d8ff', fillColor:'#80d8ff', fillOpacity:0.3 //同 Polygon 的 Option 设置 });61.6 关闭鼠标工具//在回调函数中使用插件功能 mouseTool.close();提示

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

查看AMap.MouseTool全部属性和方法

测距工具示例

【本文地址】

鼠标工具距离面积测量

鼠标工具距离面积测量

今日新闻

推荐新闻