003 Leaflet 第三個demo 地圖上的面積測量


一、使用到的文件

leaflet-src.js

Leaflet.Editable.js  

leaflet-measure-path.js

leaflet.css

leaflet-measure-path.css

面積測量區別於拉框測量面積而言,重點在於面積的計算上面,咨詢了gis的小伙伴們,放才知道讓用戶隨意框選形狀,計算面積時個復雜的邏輯。

既然是復雜的邏輯,看來不適合自己造個輪子玩。

所以今天借助了一個插件leaflet-measure-path

插件的下載地址:https://github.com/ProminentEdge/leaflet-measure-path

二、源碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Leaflet Measure Path - example</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
    <link rel="stylesheet" href="../leaflet-measure-path.css" />
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: sans-serif;
            font-size: 10px;
        }
        #map {
            width: 800px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <button id="mesureBtn" onClick="areaMeasure.init()">面積測量</button>

    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet-editable@latest/src/Leaflet.Editable.js" ></script>
    <script src="../leaflet-measure-path.js"></script>
    <script type="text/javascript">
        var map = L.map('map', {editable: true}).setView([57.69, 11.9], 13);
        L.tileLayer('http://tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var polygon = L.polygon([
                [57.69, 11.89],
                [57.697, 11.88],
                [57.71, 11.89],
                [57.71, 11.91],
                [57.69, 11.91]
            ], {showMeasurements: true})
            .addTo(map);

        L.polyline([
                [57.67, 11.85],
                [57.677, 11.86],
                [57.68, 11.85],
                [57.69, 11.86],
            ], {showMeasurements: true, measurementOptions: {imperial:true}})
            .addTo(map);

        L.circle([57.694, 11.94], 1000, {showMeasurements: true})
            .addTo(map);

        L.circle([57.705, 11.92], 750, {showMeasurements: true, measurementOptions: {imperial:true}})
            .addTo(map);

        polygon.enableEdit();
        map.on('editable:vertex:drag editable:vertex:deleted', polygon.updateMeasurements, polygon);    
        
        // 面積測量方法
        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);
            },
            close:function(){
                var lab = rectangleMeasure.tips.getLabel();
                var tt = document.createTextNode(rectangleMeasure.tips.getLabel()._content);
                lab._container.innerHTML = "";
                lab._container.appendChild(tt);
                var span = document.createElement("span");
                span.innerHTML = "【關閉】";
                span.style.color = "#00ff40";
                lab._container.appendChild(span);
                L.DomEvent.addListener(span,"click",function(){
                    rectangleMeasure.destory();
                });
            },
            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: 'red'});
                //areaMeasure.polygon.addTo(map);
                areaMeasure.polygon.addTo(areaMeasure.layers);
                areaMeasure.layers.addTo(map);
                areaMeasure.points.pop();
            },
            dblclick:function(e){ // 雙擊結束
                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);
            },
            destory:function(){
                
            }
        }
    </script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM