- +

diff --git a/src/assets/global_images/polygon.png b/src/assets/global_images/polygon.png new file mode 100644 index 0000000..eb2791d --- /dev/null +++ b/src/assets/global_images/polygon.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/assets/global_images/square.png b/src/assets/global_images/square.png new file mode 100644 index 0000000..999f95d --- /dev/null +++ b/src/assets/global_images/square.png Binary files differ diff --git a/src/views/overview/components/clearTool.vue b/src/views/overview/components/clearTool.vue new file mode 100644 index 0000000..3a049d0 --- /dev/null +++ b/src/views/overview/components/clearTool.vue @@ -0,0 +1,55 @@ + + + + + + diff --git a/src/views/overview/components/drawTool.vue b/src/views/overview/components/drawTool.vue new file mode 100644 index 0000000..da9b175 --- /dev/null +++ b/src/views/overview/components/drawTool.vue @@ -0,0 +1,58 @@ + + + + + + diff --git a/src/views/overview/overviewBdOffline.vue b/src/views/overview/overviewBdOffline.vue index 972e9fb..8c3d6f8 100644 --- a/src/views/overview/overviewBdOffline.vue +++ b/src/views/overview/overviewBdOffline.vue @@ -42,6 +42,11 @@ +

+ + + +

- +

+ + + +

- +

{ + this.drawingManager = new BMapLib.DrawingManager(map, { + isOpen: false, //是否开启绘制模式 + enableDrawingTool: false, //是否显示工具栏 + drawingToolOptions: { + anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 + offset: new BMap.Size(70, 10), //偏离值 + drawingTypes: [ + BMAP_DRAWING_CIRCLE, + BMAP_DRAWING_POLYGON, + BMAP_DRAWING_RECTANGLE + ], + }, + circleOptions: styleOptions, //圆的样式 + polygonOptions: styleOptions, //多边形的样式 + rectangleOptions: styleOptions //矩形的样式 + }) + // 多边形监听器 + this.drawingManager.addEventListener("polygoncomplete", function(polygon) { + console.log('end polygon') + that.drawingManager.close() + that.currentPolygon = polygon + if(that.showMarkers.length>0){ + that.judgeWell(polygon) + }else{ + that.judgeAlarmWell(polygon) + } + }) + // 矩形监听器 + this.drawingManager.addEventListener("rectanglecomplete", function(polygon) { + console.log('end rectangle') + that.drawingManager.close() + that.currentPolygon = polygon + if(that.showMarkers.length>0){ + that.judgeWell(polygon) + }else{ + that.judgeAlarmWell(polygon) + } + }); + }) + //实例化鼠标绘制工具 + }, + // 绘制选框 + drawBox(type) { + + if(this.currentPolygon){ + this.map.removeOverlay(this.currentPolygon) + } + if(type=='Polygon'){ + console.log('start polygon') + this.drawingManager.setDrawingMode(BMAP_DRAWING_POLYGON) + + }else if(type==='Rectangle'){ + console.log('start rectangle') + this.drawingManager.setDrawingMode(BMAP_DRAWING_RECTANGLE) + } + this.drawingManager.open() + this.clearDisabled = false + }, + judgeWell(polygon){ + let count = 0 + const points = polygon.getPath() + const poly = new BMap.Polygon(points) + for(const item of this.showMarkers){ + var ppoint = new BMap.Point(parseFloat(item.position.lng), parseFloat(item.position.lat)) + var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly); + if(result) count++ + } + this.$message.info('框选区域内有'+count+'个井') + }, + judgeAlarmWell(polygon){ + let count = 0 + const points = polygon.getPath() + const poly = new BMap.Polygon(points) + for(const item of this.alarmWells){ + var ppoint = new BMap.Point(parseFloat(item.position.lng), parseFloat(item.position.lat)) + var result = BMapLib.GeoUtils.isPointInPolygon(ppoint, poly); + if(result) count++ + } + this.$message.info('框选区域内有'+count+'个井') + }, + drawDelete(){ + // if(this.drawingManager.getDrawingMode()){ + this.drawingManager.close() + if(this.currentPolygon){ + this.map.removeOverlay(this.currentPolygon) + this.clearDisabled = true + } + // } } } } @@ -1153,4 +1266,11 @@ margin-bottom: 15px; } } +.draw-tools{ + position: absolute; + top:20px; + right:90px; + z-index: 100; + display: flex; +} diff --git a/static/BMap/js/DrawingManager_min.css b/static/BMap/js/DrawingManager_min.css new file mode 100644 index 0000000..a8a7f38 --- /dev/null +++ b/static/BMap/js/DrawingManager_min.css @@ -0,0 +1 @@ +.BMapLib_Drawing_panel{height:47px;border:1px solid #666;border-radius:5px;overflow:hidden;box-shadow:1px 1px 3px rgba(0,0,0,0.3);float:left}.BMapLib_Drawing .BMapLib_box{border-right:1px solid #d2d2d2;float:left;height:100%;width:64px;height:100%;background-image:url(http://api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);cursor:pointer}.BMapLib_Drawing .BMapLib_last{border-right:0}.BMapLib_Drawing .BMapLib_hander{background-position:0 0}.BMapLib_Drawing .BMapLib_hander_hover{background-position:0 -52px}.BMapLib_Drawing .BMapLib_marker{background-position:-65px 0}.BMapLib_Drawing .BMapLib_marker_hover{background-position:-65px -52px}.BMapLib_Drawing .BMapLib_circle{background-position:-130px 0}.BMapLib_Drawing .BMapLib_circle_hover{background-position:-130px -52px}.BMapLib_Drawing .BMapLib_polyline{background-position:-195px 0}.BMapLib_Drawing .BMapLib_polyline_hover{background-position:-195px -52px}.BMapLib_Drawing .BMapLib_polygon{background-position:-260px 0}.BMapLib_Drawing .BMapLib_polygon_hover{background-position:-260px -52px}.BMapLib_Drawing .BMapLib_rectangle{background-position:-325px 0}.BMapLib_Drawing .BMapLib_rectangle_hover{background-position:-325px -52px} diff --git a/static/BMap/js/DrawingManager_min.js b/static/BMap/js/DrawingManager_min.js new file mode 100644 index 0000000..49e0cee --- /dev/null +++ b/static/BMap/js/DrawingManager_min.js @@ -0,0 +1,4 @@ +var BMapLib=window.BMapLib=BMapLib||{};var BMAP_DRAWING_MARKER="marker",BMAP_DRAWING_POLYLINE="polyline",BMAP_DRAWING_CIRCLE="circle",BMAP_DRAWING_RECTANGLE="rectangle",BMAP_DRAWING_POLYGON="polygon";(function(){var b=b||{guid:"$BAIDU$"};(function(){window[b.guid]={};b.extend=function(i,g){for(var h in g){if(g.hasOwnProperty(h)){i[h]=g[h]}}return i};b.lang=b.lang||{};b.lang.guid=function(){return"TANGRAM__"+(window[b.guid]._counter++).toString(36)};window[b.guid]._counter=window[b.guid]._counter||1;window[b.guid]._instances=window[b.guid]._instances||{};b.lang.Class=function(g){this.guid=g||b.lang.guid();window[b.guid]._instances[this.guid]=this};window[b.guid]._instances=window[b.guid]._instances||{};b.lang.isString=function(g){return"[object String]"==Object.prototype.toString.call(g)};b.lang.isFunction=function(g){return"[object Function]"==Object.prototype.toString.call(g)};b.lang.Class.prototype.toString=function(){return"[object "+(this._className||"Object")+"]"};b.lang.Class.prototype.dispose=function(){delete window[b.guid]._instances[this.guid];for(var g in this){if(!b.lang.isFunction(this[g])){delete this[g]}}this.disposed=true};b.lang.Event=function(g,h){this.type=g;this.returnValue=true;this.target=h||null;this.currentTarget=null};b.lang.Class.prototype.addEventListener=function(j,i,h){if(!b.lang.isFunction(i)){return}!this.__listeners&&(this.__listeners={});var g=this.__listeners,k;if(typeof h=="string"&&h){if(/[^\w\-]/.test(h)){throw ("nonstandard key:"+h)}else{i.hashCode=h;k=h}}j.indexOf("on")!=0&&(j="on"+j);typeof g[j]!="object"&&(g[j]={});k=k||b.lang.guid();i.hashCode=k;g[j][k]=i};b.lang.Class.prototype.removeEventListener=function(i,h){if(b.lang.isFunction(h)){h=h.hashCode}else{if(!b.lang.isString(h)){return}}!this.__listeners&&(this.__listeners={});i.indexOf("on")!=0&&(i="on"+i);var g=this.__listeners;if(!g[i]){return}g[i][h]&&delete g[i][h]};b.lang.Class.prototype.dispatchEvent=function(k,g){if(b.lang.isString(k)){k=new b.lang.Event(k)}!this.__listeners&&(this.__listeners={});g=g||{};for(var j in g){k[j]=g[j]}var j,h=this.__listeners,l=k.type;k.target=k.target||this;k.currentTarget=this;l.indexOf("on")!=0&&(l="on"+l);b.lang.isFunction(this[l])&&this[l].apply(this,arguments);if(typeof h[l]=="object"){for(j in h[l]){h[l][j].apply(this,arguments)}}return k.returnValue};b.lang.inherits=function(m,k,j){var i,l,g=m.prototype,h=new Function();h.prototype=k.prototype;l=m.prototype=new h();for(i in g){l[i]=g[i]}m.prototype.constructor=m;m.superClass=k.prototype;if("string"==typeof j){l._className=j}};b.dom=b.dom||{};b._g=b.dom._g=function(g){if(b.lang.isString(g)){return document.getElementById(g)}return g};b.g=b.dom.g=function(g){if("string"==typeof g||g instanceof String){return document.getElementById(g)}else{if(g&&g.nodeName&&(g.nodeType==1||g.nodeType==9)){return g}}return null};b.insertHTML=b.dom.insertHTML=function(j,g,i){j=b.dom.g(j);var h,k;if(j.insertAdjacentHTML){j.insertAdjacentHTML(g,i)}else{h=j.ownerDocument.createRange();g=g.toUpperCase();if(g=="AFTERBEGIN"||g=="BEFOREEND"){h.selectNodeContents(j);h.collapse(g=="AFTERBEGIN")}else{k=g=="BEFOREBEGIN";h[k?"setStartBefore":"setEndAfter"](j);h.collapse(k)}h.insertNode(h.createContextualFragment(i))}return j};b.ac=b.dom.addClass=function(n,o){n=b.dom.g(n);var h=o.split(/\s+/),g=n.className,m=" "+g+" ",k=0,j=h.length;for(;k=h.width-20||i.y<=50||i.y>=h.height-10){if(i.x<=20){this._panByX=8}else{if(i.x>=h.width-20){this._panByX=-8}}if(i.y<=50){this._panByY=8}else{if(i.y>=h.height-10){this._panByY=-8}}if(!this._edgeMoveTimer){this._edgeMoveTimer=setInterval(function(){h.panBy(o._panByX,o._panByY,{"noAnimation":true})},30)}}else{if(this._edgeMoveTimer){clearInterval(this._edgeMoveTimer);this._edgeMoveTimer=null}}};e.prototype._adjustSize=function(g){this.container.style.width=g.width+"px";this.container.style.height=g.height+"px"};e.prototype.getDrawPoint=function(l){var k=this._map,j=b.getTarget(l),h=l.offsetX||l.layerX||0,m=l.offsetY||l.layerY||0;if(j.nodeType!=1){j=j.parentNode}while(j&&j!=k.getContainer()){if(!(j.clientWidth==0&&j.clientHeight==0&&j.offsetParent&&j.offsetParent.nodeName=="TD")){h+=j.offsetLeft||0;m+=j.offsetTop||0}j=j.offsetParent}var i=new BMap.Pixel(h,m);var g=k.pixelToPoint(i);return g};function a(h,g){this.drawingManager=h;g=this.drawingToolOptions=g||{};this.defaultAnchor=BMAP_ANCHOR_TOP_LEFT;this.defaultOffset=new BMap.Size(10,10);this.defaultDrawingModes=[BMAP_DRAWING_MARKER,BMAP_DRAWING_CIRCLE,BMAP_DRAWING_POLYLINE,BMAP_DRAWING_POLYGON,BMAP_DRAWING_RECTANGLE];if(g.drawingModes){this.drawingModes=g.drawingModes}else{this.drawingModes=this.defaultDrawingModes}if(g.anchor){this.setAnchor(g.anchor)}if(g.offset){this.setOffset(g.offset)}}a.prototype=new BMap.Control();a.prototype.initialize=function(i){var h=this.container=document.createElement("div");h.className="BMapLib_Drawing";var g=this.panel=document.createElement("div");g.className="BMapLib_Drawing_panel";if(this.drawingToolOptions&&this.drawingToolOptions.scale){this._setScale(this.drawingToolOptions.scale)}h.appendChild(g);g.innerHTML=this._generalHtml();this._bind(g);i.getContainer().appendChild(h);return h};a.prototype._generalHtml=function(m){var h={};h["hander"]="拖动地图";h[BMAP_DRAWING_MARKER]="画点";h[BMAP_DRAWING_CIRCLE]="画圆";h[BMAP_DRAWING_POLYLINE]="画折线";h[BMAP_DRAWING_POLYGON]="画多边形";h[BMAP_DRAWING_RECTANGLE]="画矩形";var n=function(o,i){return''};var k=[];k.push(n("BMapLib_box BMapLib_hander","hander"));for(var j=0,g=this.drawingModes.length; + j + + +

+ + + +

- +