概述
越用越觉得styleFunction是一个好东西，爱不释手啊，今天分享一个简单的memo。
效果
说明： 1、就一个点，实现上述的效果；
实现
代码语言：javascript复制 function styleFunction(feature){
var count = feature.get("count"),
geom = feature.get("geometry"),
res = map.getView().getResolution();
var center = geom.getCoordinates(),
r = 30,
cr = 15;
var styles = [];
styles.push(new ol.style.Style({
image: new ol.style.Circle({
radius: r,
fill: new ol.style.Fill({
color: "#3474cd"
})
}),
text: new ol.style.Text({
text:count,
font: "bold 22px 微软雅黑",
fill: new ol.style.Fill({
color: '#fff'
}),
textAlign:"center",
textBaseline:"middle"
})
}));
var circles = [[],[],[]];
var _interval = 6,
_cr = r*res;
for(var i=0;i<360/6;i ){
var ang = i*_interval;
var x = center[0] _cr * Math.cos(ang * Math.PI /180),
y = center[1] _cr * Math.sin(ang * Math.PI/180);
var coord = [x, y];
var index = parseInt(i/20);
circles[index].push(coord);
}
circles[0].push(circles[1][0]);
circles[1].push(circles[2][0]);
circles[2].push(circles[0][0]);
var colors = ["#ff0000", "#00a1ad", "#2bec47"];
for(var i=0;i<colors.length;i ){
styles.push(new ol.style.Style({
geometry: new ol.geom.LineString(circles[i]),
stroke: new ol.style.Stroke({
color: colors[i],
lineCap: "butt",
width: cr
})
}));
}
var circle1 = [[], []],
_r = (r cr-3)*res;
for(var i=0;i<15;i ){
var ang1 = 45 i*_interval,
ang2 = 225 i*_interval;
var x1 = center[0] _r * Math.cos(ang1 * Math.PI /180),
y1 = center[1] _r * Math.sin(ang1 * Math.PI/180);
var x2 = center[0] _r * Math.cos(ang2 * Math.PI /180),
y2 = center[1] _r * Math.sin(ang2 * Math.PI/180);
circle1[0].push([x1, y1]);
circle1[1].push([x2, y2]);
}
for(var i=0;i<circle1.length;i ){
styles.push(new ol.style.Style({
geometry: new ol.geom.LineString(circle1[i]),
stroke: new ol.style.Stroke({
color: "#3474cd",
width: 5
})
}));
}
return styles;
}
