EditToolbar.Edit.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. L.EditToolbar.Edit = L.Handler.extend({
  2. statics: {
  3. TYPE: 'edit'
  4. },
  5. includes: L.Mixin.Events,
  6. initialize: function (map, options) {
  7. L.Handler.prototype.initialize.call(this, map);
  8. // Set options to the default unless already set
  9. this._selectedPathOptions = options.selectedPathOptions;
  10. // Store the selectable layer group for ease of access
  11. this._featureGroup = options.featureGroup;
  12. if (!(this._featureGroup instanceof L.FeatureGroup)) {
  13. throw new Error('options.featureGroup must be a L.FeatureGroup');
  14. }
  15. this._uneditedLayerProps = {};
  16. // Save the type so super can fire, need to do this as cannot do this.TYPE :(
  17. this.type = L.EditToolbar.Edit.TYPE;
  18. },
  19. enable: function () {
  20. if (this._enabled) {
  21. this.disable();
  22. return;
  23. }
  24. L.Handler.prototype.enable.call(this);
  25. this._featureGroup
  26. .on('layeradd', this._enableLayerEdit, this)
  27. .on('layerremove', this._disableLayerEdit, this);
  28. this.fire('enabled', {handler: this.type});
  29. },
  30. disable: function () {
  31. if (!this._enabled) { return; }
  32. this.fire('disabled', {handler: this.type});
  33. this._featureGroup
  34. .off('layeradd', this._enableLayerEdit, this)
  35. .off('layerremove', this._disableLayerEdit, this);
  36. L.Handler.prototype.disable.call(this);
  37. },
  38. addHooks: function () {
  39. if (this._map) {
  40. this._featureGroup.eachLayer(this._enableLayerEdit, this);
  41. this._map.fire('draw:edit', {layers: this._featureGroup});
  42. //this._tooltip = new L.DrawTooltip(this._map);
  43. //this._tooltip.updateContent({ text: L.drawLocal.edit.tooltip.text, subtext: L.drawLocal.edit.tooltip.subtext });
  44. //this._map.on('mousemove', this._onMouseMove, this);
  45. }
  46. },
  47. removeHooks: function () {
  48. if (this._map) {
  49. // Clean up selected layers.
  50. this._featureGroup.eachLayer(this._disableLayerEdit, this);
  51. // Clear the backups of the original layers
  52. this._uneditedLayerProps = {};
  53. //this._tooltip.dispose();
  54. //this._tooltip = null;
  55. //this._map.off('mousemove', this._onMouseMove, this);
  56. }
  57. },
  58. revertLayers: function () {
  59. this._featureGroup.eachLayer(function (layer) {
  60. this._revertLayer(layer);
  61. }, this);
  62. },
  63. save: function () {
  64. var editedLayers = new L.LayerGroup();
  65. this._featureGroup.eachLayer(function (layer) {
  66. if (layer.edited) {
  67. editedLayers.addLayer(layer);
  68. layer.edited = false;
  69. }
  70. });
  71. this._map.fire('draw:edited', {layers: editedLayers});
  72. },
  73. _backupLayer: function (layer) {
  74. var id = L.Util.stamp(layer);
  75. if (!this._uneditedLayerProps[id]) {
  76. // Polyline, Polygon or Rectangle
  77. if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Rectangle) {
  78. this._uneditedLayerProps[id] = {
  79. latlngs: L.LatLngUtil.cloneLatLngs(layer.getLatLngs())
  80. };
  81. } else if (layer instanceof L.Circle) {
  82. this._uneditedLayerProps[id] = {
  83. latlng: L.LatLngUtil.cloneLatLng(layer.getLatLng()),
  84. radius: layer.getRadius(),
  85. shapeCenterId:layer._shapeCenterId
  86. };
  87. } else { // Marker
  88. this._uneditedLayerProps[id] = {
  89. latlng: L.LatLngUtil.cloneLatLng(layer.getLatLng())
  90. };
  91. }
  92. }
  93. },
  94. _revertLayer: function (layer) {
  95. var id = L.Util.stamp(layer);
  96. layer.edited = false;
  97. if (this._uneditedLayerProps.hasOwnProperty(id)) {
  98. // Polyline, Polygon or Rectangle
  99. if (layer instanceof L.Polyline || layer instanceof L.Polygon || layer instanceof L.Rectangle) {
  100. layer.setLatLngs(this._uneditedLayerProps[id].latlngs);
  101. } else if (layer instanceof L.Circle) {
  102. layer.setLatLng(this._uneditedLayerProps[id].latlng);
  103. layer.setRadius(this._uneditedLayerProps[id].radius);
  104. } else { // Marker
  105. layer.setLatLng(this._uneditedLayerProps[id].latlng);
  106. }
  107. }
  108. },
  109. _toggleMarkerHighlight: function (marker) {
  110. // This is quite naughty, but I don't see another way of doing it. (short of setting a new icon)
  111. var icon = marker._icon;
  112. icon.style.display = 'none';
  113. if (L.DomUtil.hasClass(icon, 'leaflet-edit-marker-selected')) {
  114. L.DomUtil.removeClass(icon, 'leaflet-edit-marker-selected');
  115. // Offset as the border will make the icon move.
  116. this._offsetMarker(icon, -4);
  117. } else {
  118. L.DomUtil.addClass(icon, 'leaflet-edit-marker-selected');
  119. // Offset as the border will make the icon move.
  120. this._offsetMarker(icon, 4);
  121. }
  122. icon.style.display = '';
  123. },
  124. _offsetMarker: function (icon, offset) {
  125. var iconMarginTop = parseInt(icon.style.marginTop, 10) - offset,
  126. iconMarginLeft = parseInt(icon.style.marginLeft, 10) - offset;
  127. icon.style.marginTop = iconMarginTop + 'px';
  128. icon.style.marginLeft = iconMarginLeft + 'px';
  129. },
  130. _enableLayerEdit: function (e) {
  131. var layer = e.layer || e.target || e,
  132. pathOptions;
  133. // Back up this layer (if haven't before)
  134. this._backupLayer(layer);
  135. // Update layer style so appears editable
  136. if (this._selectedPathOptions) {
  137. pathOptions = L.Util.extend({}, this._selectedPathOptions);
  138. if (layer instanceof L.Marker) {
  139. this._toggleMarkerHighlight(layer);
  140. }else {
  141. layer.options.previousOptions = layer.options;
  142. // Make sure that Polylines are not filled
  143. if (!(layer instanceof L.Circle) && !(layer instanceof L.Polygon) && !(layer instanceof L.Rectangle)) {
  144. pathOptions.fill = false;
  145. }
  146. //todo 取消统一设置色彩参数
  147. //layer.setStyle(pathOptions);
  148. }
  149. }
  150. //layer instanceof L.Marker || layer instanceof L.Olabel
  151. if (layer instanceof L.Marker) {
  152. layer.dragging.enable();
  153. layer.on('dragend', this._onMarkerDragEnd);
  154. } else {
  155. layer.editing.enable();
  156. }
  157. },
  158. _disableLayerEdit: function (e) {
  159. var layer = e.layer || e.target || e;
  160. layer.edited = false;
  161. // Reset layer styles to that of before select
  162. if (this._selectedPathOptions) {
  163. if (layer instanceof L.Marker) {
  164. this._toggleMarkerHighlight(layer);
  165. }else {
  166. // reset the layer style to what is was before being selected
  167. layer.setStyle(layer.options.previousOptions);
  168. // remove the cached options for the layer object
  169. delete layer.options.previousOptions;
  170. }
  171. }//|| layer instanceof L.Olabel
  172. if (layer instanceof L.Marker) {
  173. layer.dragging.disable();
  174. layer.off('dragend', this._onMarkerDragEnd, this);
  175. } else {
  176. layer.editing.disable();
  177. }
  178. },
  179. _onMarkerDragEnd: function (e) {
  180. var layer = e.target;
  181. layer.edited = true;
  182. },
  183. // _onMouseMove: function (e) {
  184. // this._tooltip.updatePosition(e.latlng);
  185. // }
  186. });