OpenLayer學習之繪圖與線上編輯
阿新 • • 發佈：2018-12-30
有時候找到真正想要的真的很難，凡事豈能兩全，唉，你又能如何確定那個選擇才是對的。開車開車，今天寫的是將繪製幾何圖形和修改幾何圖形綜合的一塊。主要用到的是ol.interaction.Draw、ol.interaction.Select、ol.interaction.Modify三個互動。
一、繪圖函式封裝
function Draw() { var value = $("#type option:selected").val(); draw = new ol.interaction.Draw({ source: sourceVector, type: value, wrapX: false, active: false, style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); draw.setActive(result); map.addInteraction(draw); }
二、Select和Modify互動封裝初始化
function init() { //初始化一個互動選擇控制元件,並新增到地圖容器中 select = new ol.interaction.Select(); map.addInteraction(select); //初始化一個互動編輯控制元件，並新增到地圖容器中 modify = new ol.interaction.Modify({ features: select.getFeatures()//選中的要素 }); map.addInteraction(modify); //設定幾何圖形變更的處理 setEvents(select); };
三、feature選中處理
function setEvents(select) { var selectedFeatures = select.getFeatures(); //選中的要素 //新增選中要素變更事件 select.on('change:active', function () { selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures); }); };
這個函式算是稍微有點難
四、全部原始碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>繪圖和修改</title>
</head>
<link href="Script/ol.css" rel="stylesheet" />
<script src="Script/ol.js"></script>
<script src="../Scripts/jquery-1.7.1.js"></script>
<body>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
<option value="Circle">Circle</option>
</select>
<input type="button" id="draw" name="name" value="繪圖" />
<input type="button" id="modify" name="name" value="修改" />
<div id="map"></div>
<script>
//變數
var select;
var modify;
var draw;
var typeSelect = $("#type");
var result = false;
//var featureArray = new ol.Collection();
var sourceTile = new ol.source.OSM();
var layerTile = new ol.layer.Tile({
source: sourceTile
});
var sourceVector = new ol.source.Vector();
var layerVector = new ol.layer.Vector({
source: sourceVector,
});
//map函式
var map = new ol.Map({
layers: [layerTile],
view: new ol.View({
// 設定成都為地圖中心，此處進行座標轉換， 把EPSG:4326的座標，轉換為EPSG:3857座標，因為ol預設使用的是EPSG:3857座標
center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
zoom: 8
}),
target: 'map'
});
map.addLayer(layerVector);
//繪圖控制元件
function Draw() {
var value = $("#type option:selected").val();
draw = new ol.interaction.Draw({
source: sourceVector,
type: value,
wrapX: false,
active: false,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
draw.setActive(result);
map.addInteraction(draw);
}
//初始化控制元件
function init() {
//初始化一個互動選擇控制元件,並新增到地圖容器中
select = new ol.interaction.Select();
map.addInteraction(select);
//初始化一個互動編輯控制元件，並新增到地圖容器中
modify = new ol.interaction.Modify({
features: select.getFeatures()//選中的要素
});
map.addInteraction(modify);
//設定幾何圖形變更的處理
setEvents(select);
};
//設定啟用變更處理
function setEvents(select) {
var selectedFeatures = select.getFeatures(); //選中的要素
//新增選中要素變更事件
select.on('change:active', function () {
selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
});
};
init();
//啟用選擇控制元件
function setActive(active, select, modify) {
select.setActive(active);//啟用選擇要素控制元件
modify.setActive(active);//啟用修改要素控制元件
};
//下拉框改變事件
typeSelect.change(function () {
map.removeInteraction(draw);
Draw();
});
//繪圖工具初始化
Draw();
//禁用修改控制元件
setActive(false,select, modify);
$("#draw").click(function () {
result = true;
Draw();
setActive(false, select, modify);
});
$("#modify").click(function () {
result = false;
//初始化幾何圖形修改控制元件
setActive(true, select, modify); //啟用幾何圖形修改控制元件;
map.removeInteraction(draw);
});
</script>
</body>
</html>
說好的進行封裝呢，又特麼整一坨了，全部原始碼主要事件有點繞，整體的思路：當頁面初始化的時候，繪圖、修改、選中都是禁用狀態，當點選繪圖按鈕，繪圖可用，修改，選中禁用，重新載入Draw函式，當選擇修改時，修改、選中互動可用，繪圖移除（當然也可以禁用），這裡我沒有寫完整，其實應該先判斷sourceVector的feature是否為空，再進行是否啟用修改、選擇互動互，我感覺寫的有點亂不要噴我，再次基礎上可以進行再次封裝。
五、效果圖
六、總結
功能很簡單，就是中間把source單詞給寫錯了一直載入不出來，浪費了很多的時間