leaflet.drawCircle.js 5.2 KB

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