OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。
OpenLayers的ol.style.Style类用于设置样式，它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式，另外ol.style.Text类用于设置要素注记。
来看一个示例：
样式效果：
graphicStyle.html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>设置几何图形样式</title><link rel="stylesheet" href="../v5.3.0/css/ol.css" /><script src="../v5.3.0/build/ol.js"></script></head><body><div id="map"></div><label>Shape type </label><select id="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="Square">Square</option><option value="Box">Box</option><option value="None">None</option></select><script>let vectorSource = new ol.source.Vector();let vectorLayer = new ol.layer.Vector({source: vectorSource,// 设置图层样式style: new ol.style.Style({// 将点设置成圆形样式image: new ol.style.Circle({// 点的颜色fill: new ol.style.Fill({color: '#F00'}),// 圆形半径radius: 5}),// 线样式stroke: new ol.style.Stroke({color: '#0F0',lineCap: 'round', // 设置线的两端为圆头width: 5}),// 填充样式fill: new ol.style.Fill({color: '#00F'})})});let map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({// 瓦片图层source: new ol.source.OSM()// OpenStreetMap数据源}),vectorLayer],view: new ol.View({// 地图视图projection: 'EPSG:3857',center: [0, 0],zoom: 0})});let typeSelect = document.getElementById('type');let draw;function addInteraction(){let type = typeSelect.value;if(type !== 'None'){let geometryFunction;switch(type){case "Square": type = 'Circle';// 生成规则的四边形的图形函数geometryFunction = ol.interaction.Draw.createRegularPolygon(4);break;case 'Box':type = 'Circle';// 生成盒形状的图形函数geometryFunction = ol.interaction.Draw.createBox();break;default:break;}// 初始化Draw绘图控件console.log(type);draw = new ol.interaction.Draw({source: vectorSource,type: type,geometryFunction: geometryFunction});// 将Draw绘图控件加入Map对象map.addInteraction(draw);}}typeSelect.addEventListener('change', () => {// 移除Draw绘图控件map.removeInteraction(draw);addInteraction();});addInteraction();</script></body></html>
