高德地图面积测量小工具

article/2025/9/20 15:55:37

由于项目的需要，需要用到高德地图的测量面积功能，其实高德地图官方已经提供了测量面积的工具，但是感觉有点不太方便，于是在原来的测量面积工具的基础上进行一点补充，由于时间的原因，写的比较粗糙，其实有很多值得改进的地方，不过不影响使用。

先来看看高德地图官方测量面积的实现效果：

使用AMap.MouseTool插件的measureArea方法来实现面积测量，测量结束后，如果想要关闭面积测量，需要使用 mouseTool.close()方法关闭。

我想要的效果是在地图上绘制的多边形区域上提供一个关闭按钮，点击关闭按钮结束面积测量，于是，在原来的测量面积的基础上加入了关闭按钮。下面来看效果：

点击关闭按钮，则关闭面积测量，多边形从地图上移除。

代码如下：

measureArea.html

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css"><style>html,body,#container{height: 100%}.btn{width: 6rem;margin: 0 1rem 0 4.5rem;}</style><title>鼠标工具-面积测量</title>
</head>
<body>
<div id='container'></div>
<div class="input-card" style='width: 12rem;'><input type="button" name='func' id="area" value='面积测量'>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值&plugin=AMap.MouseTool"></script>
<script src="mathUtil.js"></script>
<script src="measureAreaUtil.js"></script><script type="text/javascript">var map = new AMap.Map('container',{zoom:15});var measureAreaTool = new MeasureAreaTool(map);var area = document.getElementById('area');area.onclick = function(e){measureAreaTool.measureArea();}
</script>
</body>
</html>

measureAreaUtil.js

//测面积工具
var MeasureAreaTool = function(map){var obj = new Object();obj.map = map;obj.areaOptions = {polygonOptions:{strokeColor:'#00ddff',fillColor:'#FFAA00',fillOpacity:0.3},textOptions:{offset:new AMap.Pixel(9,-9),zIndex:120},markerOptions:{icon:"https://webapi.amap.com/images/destroy.png",zIndex:120,title:"关闭面积测算",offset:new AMap.Pixel(-50,-16)}};obj.mouseTool = new AMap.MouseTool(obj.map);obj.mouseTool.measureAreaTool = obj;obj.mouseTool.on("draw",function(e){this.close(true)//关闭，并清除覆盖物var polygonPath = e.obj.getPath();if(polygonPath!=undefined&&polygonPath.length>0){var area = AMap.GeometryUtil.ringArea(polygonPath);area = BJMath.keepTwoDecimal(area/1000000);var tip = area + "平方公里";var polygon = new AMap.Polygon(this.measureAreaTool.areaOptions.polygonOptions);polygon.setPath(polygonPath);polygon.setMap(this.measureAreaTool.map);var point = polygonPath[0];//添加关闭按钮var marker = new AMap.Marker(this.measureAreaTool.areaOptions.markerOptions);marker.setPosition(point);marker.setMap(this.measureAreaTool.map);//添加文字标注var textObj = new AMap.Text(this.measureAreaTool.areaOptions.textOptions);textObj.setText(tip);textObj.setPosition(point);textObj.setStyle({"font-size":"12px"});textObj.setMap(this.measureAreaTool.map);marker.polygon = polygon;marker.textObj = textObj;marker.on("click",function (e) {var p = e.target.polygon;var t = e.target.textObj;marker.getMap().remove([p,t,e.target]);});}});obj.measureArea = function(){this.mouseTool.measureArea(this.areaOptions.polygonOptions);}return obj;
}

mathUtil.js

/*** 数学工具类* @type {{keepTwoDecimal: BJMath.keepTwoDecimal, keepTwoDecimalFull: BJMath.keepTwoDecimalFull}}*/
var BJMath = {keepTwoDecimal: //四舍五入保留2位小数（若第二位小数为0，则保留一位小数）function(num) {var result = parseFloat(num);if (isNaN(result)) {alert('传递参数错误，请检查！');return false;}result = Math.round(num * 100) / 100;return result;},keepTwoDecimalFull://四舍五入保留2位小数（不够位数，则用0替补）function(num) {var result = parseFloat(num);if (isNaN(result)) {alert('传递参数错误，请检查！');return false;}result = Math.round(num * 100) / 100;var s_x = result.toString();var pos_decimal = s_x.indexOf('.');if (pos_decimal < 0) {pos_decimal = s_x.length;s_x += '.';}while (s_x.length <= pos_decimal + 2) {s_x += '0';}return s_x;}
};

源码下载地址：

https://download.csdn.net/download/hgq0916/10688072