Control.Draw.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. /*
  2. * Leaflet.draw assumes that you have already included the Leaflet library.
  3. */
  4. L.drawVersion = '0.2.0-dev';
  5. L.drawLocal = {
  6. draw: {
  7. toolbar: {
  8. title: '取消标注',
  9. text: '取消',
  10. sure:'完成',
  11. polyline: '画线',
  12. polygon: '画多边形',
  13. latlngspolygon:'坐标转多边形',
  14. rectangle: '画矩形',
  15. circle: '画圆',
  16. customcircle: '自定义画圆',
  17. marker: '标点',
  18. label: '文本',
  19. painting: '随笔'
  20. },
  21. circle: {
  22. tooltip: {
  23. start: '左键点击拖动画圆'
  24. }
  25. },
  26. marker: {
  27. tooltip: {
  28. start: '左键点击地图标点'
  29. }
  30. },
  31. polygon: {
  32. tooltip: {
  33. start: '左键点击开始画多边形',
  34. cont: '左键点击继续',
  35. end: '点击第一个点完成绘画'
  36. }
  37. },
  38. latlngspolygon:{
  39. title: '坐标转多边形'
  40. },
  41. customcircle:{
  42. title: '自定义画圆'
  43. },
  44. polyline: {
  45. error: '<strong>提示:</strong> 超过边界线!',
  46. tooltip: {
  47. start: '左键点击开始画线',
  48. cont: '左键点击继续',
  49. end: '点击最后一个点结束画线'
  50. }
  51. },
  52. latlngspolyline:{
  53. title: '坐标转线'
  54. },
  55. rectangle: {
  56. tooltip: {
  57. start: '左键点击并拖动画矩形'
  58. }
  59. },
  60. simpleshape: {
  61. tooltip: {
  62. end: '释放鼠标完成绘图'
  63. }
  64. },
  65. label: {
  66. tooltip: {
  67. start: '左键点击并编辑内容'
  68. }
  69. },
  70. painting : {
  71. tooltip: {
  72. start: '按住鼠标在地图上绘画'
  73. }
  74. }
  75. },
  76. style: {
  77. toolbar: {
  78. title: '样式',
  79. colorPicker: '颜色选取',
  80. thickness: '线条粗细',
  81. lineColor: '线条颜色',
  82. fillColor: '填充色',
  83. opacity: '透明度',
  84. fontSize: '字体大小',
  85. fontColor: '字体颜色',
  86. stylePicker: {
  87. title: '编辑样式',
  88. save: {
  89. title: '保存更改',
  90. text: '保存'
  91. },
  92. cancel: {
  93. title: '取消编辑,恢复到编辑前状态',
  94. text: '取消'
  95. }
  96. }
  97. }
  98. },
  99. edit: {
  100. toolbar: {
  101. edit: {
  102. title: '编辑图层',
  103. save: {
  104. title: '保存更改',
  105. text: '确定'
  106. },
  107. cancel: {
  108. title: '取消编辑,恢复到编辑前状态',
  109. text: '取消'
  110. }
  111. },
  112. remove: {
  113. title: '删除图层',
  114. tooltip: '点击图层进行删除操作'
  115. },
  116. favorite: {
  117. title:'添加到(我的)收藏'
  118. },
  119. print:{
  120. title:'打印'
  121. }
  122. },
  123. tooltip: {
  124. text: '',
  125. subtext: '点击取消按钮可撤销操作'
  126. }
  127. }
  128. };
  129. /**
  130. * object深克隆
  131. * @type {{clone: clone}}
  132. */
  133. L.DrawClone = {
  134. clone:function(obj){
  135. if(typeof (obj) !== 'object'){
  136. return obj;
  137. }
  138. var re = {};
  139. if(obj.constructor === Array){
  140. re = [];
  141. }
  142. for(var i in obj){
  143. re[i] = L.DrawClone.clone(obj[i]);
  144. }
  145. return re;
  146. }
  147. };
  148. L.DrawStyle = {
  149. shapeOptions:{
  150. stroke:true,
  151. //字体大小
  152. fontSize:12,
  153. //字体颜色
  154. fontColor:'#000000',
  155. //线条粗细
  156. weight:2,
  157. //线条颜色
  158. color:'#FF6600',
  159. //填充色
  160. fillColor:'#ff8800',
  161. fillOpacity:0.4,
  162. //透明度
  163. opacity:0.8,
  164. clickable: true
  165. }
  166. };
  167. L.Control.Draw = L.Control.extend({
  168. options: {
  169. position: 'topright',
  170. draw: {},
  171. style:{},
  172. edit: false
  173. },
  174. initialize: function (options) {
  175. /*if (L.version <= "0.5.1") {
  176. throw new Error('Leaflet.draw 0.2.0+ requires Leaflet 0.6.0+. Download latest from https://github.com/Leaflet/Leaflet/');
  177. }*/
  178. L.Control.prototype.initialize.call(this, options);
  179. var id, toolbar;
  180. this._toolbars = {};
  181. // Initialize toolbars
  182. if (L.DrawToolbar && this.options.draw) {
  183. toolbar = new L.DrawToolbar(this.options.draw);
  184. id = L.stamp(toolbar);
  185. this._toolbars[id] = toolbar;
  186. // Listen for when toolbar is enabled
  187. this._toolbars[id].on('enable', this._toolbarEnabled, this);
  188. }
  189. if (L.EditToolbar && this.options.edit) {
  190. toolbar = new L.EditToolbar(this.options.edit);
  191. id = L.stamp(toolbar);
  192. this._toolbars[id] = toolbar;
  193. // Listen for when toolbar is enabled
  194. this._toolbars[id].on('enable', this._toolbarEnabled, this);
  195. //this._toolbars[id].on('disabled', this.setStyleDisabled, this);
  196. //this._toolbars[id].on('enable',this.setStyleEnabled,this);
  197. }
  198. //调用编辑样式
  199. if (L.StyleToolbar && this.options.style) {
  200. toolbar = new L.StyleToolbar(this.options.style);
  201. id = L.stamp(toolbar);
  202. this._toolbars[id] = toolbar;
  203. // Listen for when toolbar is enabled
  204. this._toolbars[id].on('enable', this._toolbarEnabled, this);
  205. this._toolbars[id].on('resetStyle',this.resetDrawingShapeOptions, this);
  206. }
  207. },
  208. onAdd: function (map) {
  209. var container = L.DomUtil.create('div', 'leaflet-draw'),
  210. addedTopClass = false,
  211. topClassName = 'leaflet-draw-toolbar-top',
  212. toolbarContainer;
  213. L.DomEvent.on(container, 'contextmenu', L.DomEvent.stopPropagation);
  214. for (var toolbarId in this._toolbars) {
  215. if (this._toolbars.hasOwnProperty(toolbarId)) {
  216. toolbarContainer = this._toolbars[toolbarId].addToolbar(map);
  217. // Add class to the first toolbar to remove the margin
  218. if (!addedTopClass) {
  219. if (!L.DomUtil.hasClass(toolbarContainer, topClassName)) {
  220. L.DomUtil.addClass(toolbarContainer.childNodes[0], topClassName);
  221. }
  222. addedTopClass = true;
  223. }
  224. container.appendChild(toolbarContainer);
  225. }
  226. }
  227. return container;
  228. },
  229. onRemove: function () {
  230. for (var toolbarId in this._toolbars) {
  231. if (this._toolbars.hasOwnProperty(toolbarId)) {
  232. this._toolbars[toolbarId].removeToolbar();
  233. }
  234. }
  235. },
  236. setDrawingOptions: function (options) {
  237. for (var toolbarId in this._toolbars) {
  238. if (this._toolbars[toolbarId] instanceof L.DrawToolbar) {
  239. this._toolbars[toolbarId].setOptions(options);
  240. }
  241. }
  242. },
  243. resetDrawingShapeOptions: function () {
  244. for (var toolbarId in this._toolbars) {
  245. if (this._toolbars[toolbarId] instanceof L.DrawToolbar) {
  246. this._toolbars[toolbarId].resetShapeOptions(L.DrawStyle);
  247. }
  248. }
  249. },
  250. _toolbarEnabled: function (e) {
  251. if(e.target._activeMode.handler.type === 'stylePicker'){
  252. return;
  253. }
  254. //只有涉及到 style的直接显示stylePicker
  255. switch (e.target._activeMode.handler.type){
  256. case 'circle':
  257. case 'customcircle':
  258. case 'label':
  259. case 'latlngspolygon':
  260. case 'latlngspolyline':
  261. case 'painting':
  262. case 'polygon':
  263. case 'polyline':
  264. case 'rectangle':
  265. this.setStyleDisabled(false);
  266. for(var item in this._toolbars){
  267. if(this._toolbars[item]._modes.hasOwnProperty('stylePicker')){
  268. var stylePickerMod = this._toolbars[item]._modes.stylePicker;
  269. stylePickerMod.handler.fireEnable();
  270. }
  271. }
  272. break;
  273. default :
  274. this.setStyleDisabled(true);
  275. break;
  276. }
  277. //如果是编辑状态 让 选色器隐藏
  278. /*if(e.target._activeMode.handler.type === 'edit'){
  279. this.setStyleDisabled(true);
  280. }else {
  281. this.setStyleDisabled(false);
  282. }*/
  283. var id = '' + L.stamp(e.target);
  284. for (var toolbarId in this._toolbars) {
  285. if (this._toolbars.hasOwnProperty(toolbarId) && toolbarId !== id) {
  286. this._toolbars[toolbarId].disable(e);
  287. }
  288. }
  289. },
  290. setStyleDisabled:function(_boolean){
  291. if(_boolean){
  292. document.getElementById('drawStyle').style.display = 'none';
  293. }else {
  294. document.getElementById('drawStyle').style.display = 'block';
  295. }
  296. }
  297. });
  298. L.Map.mergeOptions({
  299. drawControl: false
  300. });
  301. L.Map.addInitHook(function () {
  302. if (this.options.drawControl) {
  303. this.drawControl = new L.Control.Draw();
  304. this.addControl(this.drawControl);
  305. }
  306. });