leaflet计算多边形面积

最新推荐文章于 2025-07-17 11:14:52 发布

转载最新推荐文章于 2025-07-17 11:14:52 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yaohuimo/p/9515464.html

本文介绍如何使用Leaflet绘制圆形，并通过不同方法计算圆形的面积，包括使用数学公式、turf.js库及地图服务。

上一篇介绍了使用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>

转载于:https://www.cnblogs.com/yaohuimo/p/9515464.html