<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在多个矢量图层编辑要素</title>
<link rel="stylesheet" href="./OpenLayers-2.12/theme/default/style.css" type="text/css" />
<script src="./OpenLayers-2.12/lib/OpenLayers.js"></script>
<script type="text/javascript">
function init(){
// Create map
var map = new OpenLayers.Map("editing_vector");
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0, 0), 3); var vectorLayerA = new OpenLayers.Layer.Vector("Vector layer A");
var vectorLayerB = new OpenLayers.Layer.Vector("Vector layer B");
map.addLayers([vectorLayerA, vectorLayerB]); var editingToolbarControl = new OpenLayers.Control.EditingToolbar(vectorLayerA);
map.addControl(editingToolbarControl); function layerAChanged(checked) {
if(checked) {
var controls = editingToolbarControl.getControlsByClass("OpenLayers.Control.DrawFeature");
for(var i=0; i< controls.length; i++) {
controls[i].layer = vectorLayerA;
}
}
}
function layerBChanged(checked) {
if(checked) {
var controls = editingToolbarControl.getControlsByClass("OpenLayers.Control.DrawFeature");
for(var i=0; i< controls.length; i++) {
controls[i].layer = vectorLayerB;
}
}
}
}
</script>
</head>
<body onload="init()"> <form action="">
Vector Layer A: <input id="rbA" type="radio" onChange="layerAChanged" name="layer" value="layerA" checked/>
Vector Layer B: <input id="rbB" type="radio" onChange="layerBChanged" name="layer" value="layerB"/>
</form>
<div id="editing_vector" style="width: 100%; height: 100%;"></div>
</html>