console 命令行工具 X clear
console
<!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);


            //新建一个层组cities
        var cities = L.layerGroup();
        //将maker添加到图层组cities中
        L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
        L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
        
        //新建一个层组cities2
        var cities2 = L.layerGroup();
        L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities2);
        L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities2);

        //新建grayscale图层
        var grayscale = L.tileLayer(url, {
            id: 'mapbox.light',
            attribution: url
        });

        //新建streets图层
        var streets = L.tileLayer(url, {
            id: 'mapbox.streets',
            attribution: url
        });

        //初始化map，并设置基本图层为grayscale，覆盖图层cities
        var leafletMap = L.map('mapDiv', {
            center: [39.73, -104.99],
            zoom: 10,
           // doubleClickZoom: false, // OK？？
            layers: [grayscale, cities] //默认图层
            
        });

        //grayscale 与 streets 互斥
        var baseLayers = {
            "Grayscale": grayscale,
            "Streets": streets
        };

        //overlay—在base layer之上放置的其他东西。
        var overlays = {
            "Cities": cities,
            "Cities2": cities2
        };

        //baselayers—互斥的图层（在地图上同一时间只能有一个图层可见）
        //overlays—在base layer之上放置的其他东西。
        //添加进地图
        // L.control.layers(baseLayers, overlays).addTo(leafletMap);
        // map.doubleClickZoom.disable()

        // 面积测量方法
        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>