地圖畫點，線，面，測量距離，面積

html

<div class="select-table table-striped">
    <div id="map" >

    </div>
<!--    點-->
    <div  id="btnDrawPoint"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6574"><path d="M811.084 578.703l-279.442 417.501c-5.482 8.227-14.684 13.148-24.557 13.148l-0.002 0c-9.818 0-19.041-4.927-24.557-13.127l-279.307-416.421c-34.029-54.436-51.751-116.094-51.751-179.049 0-189.898 159.406-344.416 355.359-344.416 195.927 0 355.359 154.508 355.359 344.416 0 62.864-17.669 124.398-51.088 177.949l0 0zM506.829 115.917c-163.293 0-296.128 127.782-296.128 284.842 0 51.751 14.606 102.412 42.17 146.556l254.208 378.977 254.4-380.022c26.976-43.239 41.484-93.845 41.484-145.498 0-157.055-132.853-284.842-296.117-284.842l0 0zM506.829 563.263c-92.846 0-168.368-73.486-168.368-163.827 0-90.292 75.523-163.791 168.368-163.791 92.846 0 168.359 73.474 168.359 163.791 0 90.315-75.506 163.827-168.359 163.827l0 0zM506.829 295.219c-60.212 0-109.156 46.774-109.156 104.239 0 57.471 48.953 104.239 109.156 104.239 60.195 0 109.143-46.766 109.143-104.239 0-57.461-48.953-104.239-109.143-104.239l0 0z" fill="#333" p-id="6575"></path></svg><span>定位</span></div>
<!--    線-->
    <div  id="btnDrawLine"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1247"><path d="M187.733333 1024h-170.666666c-10.24 0-17.066667-6.826667-17.066667-17.066667v-170.666666c0-10.24 6.826667-17.066667 17.066667-17.066667h170.666666c10.24 0 17.066667 6.826667 17.066667 17.066667v170.666666c0 10.24-6.826667 17.066667-17.066667 17.066667zM34.133333 989.866667h136.533334v-136.533334H34.133333v136.533334zM1006.933333 204.8h-170.666666c-10.24 0-17.066667-6.826667-17.066667-17.066667v-170.666666c0-10.24 6.826667-17.066667 17.066667-17.066667h170.666666c10.24 0 17.066667 6.826667 17.066667 17.066667v170.666666c0 10.24-6.826667 17.066667-17.066667 17.066667zM853.333333 170.666667h136.533334V34.133333h-136.533334v136.533334z" fill="#333" p-id="1248"></path><path d="M187.733333 853.333333c-3.413333 0-10.24 0-13.653333-3.413333-6.826667-6.826667-6.826667-17.066667 0-23.893333l648.533333-648.533334c6.826667-6.826667 17.066667-6.826667 23.893334 0s6.826667 17.066667 0 23.893334l-648.533334 648.533333c0 3.413333-6.826667 3.413333-10.24 3.413333z" fill="#333" p-id="1249"></path></svg></div>
<!--    面-->
    <div  id="btnDrawPlygon"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5269"><path d="M892.1088 737.8468864V286.1531136c35.02134613-15.03941973 59.55037867-49.83575893 59.55037867-90.3643136 0-54.29220693-44.01179307-98.304-98.304-98.304-40.73171627 0-75.677696 24.77370027-90.59259734 60.07466667H260.14624427c-14.91490133-35.3009664-49.86088107-60.07466667-90.59259734-60.07466667-54.29220693 0-98.304 44.01179307-98.304 98.304 0 40.94907733 25.04021333 76.04578987 60.64264534 90.82525013v450.77189974c-35.60133973 14.77946027-60.64264533 49.8761728-60.64264534 90.82525013 0 54.29220693 44.01179307 98.304 98.304 98.304 40.73171627 0 75.677696-24.77370027 90.59259734-60.07466667H762.76258133c14.91490133 35.3009664 49.86088107 60.07466667 90.59259734 60.07466667 54.29220693 0 98.304-44.01179307 98.304-98.304 0-40.52964693-24.52903253-75.32598613-59.55037867-90.3643136zM853.35517867 157.55946667c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m-683.802624 0c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m0 708.88106666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z m593.2089344-76.45866666H260.14624427c-9.8697216-23.35812267-28.51362133-42.09923413-51.7963776-52.11204267V286.130176c23.28275627-10.01280853 41.926656-28.75282773 51.7963776-52.11204267H762.76258133c10.02263893 23.72184747 29.097984 42.67485867 52.88864427 52.5664256v450.8319744c-23.79175253 9.89047467-42.8670976 28.84348587-52.88973653 52.56533334z m90.5936896 76.45866666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z" fill="#333" p-id="5270"></path></svg></div>
<!--    測量線-->
    <div  id="btnMeasureDistince"><svg class="icon" style="margin-top: 10px;width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5269"><path d="M892.1088 737.8468864V286.1531136c35.02134613-15.03941973 59.55037867-49.83575893 59.55037867-90.3643136 0-54.29220693-44.01179307-98.304-98.304-98.304-40.73171627 0-75.677696 24.77370027-90.59259734 60.07466667H260.14624427c-14.91490133-35.3009664-49.86088107-60.07466667-90.59259734-60.07466667-54.29220693 0-98.304 44.01179307-98.304 98.304 0 40.94907733 25.04021333 76.04578987 60.64264534 90.82525013v450.77189974c-35.60133973 14.77946027-60.64264533 49.8761728-60.64264534 90.82525013 0 54.29220693 44.01179307 98.304 98.304 98.304 40.73171627 0 75.677696-24.77370027 90.59259734-60.07466667H762.76258133c14.91490133 35.3009664 49.86088107 60.07466667 90.59259734 60.07466667 54.29220693 0 98.304-44.01179307 98.304-98.304 0-40.52964693-24.52903253-75.32598613-59.55037867-90.3643136zM853.35517867 157.55946667c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m-683.802624 0c21.11351467 0 38.22933333 17.11581867 38.22933333 38.22933333s-17.11581867 38.22933333-38.22933333 38.22933333-38.22933333-17.11581867-38.22933334-38.22933333 17.11581867-38.22933333 38.22933334-38.22933333z m0 708.88106666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z m593.2089344-76.45866666H260.14624427c-9.8697216-23.35812267-28.51362133-42.09923413-51.7963776-52.11204267V286.130176c23.28275627-10.01280853 41.926656-28.75282773 51.7963776-52.11204267H762.76258133c10.02263893 23.72184747 29.097984 42.67485867 52.88864427 52.5664256v450.8319744c-23.79175253 9.89047467-42.8670976 28.84348587-52.88973653 52.56533334z m90.5936896 76.45866666c-21.11351467 0-38.22933333-17.11581867-38.22933334-38.22933333s17.11581867-38.22933333 38.22933334-38.22933333 38.22933333 17.11581867 38.22933333 38.22933333-17.11581867 38.22933333-38.22933333 38.22933333z" fill="#333" p-id="5270"></path></svg></div>

    <input type="text" style="display:none" id="hideInput">
</div>
<div id="txtSearch">
    <input id="sole-input" type="text" placeholder="請輸入關鍵字進行搜索">
    <a id="search-button">搜索</a>
</div>
<div class="wrapper-address hide">
    <div class="address-count">共搜索到<span id="totalRecord"></span>條結果<span id="resultClose" style="float:right;font-size:17px;cursor:default">×</span>
    </div>
    <div id="ssreslut"></div>
</div>

js

require.config({
    paths: {
        "LMap": "LMap",
    },
    waitSeconds: 0
});

define(function (require) {
    var LMap = require("LMap");
    var pointShape = '';
    var newLayer;
    var default_address = decodeURI($_GET['default_address']);
    if (default_address) {
        $('#sole-input').val(default_address);
        searchButton();
    }
    iniPage = {
        iniAddPage: function () {
        }
    };
    map = LMap.mapOpetation.showMap("map", LMap.property.mapLayerType.google, 126.4329, 41.899, 10);//加載地圖
    var layerGroup = L.layerGroup();
    map.addLayer(layerGroup);
    layerGroup.clearLayers();
    //畫點
    $("#btnDrawPoint").on("click", function () {//點
        var icon = LMap.marker.createMarkerIcon("../../img/marker-icon-red.png", 20, 30);
        LMap.toolBar.drawMark(map, icon);

    });
    //畫線
    // LineOptions畫線的屬性
    var LineOptions = {//配置繪面的樣式
        stroke: true,//設置是否顯示邊框
        color: '#3388ff',//設置邊框顏色
        weight: 4,//設置邊框寬度
        opacity: 0.5,//填充透明度
        fill: false,//是否填充
        clickable: true
    };
    $("#btnDrawLine").on('click',function () {
        console.log('畫線');
        LMap.toolBar.drawLine(map, LineOptions);
    });
    var shapeOptions = {//配置繪面的樣式
        stroke: true,//設置是否顯示邊框
        color: '#3388ff',//設置邊框顏色
        fillColor:'#3388ff',//設置顏色
        weight: 4,//設置邊框寬度
        opacity: 0.5,//邊框透明度
        fillOpacity: 0.5,//填充透明度
        fill: true,//是否填充
        clickable: true
    }
    $("#btnDrawPlygon").on('click',function () {
        console.log('畫面');
        LMap.toolBar.drawPolygon(map, shapeOptions);
    });

    $("#btnMeasureDistince").on('click',function () {
        console.log('測量線');
        LMap.toolBar.measureDistince(map);
    });


    function drawComplete(sWkt, layer, layerType)//繪製完成事件
    {

        if (newLayer) {
            map.removeLayer(newLayer)
        }
        //獲取區域面積
        console.log((LMap.geometryAnal0yse.area(mlayer.toGeoJSON()) * 0.0015).toFixed(2));
        newLayer = layer;
        pointShape = LMap.convert.toWkt(layer);console.log(pointShape);
        var hideInput = $("#hideInput").val(pointShape);
        layerGroup.clearLayers();


    }
//以前修改的時候，進入定位
    /*var hideInputVal = $("#hideInput").val();
    if (hideInputVal != '') {

        var shape = LMap.convert.toGeoJson(hideInputVal);
        var flip = LMap.geometryAnalyse.flip(shape);

        var markerLayer = LMap.marker.createMarker(flip.coordinates, '../../img/marker-icon-red.png', 20, 30);
        layerGroup.addLayer(markerLayer)
        var point = L.latLng(parseFloat(flip.coordinates[0]), parseFloat(flip.coordinates[1]));
        LMap.mapOpetation.zoomByPoint([point], map)
    }*/

    function getEditLayer(layer, layerType) {//獲得編輯Layer事件函數
        curEditLayer = layer;
    }

    LMap.toolBar.registerDrawComplete(map, drawComplete, getEditLayer, true);//第三個參數是否允許編輯

    /*搜索*/
    $(".close-popup").on("click", function () {
        $(".popupLayer").slideToggle();
    });
    $("#resultClose").on('click', function () {
        $('.wrapper-address').addClass('hide');
    });

    $('#search-button').on('click', searchButton);
    showPositionByLon = function (lon, name, adress, phone, IsDW) {
        clearMap();
        var sXY = [];
        var levl = 15
        if (lon.indexOf(",") > 0) {
            sXY = lon.split(",");
        } else {
            sXY = lon.split(" ");
            levl = 15
        }
        var markerLayer = LMap.marker.createMarker([sXY[1], sXY[0]], '../../img/marker-icon-red.png', 20, 30);
        layerGroup.addLayer(markerLayer);

        var point = L.latLng(parseFloat(sXY[1]), parseFloat(sXY[0]));
        LMap.mapOpetation.zoomByPoint([point], map);
        var hppoint = 'POINT (' + sXY[0] + ' ' + sXY[1] + ')';
        var hideInput = $("#hideInput").val(hppoint);
    };
    clearMap = function () {
        if (layerGroup) {
            layerGroup.clearLayers();
        }
    };

});

/*get獲取URL中的參數*/
var $_GET = (function () {
    var url = window.document.location.href.toString(); //獲取的完整url
    var u = url.split("?");
    if (typeof (u[1]) == "string") {
        u = u[1].split("&");
        var get = {};
        for (var i in u) {
            var j = u[i].split("=");
            get[j[0]] = j[1];
        }
        return get;
    } else {
        return {};
    }
})();
/*顯示搜索地址*/
searchButton = function(){
    var level = 10;
    var mapBound = "125.51073906469465, 42.03525161922328, 127.24795219946094, 42.98479182624028";
    if ($("#sole-input").val() != "") {
        $("#ssreslut").html("")
        $(".wrapper-address").removeClass("hide");
        var url = 'http://api.tianditu.gov.cn/search?postStr={"keyWord":"' + escape($("#sole-input").val()) + '","level":"' + level + '","mapBound":"' + mapBound + '","queryType":"7","count":"200","start":"0"}&type=query&tk=1a830497e9b5cd253b8f825bd0a00a81';
        $.ajax({
            url: url,
            type: "GET",
            dataType: "text", //指定服務器返回的數據類型
            success: function (data) {
                var jsonObj = JSON.parse(data);
                if (jsonObj.resultType == 3)//獲取面
                {
                    var lon = jsonObj.area.lonlat;
                    showPositionByLon(lon);
                } else if (jsonObj.resultType == 1) {
                    var html = '<table class="address-list">';
                    if (jsonObj.pois) {
                        $("#totalRecord").html(jsonObj.pois.length);
                        for (var i = 0; i < jsonObj.pois.length; i++) {
                            html += '<tr>' +
                                '<th width="18%"><span class="address-num">' + (i + 1) + '</span></th>' +
                                '<td width="82%">' +
                                '<ul>' +
                                '<li>' +
                                '<div class="address-name" onclick="showPositionByLon(\'' + jsonObj.pois[i].lonlat + '\',\'' + jsonObj.pois[i].name + '\',\'' + jsonObj.pois[i].address + '\',\'' + jsonObj.pois[i].phone + '\',true)">' +
                                jsonObj.pois[i].name +
                                '</div>' +
                                '</li><li>地址：' + jsonObj.pois[i].address + '</li>' +
                                '</ul>' +
                                '</td>' +
                                '</tr>';
                        }
                        //自動顯示第一個點
                        showPositionByLon(jsonObj.pois[0].lonlat, jsonObj.pois[0].name, jsonObj.pois[0].address, jsonObj.pois[0].phone, true)
                    } else {
                        $('.address-count').hide();
                        html += '<tr><td><ul><li style="text-align: center;border:0;margin-top:30px;">暫無搜索結果</li></ul></td></tr>';
                    }
                    html += '</table>';
                    $("#ssreslut").html(html);
                }
            }
        });
    }
};