Merge vector-2.4 branch back to trunk.
svn merge sandbox/vector-2.4/@2307 sandbox/vector-2.4/@HEAD trunk/openlayers/ git-svn-id: http://svn.openlayers.org/trunk/openlayers@2803 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
96
examples/draw-feature.html
Normal file
96
examples/draw-feature.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#map {
|
||||
width: 512px;
|
||||
height: 350px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
#controlToggle li {
|
||||
list-style: none;
|
||||
}
|
||||
p {
|
||||
width: 512px;
|
||||
}
|
||||
</style>
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
var map, drawControls;
|
||||
OpenLayers.Util.onImageLoadErrorColor = "transparent";
|
||||
function init(){
|
||||
map = new OpenLayers.Map('map');
|
||||
|
||||
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
|
||||
|
||||
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
|
||||
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
|
||||
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
|
||||
|
||||
map.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
|
||||
map.addControl(new OpenLayers.Control.LayerSwitcher());
|
||||
map.addControl(new OpenLayers.Control.MousePosition());
|
||||
|
||||
var options = {handlerOptions: {freehand: true}};
|
||||
drawControls = {
|
||||
point: new OpenLayers.Control.DrawFeature(pointLayer,
|
||||
OpenLayers.Handler.Point),
|
||||
line: new OpenLayers.Control.DrawFeature(lineLayer,
|
||||
OpenLayers.Handler.Path, options),
|
||||
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
|
||||
OpenLayers.Handler.Polygon, options)
|
||||
};
|
||||
|
||||
for(var key in drawControls) {
|
||||
map.addControl(drawControls[key]);
|
||||
}
|
||||
|
||||
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
|
||||
|
||||
document.getElementById('noneToggle').checked = true;
|
||||
}
|
||||
|
||||
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>OpenLayers Draw Feature Example</h1>
|
||||
<div id="map"></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="point" id="pointToggle" onclick="toggleControl(this);" />
|
||||
<label for="pointToggle">draw point</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
|
||||
<label for="lineToggle">draw line</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
|
||||
<label for="polygonToggle">draw polygon</label>
|
||||
</li>
|
||||
</ul>
|
||||
<p>Feature digitizing is in freehand mode by default. In freehand mode, the mouse is treated as a pen.
|
||||
Drawing begins on mouse down, continues with every mouse move, and ends with mouse up.</p>
|
||||
<p>To turn freehand mode off, hold down the shift key while digitizing. With freehand mode off, one
|
||||
vertex is added with each click and double-clicks finish drawing. Freehand mode can be toggled on and off
|
||||
at any time while drawing.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user