OpenLayer学习之绘图与在线编辑
有时候找到真正想要的真的很难，凡事岂能两全，唉，你又能如何确定那个选择才是对的。开车开车，今天写的是将绘制几何图形和修改几何图形综合的一块。主要用到的是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单词给写错了一直加载不出来，浪费了很多的时间
转载自：https://blog.csdn.net/weixin_40184249/article/details/80868478
