Leaflet.draw是一个用于Leaflet地图库的插件,它提供了绘制图形的功能,包括点、线、多边形等。默认情况下,Leaflet.draw插件的绘图按钮中包含一个“取消”选项,用于取消当前的绘图操作。
要从Leaflet.draw插件的绘图按钮中删除“取消”选项,可以按照以下步骤进行操作:
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
<div>
元素,然后使用以下代码创建地图实例:var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
}).addTo(map);
edit.options.edit
属性为false
来禁用编辑功能,从而删除“取消”选项。以下是示例代码:var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
edit: false, // 禁用编辑功能
},
});
map.addControl(drawControl);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
edit: false,
},
draw: {
circle: false,
rectangle: false,
polygon: false,
marker: false,
polyline: false,
circlemarker: false,
},
// 添加自定义类名
edit: {
remove: {
className: 'custom-remove',
},
},
});
map.addControl(drawControl);
/* 隐藏“取消”按钮 */
.custom-remove a {
display: none;
}
通过以上步骤,你可以从Leaflet.draw插件的绘图按钮中删除“取消”选项,并且隐藏该按钮。请注意,以上代码仅为示例,实际应用中可能需要根据具体情况进行调整。
领取专属 10元无门槛券
手把手带您无忧上云