距离面积测量 AMap.MouseTool 最后更新时间: 2023年03月27日

亲手试一试

下载完整代码

使用MouseTool封装了RagingTool的测距功能，同时提供了 measureArea 面积测量功能。

准备

成为开发者并创建 key

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

距离面积测量 AMap.MouseTool

使用方式如下：

创建地图

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

创建MouseTool实例

var mouseTool = new AMap.MouseTool(map)

测量距离

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

提示

详情请参考 RangingTool

测量面积

 mouseTool.measureArea({
   strokeColor:'#80d8ff',
   fillColor:'#80d8ff',
   fillOpacity:0.3
   //同 Polygon 的 Option 设置
 });

查看全部属性和方法

测距工具示例