OpenLayers3设置text平行线路展示
ol.style.Text
rotateWithView 布尔值 <可选>假 是否旋转带有视图的文本。
rotation 数 <可选> 0 弧度旋转(顺时针正旋转)。
计算角度
var stylefunc = function (f) {
var name = f.getProperties().name;
var color='#0000ff',width=3;
var zoom = webgis._map.getView().getZoom();
var geometry = f.getGeometry();
var style;
geometry.forEachSegment(function(start, end) {
//计算角度
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
//样式
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: width
}),
text: new ol.style.Text({
text: name,
fill: new ol.style.Fill({
color: color
}),
stroke:new ol.style.Stroke({
color:"#fff",
width: 2
}),
textAlign: 'center',
textBaseline: 'middle',
offsetY: 10,
offsetX: 1,
rotateWithView: true,
rotation: -rotation
})
});
return
});
return style;
};