L.Control.DrawRectangle = L.Control.extend({ //是否初始化 _initialized:false, //是否完成当前测绘 _finished:true, drawrectangle:null, drawrectangledata:{ _latlng:[], bounds:[] }, options:{ position:'topright', autoZIndex:true, offset:[10,40] }, initialize:function(options){ L.setOptions(this, options); return this; }, onAdd:function(map){ this._map = map; this._createControl(); switch(this.options.position){ case 'topleft': this._container.style.marginLeft = this.options.offset[0]+'px'; this._container.style.marginTop = this.options.offset[1]+'px'; break; case 'topright': this._container.style.marginRight = this.options.offset[0]+'px'; this._container.style.marginTop = this.options.offset[1]+'px'; break; case 'bottomleft': this._container.style.marginLeft = this.options.offset[0]+'px'; this._container.style.marginBottom = this.options.offset[1]+'px'; break; case 'bottomright': this._container.style.marginRight = this.options.offset[0]+'px'; this._container.style.marginBottom = this.options.offset[1]+'px'; break; } return this._container; }, _createControl:function(){ var _this = this; this._container = L.DomUtil.create('div','leaflet-bar leaflet-control-drawrectangle'); var link = L.DomUtil.create('a','leaflet-control-drawrectangle-link',this._container); link.title = '画矩形'; var drawSpan = L.DomUtil.create('span','',link); drawSpan.innerHTML = "矩"; L.DomEvent .on(this._container,'contextmenu',L.DomEvent.stopPropagation) .on(link,'click', L.DomEvent.stopPropagation) .on(link,'click',function(){ _this.start(); }) }, start:function(){ var _this = this; L.DomUtil.addClass(_this._container,'active'); if(L.Browser.ie || L.Browser.firefox){ _this._map.getContainer().style.cursor = 'url('+L.DefaultImagePath+'/cur-ruler.cur),auto'; }else{ _this._map.getContainer().style.cursor = 'url('+L.DefaultImagePath+'/cur-ruler.cur) 5 5,auto'; } map2DViewer.map.on('measure-drawrectangle-result', map2DViewer.drawrectangleFire); _this._map.dragging.disable(); _this._map.on("mousedown",_this.rectangleMousedown,this) .on("mouseup",_this.rectangleUp,this); }, rectangleUp:function(){ var _this = this; _this._map.dragging.enable(); _this._map.off("mousedown",_this.rectangleMousedown,this) .off("mousemove",_this.rectangleMove,this) .off("mouseup",_this.rectangleUp,this); var recdata = _this.drawrectangledata.bounds; map2DViewer.map.getContainer().style.cursor = 'auto'; _this._map.removeLayer(_this.rectangle); if(recdata.length<2){ return; } _this.drawrectangledata._latlng = []; _this.drawrectangledata._latlng.push([recdata[0][1],recdata[0][0]]); _this.drawrectangledata._latlng.push([recdata[0][1],recdata[1][0]]); _this.drawrectangledata._latlng.push([recdata[1][1],recdata[1][0]]); _this.drawrectangledata._latlng.push([recdata[1][1],recdata[0][0]]); _this._map.fire('measure-drawrectangle-result',_this.drawrectangledata); _this._map.off('measure-drawrectangle-result', map2DViewer.drawrectangleFire); }, rectangleMousedown:function(e){ var _this = this; _this.drawrectangledata.bounds[0] = [e.latlng.lat,e.latlng.lng]; _this.rectangle = L.rectangle( _this.drawrectangledata.bounds, { color: '#ff0000', weight: 3, fillColor: '#ff6600', opacity: 0.7, fillOpacity: 0.2, } ).addTo(_this._map); _this._map.on("mousemove",_this.rectangleMove,this); }, rectangleMove:function(e){ var _this = this; _this.drawrectangledata.bounds[1] = [e.latlng.lat,e.latlng.lng]; _this.rectangle.setBounds(_this.drawrectangledata.bounds); } }); L.control.drawrectangle = function(options){ return new L.Control.DrawRectangle(options); } //地图画矩形 map2DViewer.drawrectangleFire = function(data) {}; map2DViewer.setDrawRectangle = function(options) { var defaultData = { action: 'add', position: 'topleft', offset: [10, 10], properties: { color: '#ff0000', weight: 3, opacity: 1, }, } _.merge(defaultData, options); switch (defaultData.action) { case 'add': this.drawrectangle = new L.Control.DrawRectangle({ position: defaultData.position, offset: defaultData.offset, properties: defaultData.properties, }).addTo(this.map); return this.drawrectangle; break; case 'add_start': this.drawrectangle = new L.Control.DrawRectangle({ position: defaultData.position, offset: defaultData.offset, properties: defaultData.properties, }).addTo(this.map); this.drawrectangle.start(); return this.drawrectangle; break; case 'remove': this.map.removeControl(this.drawrectangle); break; } }