（来源：http://nwaybygreifen.spaces.live.com/blog/cns!6220A29AE9D7B87!229.trak）
1.1 矢量要素选择
在4.1节的源码中已经涉及
对于要素选择基本可以理解为以下几步。
① 定义 control:OpenLayers.Control.DrawFeature
分为hover和非hover
select: new OpenLayers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
② Map.addControl
③ Control.active()
1.2 矢量要素拖动
对于要素拖动基本可以理解为以下几步。
① 定义 control: OpenLayers.Control.DragFeature(图层名称)
② Map.addControl
③ Control.active()
1.3 获取矢量要素信息
对于获取要素信息基本可以理解为以下几步。
① 选中要素，就获取了Feature对象。对于填加要素的同时，也是选中的一种情况。
② 应用Feature的有关属性获取几何或属性信息。
一个比较综合的例子，编辑要素、获取GML要素属性信息
注：feature.attributes.name:获取gml中要素的属性值。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Popup on Layer.Vector</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#controlToggle li {
list-style: none;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls, selectControl, selectedFeature;
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
/**********************************************************************
***选择要素动作
***弹出要素信息
***********************************************************************/
function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
"<div style='font-size:.8em'>Feature: " + feature.attributes.name +"<br />Area: " + feature.geometry.getArea()+"</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
//var polygonLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));
var gmlLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml");
map.addLayer(gmlLayer);
map.addLayers([wmsLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
selectControl = new OpenLayers.Control.SelectFeature(gmlLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
drawControls = {
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
OpenLayers.Handler.Polygon),
select: selectControl
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
/**********************************************************************
***选择触发函数
drawControls在init()中已经定义（polygon,select）
***********************************************************************/
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
</head>
<body onLoad="init()">
<h1 id="title">Open Popup on Layer.Vector</h1>
<p id="shortdesc">
Using a Control.SelectFeature, open a popup on click.
</p>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle"
onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
<li>
<input type="radio" name="type" value="select" id="selectToggle"
onclick="toggleControl(this);" />
<label for="selectToggle">select polygon on click</label>
</li>
</ul>
<p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
to do fun things -- like open a popup.
</p>
</body>
</html>