openlayers点线面绘制工具栏

 效果大概如上，点击了按钮之后在地图上绘制相对应的点/线/面。

代码部分：

首先放个容器

js部分（因为地图已经创建好了，我这里就不放地图的代码了，如果需要可以看我上个帖子）

						//绘制点线面工具
													// 创建绘制点的交互对象
							var drawPoint = new ol.interaction.Draw({
							type: 'Point',
							source: new ol.source.Vector({
								features: new ol.Collection()
							})
							});

							// 创建绘制线的交互对象
							var drawLine = new ol.interaction.Draw({
							type: 'LineString',
							source: new ol.source.Vector({
								features: new ol.Collection()
							})
							});

							// 创建绘制面的交互对象
							var drawPolygon = new ol.interaction.Draw({
							type: 'Polygon',
							source: new ol.source.Vector({
								features: new ol.Collection()
							})
							});

							// 创建一个控件容器
							var toolbar = document.createElement('div');
							toolbar.className = 'ol-toolbar';

							// 创建绘制点的按钮
							var drawPointButton = document.createElement('button');
							drawPointButton.className = 'iconpoint-button'; // 添加自定义类名
							drawPointButton.addEventListener('click', function() {
							map.removeInteraction(drawLine);
							map.removeInteraction(drawPolygon);
							map.addInteraction(drawPoint);
							});

							// 创建绘制线的按钮
							var drawLineButton = document.createElement('button');
								drawLineButton.className = 'iconline-button'; // 添加自定义类名
								drawLineButton.addEventListener('click', function() {
								map.removeInteraction(drawPoint);
								map.removeInteraction(drawPolygon);
								map.addInteraction(drawLine);
								});
							// 创建绘制面的按钮
							var drawPolygonButton = document.createElement('button');
							drawPolygonButton.className = 'iconpolyon-button'; // 添加自定义类名
							drawPolygonButton.addEventListener('click', function() {
							map.removeInteraction(drawPoint);
							map.removeInteraction(drawLine);
							map.addInteraction(drawPolygon);
							});

							// 将按钮添加到工具栏容器中
							toolbar.appendChild(drawPointButton);
							toolbar.appendChild(drawLineButton);
							toolbar.appendChild(drawPolygonButton);

							// 创建一个控件对象，将工具栏容器作为控件的元素
							var toolbarControl = new ol.control.Control({
							element: toolbar
							});

							// 将控件添加到地图上
							map.addControl(toolbarControl);
						// 获取工具栏容器元素
						var toolbarContainer = document.getElementById('toolbar');

						// 将工具栏容器添加到地图上
						toolbarContainer.appendChild(toolbar);
						// 创建一个矢量图层
							var vectorLayer = new ol.layer.Vector({
							source: new ol.source.Vector()
							});

							// 在绘制点结束后将要素添加到矢量图层中
							drawPoint.on('drawend', function(event) {
							var feature = event.feature;
							vectorLayer.getSource().addFeature(feature);
							});

							// 在绘制线结束后将要素添加到矢量图层中
							drawLine.on('drawend', function(event) {
							var feature = event.feature;
							vectorLayer.getSource().addFeature(feature);
							});

							// 在绘制面结束后将要素添加到矢量图层中
							drawPolygon.on('drawend', function(event) {
							var feature = event.feature;
							vectorLayer.getSource().addFeature(feature);
							});

							// 将矢量图层添加到地图上
							map.addLayer(vectorLayer);

另外我这里需求是需要在按钮内显示图标，也可以不用显示直接写文本

显示图标的方法大概就是给类名然后css设置样式即可，如：

.iconline-button {
		width: 30px;
		height: 30px;
		background-image: url(../assets/img/line.png); 
		background-size: cover;
		}