/** * Created by cp on 2016/8/25. */ var mapResoultion=[ 156543.03390625, 78271.516953125,39135.7584765625,19567.87923828125,9783.939619140625,4891.9698095703125 ,2445.9849047851562 ,1222.9924523925781,611.4962261962891,305.74811309814453,152.87405654907226,76.43702827453613,38.218514137268066,19.109257068634033, 9.554628534317017,4.777314267158508,2.388657133579254,1.194328566789627,0.5971642833948135,0.2985821416974068,0.1492910708487034,0.0746455354243517,0.0373227677121759]; import WKT from 'ol/format/WKT'; import Icon from 'ol/style/Icon'; import CircleStyle from 'ol/style/Circle'; import Style from 'ol/style/Style'; import Fill from 'ol/style/Fill'; import Stroke from 'ol/style/Stroke'; import Text from 'ol/style/Text'; import Circle from 'ol/geom/Circle'; import Feature from 'ol/Feature'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {OSM, Vector as VectorSource} from 'ol/source'; function BaseLayer(map,maxL,minL,layerName,vueThis){ var map =map; var obj={}; let layerId=layerName; var maxResolution=611.4962261962891; var minResolution=0.0373227677121759; if(mapResoultion[maxL]){ maxResolution=mapResoultion[maxL] } if(mapResoultion[minL]){ minResolution=mapResoultion[minL] } var pLayer; var pSource; //面的图层 pLayer=getLyaersByName(layerName) if(pLayer){ pSource=pLayer.getSource(); } if(!pLayer){ pSource = new VectorSource(); pLayer = new VectorLayer({ zIndex:10, id:layerName, source: pSource, minResolution:minResolution, maxResolution:maxResolution }); pLayer.set("name",layerName); map.addLayer(pLayer); } function clean(){ pSource.clear(); } obj.clean=clean; function getLayer(){ return pLayer; } obj.getLayer=getLayer; function addFeatureArr(dataArr){ $(dataArr).each(function(i,val) { addfeature(val); }); } obj.addFeatureArr=addFeatureArr; function getFeatureById(tempId){ var features=pSource.getFeatures(); var reArr=[]; for(var i=0;i<features.length;i++){ var f1=features[i]; var currId= f1.getId(); if(currId==tempId){ reArr.push(f1); } } return reArr; } obj.getFeatureById=getFeatureById; function removeFeatureById(tempid){ var reArr=[]; reArr=getFeatureById(tempid); $(reArr).each(function(k,val) { pSource.removeFeature(val); }) } obj.removeFeatureById=removeFeatureById; //WKT转换 let wktFormat = new WKT(); function addfeature(data){ if(data.coordinate){ data.wkt=data.coordinate; } if(!data.wkt){ return ; } let feature ; let styleObj={}; // {"strokeColor":"#F8FAFB","strokeWeight":9,"strokeAlpha":0.51,"fillAlpha":0.7,"fillColor":"#994B4B","fileRadio":18,"imageSrc":null,"lineDash":1,"type":"Polygon"} data.isPoint=false; feature = wktFormat.readFeature(data.wkt, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }); if(data.type==vueThis.POINT_TYPE){ data.isPoint=true; styleObj.icon=data.imageUrl; styleObj.width=data.width; styleObj.hight=data.hight; } else{ styleObj=JSON.parse( '{"strokeColor":"#F8FAFB","strokeWeight":2,"strokeAlpha":0.51,"fillAlpha":0.7,"fillColor":"#994B4B","fileRadio":18,"imageSrc":null,"lineDash":1,"type":"Polygon"}'); } feature.setId(data.id);//存数据库中的ID feature如果是从数据库中读取此ID必须有,不然会出现编辑错误 if(data.maxZoom){ feature.set("maxZoom",data.maxZoom); } data.layerId=layerId; feature.set("data",data,false);//data改变不触发事件 feature.setStyle( getStyle(styleObj,data.isPoint)); pSource.addFeature(feature); featureAddevent(feature); } //图层点击的回调方法 var clickCallBackFunc; function setCallbackFunc(fun){ clickCallBackFunc=fun; } obj.setCallbackFunc=setCallbackFunc; function featureAddevent(f1){ f1.on('singleclick', function(event){ //添加鼠标点击事件的方法 clickCallBackFunc(event,f1,layerName); }); f1.set('singleclick',true);//标识改点存在点击事件 f1.on('onMouseOver', function(event){ //添加鼠标点击事件的方法 }); f1.on('onMouseOut', function(event){ //添加鼠标点击事件的方法 }); f1.on('onMouseMoveOver', function(event){ //添加鼠标点击事件的方法 if(tootipFunc){ tootipFunc(event,f1,layerName); } }); } obj.addfeature=addfeature; var tootipFunc; function setShowTootip(func){ tootipFunc=func; } obj.setShowTootip=setShowTootip; //面的样式 //面的样式 function getStyle(styleData,isPoint){ if(styleData.fillColor){ styleData.fillColor = styleData.fillColor.colorRgba(styleData.fillAlpha); } if(styleData.strokeColor){ styleData.strokeColor = styleData.strokeColor.colorRgba(styleData.strokeAlpha); } var tempPointStyle; //如果是点; let drawStyle; if(isPoint){ if(styleData.icon&&styleData.icon!=""){ tempPointStyle= new Icon(({ anchor: [0.5, 0.5], // size:[styleData.width,styleData.height], src: styleData.icon, opacity:1 })); }else{ tempPointStyle=new CircleStyle({ radius:styleData.fileRadio, fill: new Fill({ color: styleData.fillColor }), stroke: new Stroke({ color:styleData.strokeColor, width: styleData.strokeWeight }) }) } drawStyle=new Style({ image:tempPointStyle }) }else{ let storkobj={}; storkobj.color=styleData.strokeColor; storkobj.width=styleData.strokeWeight; if(styleData.lineDash&&styleData.lineDash!=null){ storkobj.lineDash=getLineDash(styleData.lineDash); } storkobj.lineCap="round"; drawStyle=new Style({ stroke: new Stroke(storkobj), fill: new Fill({ color:styleData.fillColor }), }) } return drawStyle; } function getLineDash(dashType){ let endArr=[0]; // vueThis.lineDashArr.forEach(function(item,index){ // if(dashType==item.type){ // endArr=item.dashArr; // return false ; // } // }) return false; // return endArr; } function setFontStyle(styObj){ var align ="center"; var baseline = "top"; var size ="14px"; var offsetX = 0; var offsetY = 0; var weight ="bold"; var rotation = 0; var font = weight + ' ' + size + ' ' + "Verdana"; var fillColor = "#444444"; var outlineColor ="#ffffff"; var outlineWidth =1; var fillAlpha=1; var strokeAlpha=1; styObj.fillColorRgba = fillColor.colorRgba(styObj.fillAlpha); styObj.outlineColorRgba= outlineColor.colorRgba(styObj.strokeAlpha); styObj.font = styObj.weight + ' ' + styObj.size+"px" + ' ' + "Verdana"; } obj.setFontStyle=setFontStyle; //赋予文字信息 var createTextStyle = function(data) { let textLabel=data.name; if(!textLabel||textLabel==""){ return null; } var fezoom=data.maxZoom; if(fezoom){ var mapRe=map.getView().getResolution(); var feRe=mapResoultion[fezoom] if(mapRe<feRe){ } else{ textLabel=""; } } let textFont =data.weight + ' ' + data.size+"px" + ' ' + data.font; return new Text({ textAlign: data.align, textBaseline: data.baseline, font: textFont, text: textLabel, fill: new Fill({color: data.fillColor}), stroke: new Stroke({color: data.outlineColor, width: data.outlineWidth}), offsetX: data.offsetX, offsetY: data.offsetY, rotation: data.rotation }); }; var getText = function(feature, resolution) { var type ="normal"; var maxResolution = "1200"; var text = feature.get('name'); if (resolution > maxResolution) { text = ''; } else if (type == 'hide') { text = ''; } else if (type == 'shorten') { text = text.trunc(12); } else if (type == 'wrap') { text = stringDivider(text, 16, '\n'); } return text; }; //判断图层是否存在 function getLyaersByName(layerName){ var arrGroup=map.getLayerGroup().getLayers().getArray(); for(var j=0;j<arrGroup.length;j++){ var tempobj=arrGroup[j]; //lk 图层组 className //H 图层 var classType=tempobj.constructor.name; var isArr=false; if(tempobj.getLayers&&tempobj.getLayers()){ isArr=true; } if(!isArr){ //适量图层 if(tempobj.get("name")&&tempobj.get("name")==layerName){ //存在 return tempobj; } }else if(isArr){ //s数组 var arr1s=tempobj.getLayers().getArray(); for(var i=0;i<arr1s.length;i++){ var layer1=arr1s[i]; if(layer1.get("name")&&layer1.get("name")==layerName){ //存在 return layer1; } } } } return null; } return obj; } export {BaseLayer}