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

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

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

准备

成为开发者并创建 key

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

距离面积测量 AMap.MouseTool

使用方式如下:

1

创建地图

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

创建MouseTool实例

var mouseTool = new AMap.MouseTool(map)
3

测量距离

 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 

4

测量面积

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

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