Button Openlayers绘制按钮

按按钮时显示图形特征。它允许您选择不同的形状，如点、线、多边形等。我想将类似的功能合并到我的项目中。但是我不想选择形状，而是想按下按钮来打开绘制点、线、多边形等的功能

我假设按钮元素应该插入HTML部分

<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="None">None</option>
</select>

谁能帮帮我吗

将“选择”按钮更改为“选择”

代码片段：

var raster=new ol.layer.Tile（{//tillelayer({
source:new ol.source.OSM（），
});
var source=new ol.source.Vector（{//VectorSource({
wrapX：错误
});
var vector=新的ol.layer.vector（{//VectorLayer({
资料来源：资料来源，
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4，
}),
});
var typeSelect=document.getElementById（'type'）；
var draw；//全局，以便稍后删除它
函数addInteraction（元素）{
var值=元素值；
如果（值！=“无”）{
draw=新ol.interaction.draw({
资料来源：资料来源，
类型：值，
});
地图。添加交互作用（绘制）；
}
}
/**
*处理按钮点击。
*/
函数handletnclick（）{
var元素=这个；
映射。移除交互（绘制）；
附加相互作用（元素）；
//返回false；
};
document.getElementById（“点”）.addEventListener（“点击”，把手点击）；
document.getElementById（“多边形”）.addEventListener（“单击”，把手单击）；
document.getElementById（“LineString”）.addEventListener（'click'，HandlebtClick）；
document.getElementById（“无”）.addEventListener（'click'，HandlebtClick）；
addInteraction（document.getElementById（'None'））；

html，
身体{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
}
.地图{
身高：90%；
宽度：100%；
}

绘制特征
几何类型
指向
多边形
线绳
没有一个

每个按钮都需要一个单击侦听器，它将设置

值

变量，而不是使用

typeSelect.value

如何将其放入代码中？在html中，我更改了选择按钮。

 </div>
<div id="type">
<button value="Point">button1</button>
<button value="Polygon">button2</button>
<button value="LineString">button3</button>
</div>

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new Draw({
source: source,
type: typeSelect.value,
});
map.addInteraction(draw);
}
}

    <div id="type">
      <button id="Point" value="Point">Point</button>
      <button id="Polygon" value="Polygon">Polygon</button>
      <button id="LineString" value="LineString">LineString</button>
      <button id="None" value="None">None</button>
    </div>

  /**
   * Handle button clicks.
   */
  function handleBtnClick() {
    var element=this;
    map.removeInteraction(draw);
    addInteraction(element);
  };
  document.getElementById("Point").addEventListener('click', handleBtnClick);
  document.getElementById("Polygon").addEventListener('click', handleBtnClick);
  document.getElementById("LineString").addEventListener('click', handleBtnClick);
  document.getElementById("None").addEventListener('click', handleBtnClick);