Question

我正在使用Leaflet.Editable插件，并试图找出当用户点击该行的第一个或最后一个点时是否可以取消折线拖动动作。我只希望他们能够沿着线拖动“中间点”，线的末端需要保持固定在原始位置。

我看过editable:vertex:dragstart事件，但这似乎不允许我取消该事件。我认为这是因为传递给此事件处理程序的参数不是cancelablevertexevent类型，因此没有我可以调用的cancel()方法。

有点击以及editable:vertex:click和editable:vertex:rawclick事件，但这些事件在dragstart事件之后触发（因为您需要释放鼠标按钮！）

我尝试在处理程序中为给定条件返回false：

section.on('editable:vertex:dragstart', (e) => {
    if(e.vertex.latlngs[0] === e.vertex.latlng) {
        return false;
    }
});

但这不起作用，那里的任何人都知道这是可能的还是我需要在这里做什么？

Answer 1

您可以禁用所需顶点上的可拖动功能，而不是取消该事件。要在定义为

的可编辑折线上实现此目的

var section = L.polyline(/* your coords */).addTo(map);
section.enableEdit();

抓住第一点和最后一点：

var coords = section.getLatLngs();
var disabled = [coords[0], coords[coords.length-1]];

并且，由于顶点继承自L.Marker，您可以调用vertex.dragging.disable();：

disabled.forEach(function(latlng) {
    var vertex = latlng.__vertex;
    vertex.dragging.disable();
});

最后，一个演示

var startPoint = [43.1, 1.2];
var map = L.map('map', {editable: true}).setView(startPoint, 9),
    tilelayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 11, attribution: 'Data \u00a9 <a href="http://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'}).addTo(map);


var section = L.polyline([[43.0, 1.15], [43.1, 1.2], [43.2, 1.5],[43.25, 1.2]]).addTo(map);
section.enableEdit();

var coords = section.getLatLngs();
var disabled = [coords[0], coords[coords.length-1]];
// icon from http://www.iconarchive.com/show/vista-map-markers-icons-by-icons-land/Map-Marker-Chequered-Flag-Right-Chartreuse-icon.html
var goalpost = L.icon({
    iconUrl: 'http://icons.iconarchive.com/icons/icons-land/vista-map-markers/24/Map-Marker-Chequered-Flag-Right-Chartreuse-icon.png',
    iconSize: [24, 24],
    iconAnchor: [0, 24],
});
disabled.forEach(function(latlng) {
    var vertex = latlng.__vertex;
    vertex.dragging.disable();
    vertex.setIcon(goalpost);
});

html, body {
    height: 100%;
    margin: 0;
}
#map {
    width: 100%;
    height: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-editable/1.1.0/Leaflet.Editable.min.js"></script>
<div id='map'></div>

或者，如果您认为使用内部属性太危险，可以扩展L.Editable.PolylineEditor以覆盖负责创建顶点的方法并将其传递给折线：

var AnchoredPolylineEditor = L.Editable.PolylineEditor.extend({
    addVertexMarker: function (latlng, latlngs, opts) {
        return new this.tools.options.vertexMarkerClass(latlng, latlngs, this, opts || {});
    },
    addVertexMarkers: function (latlngs) {
        for (var i = 0, l = latlngs.length; i < l; i++) {
            this.addVertexMarker(latlngs[i], latlngs, {
                draggable: (i>0) && (i<l-1)
            });
        }
    }
});

var section = L.polyline([[43.0, 1.15], [43.1, 1.2], [43.2, 1.5],[43.25, 1.2]], {
    editorClass: AnchoredPolylineEditor
}).addTo(map);
section.enableEdit();

和演示

var startPoint = [43.1, 1.2];
var map = L.map('map', {editable: true}).setView(startPoint, 9),
    tilelayer = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {maxZoom: 11, attribution: 'Data \u00a9 <a href="http://www.openstreetmap.org/copyright"> OpenStreetMap Contributors </a> Tiles \u00a9 HOT'}).addTo(map);
    
    
var AnchoredPolylineEditor = L.Editable.PolylineEditor.extend({
    addVertexMarker: function (latlng, latlngs, opts) {
        return new this.tools.options.vertexMarkerClass(latlng, latlngs, this, opts || {});
    },
    addVertexMarkers: function (latlngs) {
        for (var i = 0, l = latlngs.length; i < l; i++) {
            this.addVertexMarker(latlngs[i], latlngs, {
                draggable: (i>0) && (i<l-1)
            });
        }
    }
});

var section = L.polyline([[43.0, 1.15], [43.1, 1.2], [43.2, 1.5],[43.25, 1.2]], {
  editorClass: AnchoredPolylineEditor
}).addTo(map);
section.enableEdit();

html, body {
    height: 100%;
    margin: 0;
}
#map {
    width: 100%;
    height: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-editable/1.1.0/Leaflet.Editable.min.js"></script>
<div id='map'></div>

取消可编辑折线的顶点拖动

1 个答案: