leaflet.drawrectangle.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. L.Control.DrawRectangle = L.Control.extend({
  2. //是否初始化
  3. _initialized:false,
  4. //是否完成当前测绘
  5. _finished:true,
  6. drawrectangle:null,
  7. drawrectangledata:{
  8. _latlng:[],
  9. bounds:[]
  10. },
  11. options:{
  12. position:'topright',
  13. autoZIndex:true,
  14. offset:[10,40]
  15. },
  16. initialize:function(options){
  17. L.setOptions(this, options);
  18. return this;
  19. },
  20. onAdd:function(map){
  21. this._map = map;
  22. this._createControl();
  23. switch(this.options.position){
  24. case 'topleft':
  25. this._container.style.marginLeft = this.options.offset[0]+'px';
  26. this._container.style.marginTop = this.options.offset[1]+'px';
  27. break;
  28. case 'topright':
  29. this._container.style.marginRight = this.options.offset[0]+'px';
  30. this._container.style.marginTop = this.options.offset[1]+'px';
  31. break;
  32. case 'bottomleft':
  33. this._container.style.marginLeft = this.options.offset[0]+'px';
  34. this._container.style.marginBottom = this.options.offset[1]+'px';
  35. break;
  36. case 'bottomright':
  37. this._container.style.marginRight = this.options.offset[0]+'px';
  38. this._container.style.marginBottom = this.options.offset[1]+'px';
  39. break;
  40. }
  41. return this._container;
  42. },
  43. _createControl:function(){
  44. var _this = this;
  45. this._container = L.DomUtil.create('div','leaflet-bar leaflet-control-drawrectangle');
  46. var link = L.DomUtil.create('a','leaflet-control-drawrectangle-link',this._container);
  47. link.title = '画矩形';
  48. var drawSpan = L.DomUtil.create('span','',link);
  49. drawSpan.innerHTML = "矩";
  50. L.DomEvent
  51. .on(this._container,'contextmenu',L.DomEvent.stopPropagation)
  52. .on(link,'click', L.DomEvent.stopPropagation)
  53. .on(link,'click',function(){
  54. _this.start();
  55. })
  56. },
  57. start:function(){
  58. var _this = this;
  59. L.DomUtil.addClass(_this._container,'active');
  60. if(L.Browser.ie || L.Browser.firefox){
  61. _this._map.getContainer().style.cursor = 'url('+L.DefaultImagePath+'/cur-ruler.cur),auto';
  62. }else{
  63. _this._map.getContainer().style.cursor = 'url('+L.DefaultImagePath+'/cur-ruler.cur) 5 5,auto';
  64. }
  65. map2DViewer.map.on('measure-drawrectangle-result', map2DViewer.drawrectangleFire);
  66. _this._map.dragging.disable();
  67. _this._map.on("mousedown",_this.rectangleMousedown,this)
  68. .on("mouseup",_this.rectangleUp,this);
  69. },
  70. rectangleUp:function(){
  71. var _this = this;
  72. _this._map.dragging.enable();
  73. _this._map.off("mousedown",_this.rectangleMousedown,this)
  74. .off("mousemove",_this.rectangleMove,this)
  75. .off("mouseup",_this.rectangleUp,this);
  76. var recdata = _this.drawrectangledata.bounds;
  77. map2DViewer.map.getContainer().style.cursor = 'auto';
  78. _this._map.removeLayer(_this.rectangle);
  79. if(recdata.length<2){
  80. return;
  81. }
  82. _this.drawrectangledata._latlng = [];
  83. _this.drawrectangledata._latlng.push([recdata[0][1],recdata[0][0]]);
  84. _this.drawrectangledata._latlng.push([recdata[0][1],recdata[1][0]]);
  85. _this.drawrectangledata._latlng.push([recdata[1][1],recdata[1][0]]);
  86. _this.drawrectangledata._latlng.push([recdata[1][1],recdata[0][0]]);
  87. _this._map.fire('measure-drawrectangle-result',_this.drawrectangledata);
  88. _this._map.off('measure-drawrectangle-result', map2DViewer.drawrectangleFire);
  89. },
  90. rectangleMousedown:function(e){
  91. var _this = this;
  92. _this.drawrectangledata.bounds[0] = [e.latlng.lat,e.latlng.lng];
  93. _this.rectangle = L.rectangle(
  94. _this.drawrectangledata.bounds,
  95. {
  96. color: '#ff0000',
  97. weight: 3,
  98. fillColor: '#ff6600',
  99. opacity: 0.7,
  100. fillOpacity: 0.2,
  101. }
  102. ).addTo(_this._map);
  103. _this._map.on("mousemove",_this.rectangleMove,this);
  104. },
  105. rectangleMove:function(e){
  106. var _this = this;
  107. _this.drawrectangledata.bounds[1] = [e.latlng.lat,e.latlng.lng];
  108. _this.rectangle.setBounds(_this.drawrectangledata.bounds);
  109. }
  110. });
  111. L.control.drawrectangle = function(options){
  112. return new L.Control.DrawRectangle(options);
  113. }
  114. //地图画矩形
  115. map2DViewer.drawrectangleFire = function(data) {};
  116. map2DViewer.setDrawRectangle = function(options) {
  117. var defaultData = {
  118. action: 'add',
  119. position: 'topleft',
  120. offset: [10, 10],
  121. properties: {
  122. color: '#ff0000',
  123. weight: 3,
  124. opacity: 1,
  125. },
  126. }
  127. _.merge(defaultData, options);
  128. switch (defaultData.action) {
  129. case 'add':
  130. this.drawrectangle = new L.Control.DrawRectangle({
  131. position: defaultData.position,
  132. offset: defaultData.offset,
  133. properties: defaultData.properties,
  134. }).addTo(this.map);
  135. return this.drawrectangle;
  136. break;
  137. case 'add_start':
  138. this.drawrectangle = new L.Control.DrawRectangle({
  139. position: defaultData.position,
  140. offset: defaultData.offset,
  141. properties: defaultData.properties,
  142. }).addTo(this.map);
  143. this.drawrectangle.start();
  144. return this.drawrectangle;
  145. break;
  146. case 'remove':
  147. this.map.removeControl(this.drawrectangle);
  148. break;
  149. }
  150. }