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

亲手试一试

1.1 准备

1.2 创建地图

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

1.3 创建 MouseTool 实例

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

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

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

1.5 测量面积

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

1.6 关闭鼠标工具

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