<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<title>Document</title>
</head>
<body>
<div id="menu">
<label>幾何圖形類型： </label>
<select id="type">
<option value="None">無</option>
<option value="Point">點</option>
<option value="LineString">線</option>
<option value="Polygon">多邊形</option>
<option value="Circle">圓</option>
<option value="Square">正方形</option>
</select>
</div>
<div id="map"></div>
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: [ 91.1, 30.41],
zoom: 4
})
});
var typeSelect = document.getElementById('type'); //繪制類型選擇對象
var draw; //ol.Interaction.Draw類的對象
//實例化一個矢量圖層Vector作為繪制層
var source = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({ //填充樣式
color: 'rgba(255, 255, 255, 0.2'
}),
stroke: new ol.style.Stroke({ //線樣式
color: '#00c033',
width: 2
}),
image: new ol.style.Circle({ //點樣式
radius: 7,
fill: new ol.style.Fill({
color: '#00c033'
})
})
})
});
//將繪制層添加到地圖容器中
map.addLayer(vectorLayer);
//用戶更改繪制類型觸發的事件
typeSelect.onchange = function(e){
map.removeInteraction(draw); //移除繪制圖形控件
addInteraction(); //添加繪制圖形控件
};
function addInteraction(){
var typeValue = typeSelect.value; //繪制類型
if(typeValue !== 'None'){
var geometryFunction, maxPoints;
if(typeValue === 'Square'){ //正方形
typeValue = 'Circle'; //設置繪制類型為Circle
//設置幾何信息變更函數，即創建正方形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
console.log(typeValue);
//實例化圖形繪制控件對象並添加到地圖容器中
draw = new ol.interaction.Draw({
source: source,
type: typeValue, //幾何圖形類型
geometryFunction: geometryFunction, //幾何信息變更時的回調函數
maxPoints: maxPoints //最大點數
});
map.addInteraction(draw);
}else{
//清空繪制的圖形
source.clear();
}
}
</script>
</body>
</html>
效果圖：
