上一篇介紹了使用leaflet繪制圓形，那如何計算圓形的面積呢？
1、使用數學公式計算，繪制好圓形后，獲取中心點以及半徑即可
2、使用第三方工具計算，如turf.js. 這里turf的area方法入參為geojson對象
3、使用超圖的地圖服務做面積計算，見下文范例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖形繪制並計算面積</title>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript" include="turf,leaflet.draw" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
var map, url = "http://support.supermap.com.cn:8090/iserver/services/map-china400/rest/maps/China";
map = L.map('map', {
center: [33, 114],
zoom: 4
});
L.supermap.tiledMapLayer(url).addTo(map);
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: {},
rectangle: false,
marker: false,
remove: true
},
edit: {
featureGroup: editableLayers,
remove: true
}
});
map.addControl(drawControl);
handleMapEvent(drawControl._container, map);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
//繪制完成后，獲取圓形的半徑和中心點坐標
var radius = layer._mRadius;
var lonlat = layer._latlng;
console.log(radius + "; " + lonlat);
//點集
var parts = [];
//計算圓的邊緣所有點
for (var i = 0; i < 360; i++) {
var radians = (i + 1) * Math.PI / 180;
var circlePoint = [Math.cos(radians) * radius + lonlat.lat, Math.sin(radians) * radius + lonlat
.lng
];
parts[i] = circlePoint;
}
//用點集來構造leaflet的面對象
var polygon1 = L.polygon(parts);
//服務端計算面積
//getAreaByServer(polygon1);
//數學公式計算面積
//getAreaByClient(radius);
//turf計算面積
getAreaByTurf(polygon1.toGeoJSON());
});
function getAreaByClient(radius) {
//使用數學公式或者用turf計算
var square = radius * radius * Math.PI;
alert("面積： " + square + " 平方米");
}
function getAreaByTurf(polygon) {
var area = turf.area(polygon);
alert("面積： " + area + " 平方米");
}
function getAreaByServer(polygon) {
//參數說明： SuperMap.MeasureParameters(geometry, options)
// distanceMode(指定量算的方式為按球面長度 'Geodesic' 或者平面長度 'Planar' 來計算，默認是球面)
// prjCoordSys（指定該量算操作所使用的投影）
// unit (量算單位。默認量算結果以米為單位)
var areaMeasureParam = new SuperMap.MeasureParameters(polygon, { distanceMode: 'Geodesic' });
L.supermap
.measureService(url)
.measureArea(areaMeasureParam, function (serviceResult) {
alert("面積： " + serviceResult.result.area + " 平方米");
});
}
function handleMapEvent(div, map) {
if (!div || !map) {
return;
}
div.addEventListener('mouseover', function () {
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
});
div.addEventListener('mouseout', function () {
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
});
}
</script>
</body>
</html>