Style样式集
Style样式集
function GeoStyle(config){
var _this = this;var lineType; var geomType;
var pointTyp ={fillClr:'',radius:0,strkClr:'',strkWdh:0,} var lineStringTyp ={strkClr:'',strkWdh:''} var dashLineTyp ={strkClr:'',strkWdh:''} var doubleLineTyp ={strkClr:'',strkWdh:'',fillClr:'',fillWdh:''} var polygonTyp ={strkClr:'',strkClr:'',strkWdh:''} var multiPointTyp ={fillClr:'',radius:'',strkClr:'',strkWdh:''} var multiLineStringTyp ={fillClr:'',strkClr:'',strkWdh:''} var multiPolygonTyp ={fillClr:'',strkClr:'',strkWdh:''} var textTyp = {fillClr:'',strkClr:'',strkWdh:'',font:'',offsetY:'',offsetX:''}
Object.defineProperty(this,'myMap',{
get:function(){
return myMap
},
set:function(value){
myMap = value;
}
});
Object.defineProperty(this,'lineType',{
get:function(){
return lineType
},
set:function(value){
lineType = value;
}
});
Object.defineProperty(this,'geomType',{
get:function(){
return geomType
},
set:function(value){
geomType = value;
}
});
Object.defineProperty(this,'pointTyp',{//点样式
get:function(){
return pointTyp
},
set:function(value){
pointTyp = value;
_this.initPt();
}
});
Object.defineProperty(this,'lineStringTyp',{//线样式
get:function(){
return lineStringTyp
},
set:function(value){
lineStringTyp = value;
_this.initLS();
}
});
Object.defineProperty(this,'dashLineTyp',{
get:function(){
return dashLineTyp
},
set:function(value){
dashLineTyp = value;
_this.initDSL();
}
});
Object.defineProperty(this,'doubleLineTyp',{
get:function(){
return doubleLineTyp
},
set:function(value){
doubleLineTyp = value;
_this.initDBL();
}
});
Object.defineProperty(this,'polygonTyp',{
get:function(){
return polygonTyp
},
set:function(value){
polygonTyp = value;
_this.initPg();
}
});
Object.defineProperty(this,'multiPointTyp',{
get:function(){
return multiPointTyp
},
set:function(value){
multiPointTyp = value;
_this.initMPt();
}
});
Object.defineProperty(this,'multiLineStringTyp',{
get:function(){
return multiLineStringTyp
},
set:function(value){
multiLineStringTyp = value;
_this.initMLS();
}
});
Object.defineProperty(this,'multiPolygonTyp',{
get:function(){
return multiPolygonTyp
},
set:function(value){
multiPolygonTyp = value;
_this.initMPg();
}
});
Object.defineProperty(this,'textTyp',{
get:function(){
return textTyp
},
set:function(value){
textTyp = value;
_this.textPt();
}
});
GeoStyle.prototype.init= function (){
_this.initPt(); _this.initLS(); _this.initDSL(); _this.initDBL(); _this.initPg(); _this.initMPt(); _this.initMLS(); _this.initMPg(); _this.textPt(); }
GeoStyle.prototype.initPt= function (){ //点样式
_this.Point= new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color:_this.pointTyp.fillClr ?_this.pointTyp.fillClr : 'rgba(255,255,0,0.5)'
}),
radius:_this.pointTyp.radius ?_this.pointTyp.radius : 5,
stroke: new ol.style.Stroke({
color: _this.pointTyp.strkClr ?_this.pointTyp.strkClr :'#ff0',
width: _this.pointTyp.strkWdh ?_this.pointTyp.strkWdh :1
})
})
});
}
GeoStyle.prototype.initLS= function (){ //线样式
_this.LineString = new ol.style.Style({
stroke: new ol.style.Stroke({
color:_this.lineStringTyp.strkClr ?_this.lineStringTyp.strkClr : '#f00',
width:_this.lineStringTyp.strkWdh ?_this.lineStringTyp.strkWdh : 3
})
});
}
GeoStyle.prototype.initDSL= function (){ /虚线样式/
_this.DashLine = new ol.style.Style({
stroke: new ol.style.Stroke({
lineDash:[1,2,3,4,5],
color:_this.dashLineTyp.strkClr ?_this.dashLineTyp.strkClr : '#f00',
width: _this.dashLineTyp.strkWdh ?_this.dashLineTyp.strkWdh : 3
})
});
}
GeoStyle.prototype.initDBL= function (){ //双线样式
;
_this.DoubleLine = [
// new ol.style.Style({
// stroke: new ol.style.Stroke({
// color:'rgba(2,2,2,1)',
// width:30
// })
// }),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: _this.doubleLineTyp.strkClr ?_this.doubleLineTyp.strkClr :'rgba(255,255,255,1)',
width:_this.doubleLineTyp.strkWdh ?_this.doubleLineTyp.strkWdh : 5
})
}),
new ol.style.Style({
stroke: new ol.style.Stroke({
color: _this.doubleLineTyp.fillClr ?_this.doubleLineTyp.fillClr :'rgba(252,0,0, 1)',
width:_this.doubleLineTyp.fillWdh ?_this.doubleLineTyp.fillWdh : 3
})
})
];
}
GeoStyle.prototype.initPg= function (){ //多边形样式
_this.Polygon = new ol.style.Style({
fill: new ol.style.Fill({
color:_this.polygonTyp.fillClr ?_this.polygonTyp.fillClr : 'rgba(0,255,255,0.5)'
}),
stroke: new ol.style.Stroke({
color:_this.polygonTyp.strkClr ?_this.polygonTyp.strkClr : '#0ff',
width:_this.polygonTyp.strkWdh ?_this.polygonTyp.strkWdh : 1
})
});
}
GeoStyle.prototype.initMPt= function (){
_this.MultiPoint = new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: _this.multiPointTyp.fillClr ?_this.multiPointTyp.fillClr :'rgba(255,0,255,0.5)'
}),
radius:_this.multiPointTyp.radius ?_this.multiPointTyp.radius : 5,
stroke: new ol.style.Stroke({
color:_this.multiPointTyp.strkClr ?_this.multiPointTyp.strkClr : '#f0f',
width:_this.multiPointTyp.strkWdh ?_this.multiPointTyp.strkWdh : 1
})
})
});
}
GeoStyle.prototype.initMLS= function (){
_this.MultiLineString = new ol.style.Style({
fill: new ol.style.Fill({
color:_this.multiLineStringTyp.fillClr ?_this.multiLineStringTyp.fillClr : 'rgba(255,0,255,0.5)'
}),
stroke: new ol.style.Stroke({
color:_this.multiLineStringTyp.strkClr ?_this.multiLineStringTyp.strkClr : 'rgba(255,0,0,1)',
width:_this.multiLineStringTyp.strkWdh ?_this.multiLineStringTyp.strkWdh : 3
})
});
}
GeoStyle.prototype.initMPg= function (){
_this.MultiPolygon = new ol.style.Style({
fill: new ol.style.Fill({
color:_this.multiPolygonTyp.fillClr ?_this.multiPolygonTyp.fillClr : 'rgba(0,0,255,0.5)'
}),
stroke: new ol.style.Stroke({
color:_this.multiPolygonTyp.strkClr ?_this.multiPolygonTyp.strkClr : '#00f',
width:_this.multiPolygonTyp.strkWdh ?_this.multiPolygonTyp.strkWdh : 1
})
});
}
GeoStyle.prototype.textPt= function (){
_this.text= new ol.style.Style({
text: new ol.style.Text({
offsetY:_this.textTyp.offsetY ?_this.textTyp.offsetY :-8,
offsetX:_this.textTyp.offsetX ?_this.textTyp.offsetX :16,
font: _this.textTyp.font ?_this.textTyp.font :'12px Calibri,sans-serif',
fill: new ol.style.Fill({
color:_this.textTyp.fillClr ?_this.textTyp.fillClr : '#000'
}),
stroke: new ol.style.Stroke({
color:_this.textTyp.strkClr ?_this.textTyp.strkClr : '#fff',
width: _this.textTyp.strkWdh ?_this.textTyp.strkWdh :1
})
})
});
}
//..外部调用函数..start...............................................................................................
GeoStyle.prototype.getAppointStyle = function(styleName) { var geomStyle = styleName?styleName:geomType return _this[geomStyle]; }
// GeoStyle.prototype.getGeomStyle = function() { // return _this[geomType]; // }
//样式过滤器 GeoStyle.prototype.defaultStyleFunction = function(feature, resolution) { var featureStyleFunction = feature.getStyleFunction(); if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { return _this[feature.getGeometry().getType()]; } }
//样式过滤器
GeoStyle.prototype.defaultTextFunct = function(feature, resolution) {
var style = new ol.style.Style({
text: new ol.style.Text({ //文本样式
offsetY:-8,
offsetX:16,
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#fff',
width: 1
})
})
});
resolution = resolution256256 ;
style.getText().setText(resolution < 150 ? feature.get('name') : ''); //当放大到1:5000分辨率时，显示国家名字
style.getText().setFont(resolution < 50 ? '10px Calibri,sans-serif':resolution < 100 ? '14px Calibri,sans-serif':resolution < 150 ? '16px Calibri,sans-serif':'');
var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return [featureStyleFunction.call(feature, resolution),style];
} else {
feature.setStyle([_this[feature.getGeometry().getType()],style])
return [_this[feature.getGeometry().getType()],style];
}
}
//..外部调用函数..end...............................................................................................
//样式过滤器 GeoStyle.prototype.lineStyleFunction = function(feature, resolution) { var GeoStyle = feature.getGeometry().getType(); var featureStyleFunction = feature.getStyleFunction(); if("LineString"==GeoStyle){}else{}
if (featureStyleFunction) { return featureStyleFunction.call(feature, resolution); } else { if("LineString"==GeoStyle){ ; var lineType = _this.lineType ? _this.lineType : 'LineString'; return _this[lineType]; }else{ return _this[feature.getGeometry().getType()]; } } }
/* 功能 更改土城样式函数 / GeoStyle.prototype.changeLayerStyle =function(layerNam,stylFunct){ var layerNam = layerNam ? layerNam :"edit"; var stylFunct = stylFunct ? stylFunct :_this.defaultStyleFunction; ; var layColt = _this.myMap.getLayers(); layColt.forEach(function(data,index,array){ var layer = this.getLength(); var name = data.get('name'); if(name == layerNam){ // alert("kk") data.setStyle(stylFunct); } }, layColt) }
GeoStyle.prototype.changeLayerStyl2 = function(layerNam,styleName) {
var layerNam = layerNam ? layerNam :""; var stylFunct = _this[styleName]; ; var layColt = _this.myMap.getLayers(); layColt.forEach(function(data,index,array){ var layer = this.getLength(); var name = data.get('name'); if(name == layerNam){ // alert("kk") data.setStyle(stylFunct); } }, layColt) } GeoStyle.prototype.changeLayerStyl3 = function(layerNam,styleName) {
var layerNam = layerNam ? layerNam :""; var stylFunct = _this[styleName] ? _this[styleName] :_this[lineType]; ; var layColt = _this.myMap.getLayers(); layColt.forEach(function(data,index,array){ var layer = this.getLength(); var name = data.get('name'); if(name == layerNam){ // alert("kk") data.setStyle(stylFunct); } }, layColt) }
_this.init(); }