Merge pull request #1367 from jacobtoye/MovePolylineEdit
Remove polyline edit
This commit is contained in:
Vladimir Agafonkin
commit
c2379a335d
@ -22,7 +22,6 @@ var deps = {
|
|||||||
desc: 'The core of the library, including OOP, events, DOM facilities, basic units, projections (EPSG:3857 and EPSG:4326) and the base Map class.'
|
desc: 'The core of the library, including OOP, events, DOM facilities, basic units, projections (EPSG:3857 and EPSG:4326) and the base Map class.'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
EPSG3395: {
|
EPSG3395: {
|
||||||
src: ['geo/projection/Projection.Mercator.js',
|
src: ['geo/projection/Projection.Mercator.js',
|
||||||
'geo/crs/CRS.EPSG3395.js'],
|
'geo/crs/CRS.EPSG3395.js'],
|
||||||
@ -85,7 +84,6 @@ var deps = {
|
|||||||
desc: 'Extends LayerGroup with mouse events and bindPopup method shared between layers.'
|
desc: 'Extends LayerGroup with mouse events and bindPopup method shared between layers.'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
Path: {
|
Path: {
|
||||||
src: ['layer/vector/Path.js',
|
src: ['layer/vector/Path.js',
|
||||||
'layer/vector/Path.SVG.js',
|
'layer/vector/Path.SVG.js',
|
||||||
@ -201,13 +199,6 @@ var deps = {
|
|||||||
desc: 'Makes markers draggable (by mouse or touch).'
|
desc: 'Makes markers draggable (by mouse or touch).'
|
||||||
},
|
},
|
||||||
|
|
||||||
PolyEdit: {
|
|
||||||
src: ['layer/vector/Polyline.Edit.js'],
|
|
||||||
deps: ['Polyline', 'DivIcon'],
|
|
||||||
desc: 'Polyline and polygon editing.'
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
ControlZoom: {
|
ControlZoom: {
|
||||||
src: ['control/Control.js',
|
src: ['control/Control.js',
|
||||||
'map/ext/Map.Control.js',
|
'map/ext/Map.Control.js',
|
||||||
@ -237,7 +228,6 @@ var deps = {
|
|||||||
desc: 'Layer Switcher control.'
|
desc: 'Layer Switcher control.'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
AnimationPan: {
|
AnimationPan: {
|
||||||
src: [
|
src: [
|
||||||
'dom/DomEvent.js',
|
'dom/DomEvent.js',
|
||||||
|
|||||||
@ -1,53 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Leaflet debug page</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../../dist/leaflet.css" />
|
|
||||||
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../css/screen.css" />
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../../build/deps.js"></script>
|
|
||||||
<script src="../leaflet-include.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="map" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
|
|
||||||
|
|
||||||
<script src="route.js"></script>
|
|
||||||
<script>
|
|
||||||
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
|
||||||
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}),
|
|
||||||
map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(51.505, -0.04), zoom: 13});
|
|
||||||
|
|
||||||
|
|
||||||
var polygon = new L.Polygon([
|
|
||||||
[51.51, -0.1],
|
|
||||||
[51.5, -0.06],
|
|
||||||
[51.52, -0.03]
|
|
||||||
]);
|
|
||||||
|
|
||||||
polygon.editing.enable();
|
|
||||||
|
|
||||||
map.addLayer(polygon);
|
|
||||||
|
|
||||||
var polyline = new L.Polyline([
|
|
||||||
[51.50, -0.04],
|
|
||||||
[51.49, -0.02],
|
|
||||||
[51.51, 0],
|
|
||||||
[51.52, -0.02]
|
|
||||||
]);
|
|
||||||
|
|
||||||
polyline.editing.enable();
|
|
||||||
|
|
||||||
map.addLayer(polyline);
|
|
||||||
|
|
||||||
polygon.on('edit', function() {
|
|
||||||
console.log('Polygon was edited!');
|
|
||||||
});
|
|
||||||
polyline.on('edit', function() {
|
|
||||||
console.log('Polyline was edited!');
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,249 +0,0 @@
|
|||||||
/*
|
|
||||||
* L.Handler.PolyEdit is an editing handler for polylines and polygons.
|
|
||||||
*/
|
|
||||||
|
|
||||||
L.Handler.PolyEdit = L.Handler.extend({
|
|
||||||
options: {
|
|
||||||
icon: new L.DivIcon({
|
|
||||||
iconSize: new L.Point(8, 8),
|
|
||||||
className: 'leaflet-div-icon leaflet-editing-icon'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
initialize: function (poly, options) {
|
|
||||||
this._poly = poly;
|
|
||||||
L.setOptions(this, options);
|
|
||||||
},
|
|
||||||
|
|
||||||
addHooks: function () {
|
|
||||||
if (this._poly._map) {
|
|
||||||
if (!this._markerGroup) {
|
|
||||||
this._initMarkers();
|
|
||||||
}
|
|
||||||
this._poly._map.addLayer(this._markerGroup);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
removeHooks: function () {
|
|
||||||
if (this._poly._map) {
|
|
||||||
this._poly._map.removeLayer(this._markerGroup);
|
|
||||||
delete this._markerGroup;
|
|
||||||
delete this._markers;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
updateMarkers: function () {
|
|
||||||
this._markerGroup.clearLayers();
|
|
||||||
this._initMarkers();
|
|
||||||
},
|
|
||||||
|
|
||||||
_initMarkers: function () {
|
|
||||||
if (!this._markerGroup) {
|
|
||||||
this._markerGroup = new L.LayerGroup();
|
|
||||||
}
|
|
||||||
this._markers = [];
|
|
||||||
|
|
||||||
var latlngs = this._poly._latlngs,
|
|
||||||
i, j, len, marker;
|
|
||||||
|
|
||||||
// TODO refactor holes implementation in Polygon to support it here
|
|
||||||
|
|
||||||
for (i = 0, len = latlngs.length; i < len; i++) {
|
|
||||||
|
|
||||||
marker = this._createMarker(latlngs[i], i);
|
|
||||||
marker.on('click', this._onMarkerClick, this);
|
|
||||||
this._markers.push(marker);
|
|
||||||
}
|
|
||||||
|
|
||||||
var markerLeft, markerRight;
|
|
||||||
|
|
||||||
for (i = 0, j = len - 1; i < len; j = i++) {
|
|
||||||
if (i === 0 && !(L.Polygon && (this._poly instanceof L.Polygon))) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
markerLeft = this._markers[j];
|
|
||||||
markerRight = this._markers[i];
|
|
||||||
|
|
||||||
this._createMiddleMarker(markerLeft, markerRight);
|
|
||||||
this._updatePrevNext(markerLeft, markerRight);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_createMarker: function (latlng, index) {
|
|
||||||
var marker = new L.Marker(latlng, {
|
|
||||||
draggable: true,
|
|
||||||
icon: this.options.icon
|
|
||||||
});
|
|
||||||
|
|
||||||
marker._origLatLng = latlng;
|
|
||||||
marker._index = index;
|
|
||||||
|
|
||||||
marker.on('drag', this._onMarkerDrag, this);
|
|
||||||
marker.on('dragend', this._fireEdit, this);
|
|
||||||
|
|
||||||
this._markerGroup.addLayer(marker);
|
|
||||||
|
|
||||||
return marker;
|
|
||||||
},
|
|
||||||
|
|
||||||
_fireEdit: function () {
|
|
||||||
this._poly.fire('edit');
|
|
||||||
},
|
|
||||||
|
|
||||||
_onMarkerDrag: function (e) {
|
|
||||||
var marker = e.target;
|
|
||||||
|
|
||||||
L.extend(marker._origLatLng, marker._latlng);
|
|
||||||
|
|
||||||
if (marker._middleLeft) {
|
|
||||||
marker._middleLeft.setLatLng(this._getMiddleLatLng(marker._prev, marker));
|
|
||||||
}
|
|
||||||
if (marker._middleRight) {
|
|
||||||
marker._middleRight.setLatLng(this._getMiddleLatLng(marker, marker._next));
|
|
||||||
}
|
|
||||||
|
|
||||||
this._poly.redraw();
|
|
||||||
},
|
|
||||||
|
|
||||||
_onMarkerClick: function (e) {
|
|
||||||
// we want to remove the marker on click, but if latlng count < 3, polyline would be invalid
|
|
||||||
if (this._poly._latlngs.length < 3) { return; }
|
|
||||||
|
|
||||||
var marker = e.target,
|
|
||||||
i = marker._index;
|
|
||||||
|
|
||||||
// remove the marker
|
|
||||||
this._markerGroup.removeLayer(marker);
|
|
||||||
this._markers.splice(i, 1);
|
|
||||||
this._poly.spliceLatLngs(i, 1);
|
|
||||||
this._updateIndexes(i, -1);
|
|
||||||
|
|
||||||
// update prev/next links of adjacent markers
|
|
||||||
this._updatePrevNext(marker._prev, marker._next);
|
|
||||||
|
|
||||||
// remove ghost markers near the removed marker
|
|
||||||
if (marker._middleLeft) {
|
|
||||||
this._markerGroup.removeLayer(marker._middleLeft);
|
|
||||||
}
|
|
||||||
if (marker._middleRight) {
|
|
||||||
this._markerGroup.removeLayer(marker._middleRight);
|
|
||||||
}
|
|
||||||
|
|
||||||
// create a ghost marker in place of the removed one
|
|
||||||
if (marker._prev && marker._next) {
|
|
||||||
this._createMiddleMarker(marker._prev, marker._next);
|
|
||||||
|
|
||||||
} else if (!marker._prev) {
|
|
||||||
marker._next._middleLeft = null;
|
|
||||||
|
|
||||||
} else if (!marker._next) {
|
|
||||||
marker._prev._middleRight = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._poly.fire('edit');
|
|
||||||
},
|
|
||||||
|
|
||||||
_updateIndexes: function (index, delta) {
|
|
||||||
this._markerGroup.eachLayer(function (marker) {
|
|
||||||
if (marker._index > index) {
|
|
||||||
marker._index += delta;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_createMiddleMarker: function (marker1, marker2) {
|
|
||||||
var latlng = this._getMiddleLatLng(marker1, marker2),
|
|
||||||
marker = this._createMarker(latlng),
|
|
||||||
onClick,
|
|
||||||
onDragStart,
|
|
||||||
onDragEnd;
|
|
||||||
|
|
||||||
marker.setOpacity(0.6);
|
|
||||||
|
|
||||||
marker1._middleRight = marker2._middleLeft = marker;
|
|
||||||
|
|
||||||
onDragStart = function () {
|
|
||||||
var i = marker2._index;
|
|
||||||
|
|
||||||
marker._index = i;
|
|
||||||
|
|
||||||
marker
|
|
||||||
.off('click', onClick)
|
|
||||||
.on('click', this._onMarkerClick, this);
|
|
||||||
|
|
||||||
latlng.lat = marker.getLatLng().lat;
|
|
||||||
latlng.lng = marker.getLatLng().lng;
|
|
||||||
this._poly.spliceLatLngs(i, 0, latlng);
|
|
||||||
this._markers.splice(i, 0, marker);
|
|
||||||
|
|
||||||
marker.setOpacity(1);
|
|
||||||
|
|
||||||
this._updateIndexes(i, 1);
|
|
||||||
marker2._index++;
|
|
||||||
this._updatePrevNext(marker1, marker);
|
|
||||||
this._updatePrevNext(marker, marker2);
|
|
||||||
};
|
|
||||||
|
|
||||||
onDragEnd = function () {
|
|
||||||
marker.off('dragstart', onDragStart, this);
|
|
||||||
marker.off('dragend', onDragEnd, this);
|
|
||||||
|
|
||||||
this._createMiddleMarker(marker1, marker);
|
|
||||||
this._createMiddleMarker(marker, marker2);
|
|
||||||
};
|
|
||||||
|
|
||||||
onClick = function () {
|
|
||||||
onDragStart.call(this);
|
|
||||||
onDragEnd.call(this);
|
|
||||||
this._poly.fire('edit');
|
|
||||||
};
|
|
||||||
|
|
||||||
marker
|
|
||||||
.on('click', onClick, this)
|
|
||||||
.on('dragstart', onDragStart, this)
|
|
||||||
.on('dragend', onDragEnd, this);
|
|
||||||
|
|
||||||
this._markerGroup.addLayer(marker);
|
|
||||||
},
|
|
||||||
|
|
||||||
_updatePrevNext: function (marker1, marker2) {
|
|
||||||
if (marker1) {
|
|
||||||
marker1._next = marker2;
|
|
||||||
}
|
|
||||||
if (marker2) {
|
|
||||||
marker2._prev = marker1;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_getMiddleLatLng: function (marker1, marker2) {
|
|
||||||
var map = this._poly._map,
|
|
||||||
p1 = map.latLngToLayerPoint(marker1.getLatLng()),
|
|
||||||
p2 = map.latLngToLayerPoint(marker2.getLatLng());
|
|
||||||
|
|
||||||
return map.layerPointToLatLng(p1._add(p2)._divideBy(2));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
L.Polyline.addInitHook(function () {
|
|
||||||
|
|
||||||
if (L.Handler.PolyEdit) {
|
|
||||||
this.editing = new L.Handler.PolyEdit(this);
|
|
||||||
|
|
||||||
if (this.options.editable) {
|
|
||||||
this.editing.enable();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.on('add', function () {
|
|
||||||
if (this.editing && this.editing.enabled()) {
|
|
||||||
this.editing.addHooks();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('remove', function () {
|
|
||||||
if (this.editing && this.editing.enabled()) {
|
|
||||||
this.editing.removeHooks();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user