/** * Created by cp on 2016/11/22. */ import Style from 'ol/style/Style'; import Icon from 'ol/style/Icon'; import Fill from 'ol/style/Fill'; import Stroke from 'ol/style/Stroke'; import Circle from 'ol/style/Circle'; import SnapGuides from 'ol-ext/interaction/SnapGuides'; import Collection from 'ol/Collection'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {OSM, Vector as VectorSource} from 'ol/source'; import Modify from 'ol/interaction/Modify'; import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw'; import CircleStyle from 'ol/style/Circle'; //有一些类对外放出的不是一个对象,二是一个个的方法如 // import condition from 'ol/events/condition'; 错误的引用 import {click, pointerMove, altKeyOnly,shiftKeyOnly,singleClick} from 'ol/events/condition';//正确的引用 // var source = new VectorSource({wrapX: false}); function startDraw(mainMap,vueThis){ let map=mainMap.getMap(); let ol=mainMap.ol; var tempObj={}; var drawFeatures = new Collection(); var featureOverlay = new VectorLayer({ source: new VectorSource({features: drawFeatures}) }); featureOverlay.setMap(map); var modifyFeatures = new Collection(); //编辑 var modify = new Modify({ features: modifyFeatures, deleteCondition: function(event) { return shiftKeyOnly(event) && singleClick(event); } }); map.addInteraction(modify); function setEditFeature(fes){ modifyFeatures.clear(); // for(var i=0;i0||modifyArr.length>0){ }else{ if(okFunc){ okFunc(); } } } tempObj.remoAllEditDraw=remoAllEditDraw; function cleanModifyOrDraw(){ clanLayer(); cleanModifyFunc(); removeDrawFunc();//清除上一次绘制的配置 } tempObj.cleanModifyOrDraw=cleanModifyOrDraw; function cleanAllFeature(succ){ showAlertW('确认清除?',null,function(){ cleanModifyOrDraw(); if(succ){ succ(); } }) } tempObj.cleanAllFeature=cleanAllFeature; function showAlertW(count,calFunc,okFunc){ //删除活动事件 vueThis.$confirm(count, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(() => { if(okFunc){ okFunc(); } }).catch(() => { if(calFunc){ calFunc(); } }); } function getModifyFeature(){ if(modifyFeatures){ return modifyFeatures.getArray() ; } return null; } tempObj.getModifyFeature=getModifyFeature; function cleanModifyFunc(){ for(var kk=0;kk0){ showAlertW('存在未保存的编辑,确认不保存?',null,function(){ cleanModifyFunc(); if(succ){ succ(); } }); } } tempObj.remoaveEditFeature=remoaveEditFeature; //绘制 var draw; function clanLayer(){ featureOverlay.getSource().clear(); } tempObj.clanLayer=clanLayer; //Point,点 LineString线 Polygon 面 Square 矩形 Circle 圆 Box 盒子 function addInteraction(type,func) { var drarr=drawFeatures.getArray(); var modifyArr=modifyFeatures.getArray(); if(drarr.length>0||modifyArr.length>0){ //绘制的时候 现在和地图中的事件添加 有冲突 导致清除之后 地图上的还有开始绘制的东西 ,后面想办法解决一下 showAlertW('存在未保存的编辑,确认不保存?',null,function(){ startDrawFunc(type); if(func){ func(); } }); }else{ startDrawFunc(type); } } tempObj.addInteraction=addInteraction; let geometryFunction; function startDrawFunc(type){ removeDrawFunc();//清除上一次绘制的配置 cleanModifyFunc();//清除修改的部分 featureOverlay.getSource().clear(); if(type==vueThis.SQUARE||type==vueThis.BOX){ if(type==vueThis.SQUARE){ geometryFunction = createRegularPolygon(4); }else{ geometryFunction = createBox(); } //都是以原型的来绘制 draw = new Draw({ features: drawFeatures, type:vueThis.DRAW_CIRCLE, geometryFunction: geometryFunction }); }else{ let tempType=""; if(type==vueThis.DRAW_TEXT){ tempType=vueThis.POINT_TYPE; }else{ tempType=type; } draw = new Draw({ features: drawFeatures, type:tempType }); } if(type==vueThis.POLYGON_TYPE||type==vueThis.LINE_STRING_TYPE){ var snapi = new SnapGuides();// {options} 参数可以进行设置 snapi.setDrawInteraction(draw); map.addInteraction(snapi); } draw.on("drawend",function(event){ var drawF= event.feature; modifyFeatures.push(drawF); addFeatureFunc(drawF,type); removeDrawFunc(); }); map.addInteraction(draw); } function setStyleInit(data,type){ //点 if(type==vueThis.POINT_TYPE){ vueThis.pointStyle=data; }else if(type==vueThis.LINE_STRING_TYPE){ //线 vueThis.lineStyle=data; }else{ vueThis.polygonStyle=data; } } function addFeatureFunc(fe,type){ var data={}; data.strokeColor="#0099ff"; data.strokeWeight=3; data.strokeAlpha=1 data.fillAlpha=0.7; data.fillColor="#ffffff"; data.fileRadio=7; data.imageSrc=null; data.lineDash=1; fe.set("featureType",type); setStyleInit(data,type); fe.on('singleclick', function(event){ if(callFunc){ callFunc(type,fe,event); } }); fe.set('singleclick',true);//标识该点存在点击事件 } var callFunc=null; function setCilckCallBack(callFuncItem){ callFunc=callFuncItem } tempObj.setCilckCallBack=setCilckCallBack; function getExistEditFeature(){ var drarr=drawFeatures.getArray(); var modifyArr=modifyFeatures.getArray(); if(drarr.length>0||modifyArr.length>0){ return true; } return false; } tempObj.getExistEditFeature=getExistEditFeature; //移除绘制 function removeDrawFunc(){ if(draw){ map.removeInteraction(draw); } } tempObj.removeDrawFunc=removeDrawFunc; return tempObj; } export {startDraw}