1.点
（1）以一个圆来表示点
new Style({
image: new CircleStyle({
radius: 5,//半径
fill: //填充的颜色
stroke: new Stroke({color: 'red', 1}),//外围线的颜色
new Fill({
color: 'rgba(0, 0, 255, 0.1)'
//color: feature.values_.fill,
}),
})
})
（2）以一个图标来表示点
new Style({
image: new Icon({
src: '../../assets/images/map/juminqu.svg',
scale: 0.08
})
})
2.线
（1）基本的线样式
new Style({
stroke: new Stroke({
color: 'rgba(255,0,0, 1)',//线的颜色
lineDash: [4],//线的颜色设置为虚线，虚线间隔为4
4//线的宽度
})
})
（2）末尾以箭头形式表示的线
style:
function (feature) {
var geometry = feature.getGeometry();
var styles = [
new Style({
stroke: new Stroke({
color: 'rgb(160,82,45)',
lineDash: [8],
5,
}),
})];
let length = geometry.flatCoordinates.length;
var dx = geometry.flatCoordinates[length - 2] - geometry.flatCoordinates[length - 4];
var dy = geometry.flatCoordinates[length - 1] - geometry.flatCoordinates[length - 3];
var rotation = Math.atan2(dy, dx);
styles.push(
new Style({
geometry: new Point([geometry.flatCoordinates[length - 2], geometry.flatCoordinates[length - 1]]),
image: new Icon({
src: '../../../../../assets/images/map/arrow.svg',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
scale: 0.12
}),
})
);
return styles;
}
3.面
return new Style({
stroke: new Stroke({//面的边界线的样式
color: 'yellow',
lineDash: [4],
3,
}),
fill: new Fill({//面的填充
color: 'rgba(0, 0, 255, 0.1)',
}),
})
4.文字注记
style: function (feature) {
return new Style({
text: new TextStyle({
text: `${feature.waterLength}`,//文字内容
fill: new Fill({//文字颜色
color: 'rgba(0, 0, 0)'
}),
offsetX: 0,//文字注记偏移位置
offsetY: 18//文字注记偏移位置
// backgroundStroke: new Stroke({//背景框样式
// color: 'rgba(255,0,0, 0.7)',
// 1
// })
})
})
}