使用leaflet完成测量和存取功能

目标效果

• 可以进行测量功能
• 可以存取图形边界
• 将图形保存为Geojson

本项目使用的是leaflet，使用了leaflet的测量功能插件(Github传送门:https://github.com/ljagis/leaflet-measure)。

基于该方法进行了修改。

开始上代码：

1.引用的文件

<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/map/Leaflet/leaflet.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/map/measure/leaflet-measure-path.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/map/MousePosition/L.Control.MousePosition.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/map/EasyButton/easy-button.css">

//测量功能需要引用的文件
<script src="${pageContext.request.contextPath}/lib/map/Leaflet/leaflet.js"></script>
<script src="${pageContext.request.contextPath}/lib/map/Leaflet/leaflet-src.js"></script>
<script src="${pageContext.request.contextPath}/lib/map/measure/Leaflet.Editable.js"></script>
<script src="${pageContext.request.contextPath}/lib/map/measure/leaflet-measure-path.js">
</script>

<script src="${pageContext.request.contextPath}/lib/map/MousePosition/L.Control.MousePosition.js"></script>
<script src="${pageContext.request.contextPath}/lib/map/EasyButton/easy-button.js"></script>

2.html(只截取了部分html代码)

<div id="cxqd-div" style="background-color: #0C0C0C">
    <div id="map" style="height: 100%;width: 100%;">
    </div>
    <div class="layui-btn-group" id="toolbar">
        <button v-bind:class="[play,display]" onclick="areaMeasure.init()">圈地</button>
        <button v-bind:class="[play,display]" id="save">保存</button>
        <button v-bind:class="[play,display]" onclick="clear_polygon()">删除</button>
    </div>
</div>

 3.Javascript代码

    var map = L.map("map", {
        renderer: L.canvas(),
        center: [37.6, 116.9],
        zoom: 11,
        attributionControl: false,//关闭右下角标识
        editable: true,//允许编辑
        // maxBounds: bounds,
        maxZoom: 17
    });



 // 面积测量方法
    var areaMeasure = {
        points: [],
        color: "red",
        layers: L.layerGroup(),
        polygon: null,
        init: function () {
            areaMeasure.points = [];
            areaMeasure.polygon = null;
            map.on('click', areaMeasure.click).on('dblclick', areaMeasure.dblclick);
            control_map.display = 'layui-btn-disabled';
        },
        click: function (e) {
            map.doubleClickZoom.disable();
            // 添加点信息
            areaMeasure.points.push(e.latlng);
            // 添加面
            map.on('mousemove', areaMeasure.mousemove);
        },
        mousemove: function (e) {
            areaMeasure.points.push(e.latlng);
            if (areaMeasure.polygon)
                map.removeLayer(areaMeasure.polygon);
            areaMeasure.polygon = L.polygon(areaMeasure.points, {showMeasurements: true, color: 'blue'});
            control_map.maps.push(areaMeasure.polygon);
            areaMeasure.polygon.addTo(areaMeasure.layers);
            areaMeasure.layers.addTo(map);
            areaMeasure.points.pop();
        },
        dblclick: function (e) { // 双击结束
            control_map.array = [];
            areaMeasure.polygon.addTo(areaMeasure.layers);
            areaMeasure.polygon.enableEdit();
            map.on('editable:vertex:drag editable:vertex:deleted', areaMeasure.polygon.updateMeasurements, areaMeasure.polygon);
            map.off('click', areaMeasure.click).off('mousemove', areaMeasure.mousemove).off('dblclick', areaMeasure.dblclick);
            control_map.display = '';
            for (var i in areaMeasure.polygon._latlngs[0]) {
                var a = new Array();
                a[1] = areaMeasure.polygon._latlngs[0][i].lat;
                a[0] = areaMeasure.polygon._latlngs[0][i].lng;
                control_map.array.push(a);
            }
            model.MJ = Math.ceil(computeSignedArea(control_map.array));
            model.MJM = model.MJ * (0.0015);

        },
        destory: function () {

        }
    };

    /*计算多边形面积*/
    function computeSignedArea(path) {
        var radius = 6378137;
        var len = path.length;
        if (len < 3) return 0;
        var total = 0;
        var prev = path[len - 1];
        var prevTanLat = Math.tan(((Math.PI / 2 - (prev[0]) / 180 * Math.PI) / 2));
        var prevLng = (prev[1]) / 180 * Math.PI;
        for (var i in path) {
            var tanLat = Math.tan((Math.PI / 2 -
                (path[i][0]) / 180 * Math.PI) / 2);
            var lng = (path[i][1]) / 180 * Math.PI;
            total += polarTriangleArea(tanLat, lng, prevTanLat, prevLng);
            prevTanLat = tanLat;
            prevLng = lng;
        }
        return Math.abs(total * (radius * radius));
    }

    function polarTriangleArea(tan1, lng1, tan2, lng2) {
        var deltaLng = lng1 - lng2;
        var t = tan1 * tan2;
        return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));
    }

核心代码为areaMeasure

转载自：https://blog.csdn.net/qq_36213352/article/details/87991739