如何从Leaflet.draw插件上的“绘制”按钮中删除“取消”选项？

编程问答 2022-08-11

问题描述

如下图所示，我想删除取消绘图的选项。这是我的代码： https://jsfiddle.net/wne2hjo0/ 

<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
        
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.14/leaflet.draw.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.14/leaflet.draw.css"/>
    
    <script src="https://npmcdn.com/[email protected]/src/Path.Drag.js"></script>
    <script src="https://leaflet.github.io/Leaflet.Editable/src/Leaflet.Editable.js"></script>

    <link rel="stylesheet" href="editable-bounds.css"/>
</head>

      <body ng-app="myApp" ng-controller="myCtrl">
        <div class="main-content" style="display:none">
          <div id="map" style=" float: left; width: 1000px; height: 500px; border: 1px solid #ccc"></div>
        </div>
        <table>
          <tr>
            <td><button ng-click="aoiResetMapBound()" >Reset AOI</button></td>
            <td><button id="showAoiBtn" ng-click="showAoiMap()" >{{strMapShowButonLabel}}</button></td>
          </tr>
        </table>
      </body>

cancel option on 'draw' button

解决方法

使用该代码，您可以删除所有形状上的“取消”按钮：

L.DrawToolbar.prototype.getActions = function (handler) {
        return [
            {
                enabled: handler.completeShape,title: L.drawLocal.draw.toolbar.finish.title,text: L.drawLocal.draw.toolbar.finish.text,callback: handler.completeShape,context: handler
            },{
                enabled: handler.deleteLastVertex,title: L.drawLocal.draw.toolbar.undo.title,text: L.drawLocal.draw.toolbar.undo.text,callback: handler.deleteLastVertex,context: handler
            }
      
        ];
    }

原始代码：Doc

此外，在添加if并测试是否通过了正确的处理程序时，您还可以允许处理程序使用“取消”按钮。

PS：对于较新的“传单抽奖”，您可以使用Leaflet-Geoman

javascriptleafletleaflet.drawweb-deployment