OpenLayers绘制按钮 [英] Openlayers draw button
本文介绍了OpenLayers绘制按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
This example显示按下按钮时的绘图功能。它允许您选择不同的形状,如点,线,多边形等。我想纳入类似的功能到我的项目。但我不想选择形状,而是想按下按钮打开绘制点、线、面等功能。
我假定按钮元素应该插入到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);
}
}
有人能帮帮我吗?
推荐答案
- 将选择更改为按钮。
<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);
代码片段:
数据-lang="js"数据-隐藏="假"数据-控制台="假"数据-巴贝尔="假">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 </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绘制按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文