Openlayers 绘制按钮

Question

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

我认为应该在 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>

我试过如下。

 </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);
}
}

有人可以帮我吗？

Answer 1

将 select 更改为按钮。

    <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);

working example

代码片段：

var raster = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.OSM(),
});

var source = new ol.source.Vector({ // VectorSource({
  wrapX: false
});


var vector = new ol.layer.Vector({ // VectorLayer({
  source: source,
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [-11000000, 4600000],
    zoom: 4,
  }),
});

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

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

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

addInteraction(document.getElementById('None'));

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 90%;
  width: 100%;
}

<title>Draw Features</title>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<div id="map" class="map"></div>
<label>Geometry type &nbsp;</label>
<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>

Openlayers 绘制按钮

Openlayers draw button

button

draw

openlayers