Openlayers實現圖形繪製
阿新 • • 發佈：2020-09-30
本文例項為大家分享了Openlayers實現圖形繪製的具體程式碼，供大家參考，具體內容如下
1、新建一個html頁面，引入ol.js檔案，然後在body中建立一個div標籤、label標籤和一個select下拉選項卡；
2、程式碼實現
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
//獲取下拉列表框
var typeSelect = document.getElementById('type');
//定義一個用來接收繪製物件的物件，方便以後對繪製物件進行新增、移除等操作
var draw;
//初始化地圖物件
var map = new ol.Map({
target: 'map',layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],view: new ol.View({
center: [0,0],zoom: 3
})
});
//初始化向量資料來源物件
//wrapX:Wrap the world horizontally. Default is true.
//For vector editing across the -180° and 180° meridians to work properly,this should be set to false
var source = new ol.source.Vector({ wrapX: false });
//例項化向量資料圖層
var vector = new ol.layer.Vector({
//資料來源
source: source,//樣式
style: new ol.style.Style({
//樣式填充
fill: new ol.style.Fill({
//填充顏色
color: 'rgba(37,241,239,0.2)'
}),//筆觸
stroke: new ol.style.Stroke({
//筆觸顏色
color: '#264df6',//筆觸寬度
width:2
}),//圖形樣式，主要適用於點樣式
image: new ol.style.Circle({
//半徑大小
radius: 7,//填充
fill: new ol.style.Fill({
//填充顏色
color: '#e81818'
})
})
})
});
//將向量圖層載入到map中
map.addLayer(vector);
//新增繪圖互動的函式
function addInteraction() {
//獲取當前選擇的繪圖型別
var value = typeSelect.value;
//如果當前選擇的繪圖型別不為"None"的話，則進行相應繪圖操作
//如果當前選擇的繪圖型別為"None"的話，則清空向量資料來源
if (value !== 'None') {
//如果當前的向量資料來源為空的話，則重新建立和設定資料來源
//因為當你選擇的繪圖型別為"None"時，會清空資料來源
if (source == null) {
source = new ol.source.Vector({ wrapX: false });
vector.setSource(source);
}
//geometryFunction變數，用來儲存繪製圖形時的回撥函式
//maxPoints變數，用來儲存最大的點數量
var geometryFunction,maxPoints;
//如果當前選擇的繪圖型別是"Square"的話，則將value設定為Circle
//然後呼叫createRegularPolygon()方法
if (value === 'Square') {
value = 'Circle';
//Create a geometryFunction for type: 'Circle'
//that will create a regular polygon with a user specified number of sides and start angle instead of an ol.geom.
//根據圓來建立一個四邊形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (value === 'Rectangle') {
//如果當前選擇的繪圖型別是"Square"的話，則將value設定為LineString
value = 'LineString';
//設定最大點數為2
maxPoints = 2;
geometryFunction = function (coordinates,geometry) {
//如果geometry物件不存在或者為空，則建立
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
//開始點的座標
var start = coordinates[0];
//結束點的座標
var end = coordinates[1];
//根據開始座標和結束座標設定繪圖點座標
geometry.setCoordinates([
[start,[start[0],end[1]],end,[end[0],start[1]],start]
]);
return geometry;
};
}
//將互動繪圖物件賦給draw物件
//初始化互動繪圖物件
draw = new ol.interaction.Draw({
//資料來源
source: source,//繪製型別
type: value,//回撥函式
//Function that is called when a geometry's coordinates are updated
geometryFunction: geometryFunction,//最大點數
maxPoints: maxPoints
});
//將draw物件新增到map中，然後就可以進行圖形繪製了
map.addInteraction(draw);
} else {
//清空向量資料來源
source = null;
//設定向量圖層的資料來源為空
vector.setSource(source);
}
}
//當繪製型別下拉列表框的選項發生改變時執行
typeSelect.onchange = function (e) {
//從map中移除互動繪圖物件
//如果不移除，則會在下拉列表框選項發生改變時再次進行繪製時，保留上一次的draw物件
map.removeInteraction(draw);
//執行新增繪圖互動的函式
addInteraction();
};
//新增繪圖互動的函式
//此處是為保證重新整理頁面後，仍然能夠根據下拉列表框框的選項進行圖形繪製
addInteraction();
};
</script>
</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>
<option value="Rectangle">長方形</option>
</select>
</div>
<div id="map"></div>
</body>
</html>3、結果展示
繪製點圖形
繪製線圖形
繪製多邊形
繪製圓形
繪製正方形
繪製矩形
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。