<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>Mapping project</title>
<link rel="stylesheet" href="default/style.css" type="text/css">
<link rel="stylesheet" href="example/style.css" type="text/css">
<script src="js/jquery-1.8.2.js"></script>
<script src="OpenLayers/OpenLayers.js"></script>
<script type="text/javascript">
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
var extent = new OpenLayers.Bounds(85.27004687475169, 27.65583205563965, 85.37218539403848,27.74656781293908).transform(fromProjection,toProjection);
var position = new OpenLayers.LonLat(85.322136566277, 27.698144266444).transform( fromProjection, toProjection);
var zoom = 13;
var map, vectors, drawControls, wkt;
var c=0;
function init(){
var newLayer = new OpenLayers.Layer.OSM();
var opt = {restrictedExtent : extent};
vectors = new OpenLayers.Layer.Vector("Overlayers");
map = new OpenLayers.Map("map", opt);
map.addLayer(newLayer, vectors);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
// var options = {
// hover: true,
// onSelect: displayWKT
// };
//Defining type of draw controls
drawControls = {
point: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,
OpenLayers.Handler.Polygon)
};
//Controls are add to the map
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
wkt = new OpenLayers.Format.WKT();
//Center positiona and height of zoom of the map is set here
map.setCenter(position, zoom);
/*************************This is event register for mouse*******************************/
map.events.register("click", map, function(e) {
if(c==1){
var lonlat = map.getLonLatFromPixel(e.xy).transform(map.getProjectionObject(), fromProjection);
var lon = lonlat.lon;
var lat = lonlat.lat;
$('.form-block').css('display','block');
$('#lngval').attr('value',lon);
$('#latval').attr('value',lat);
var position= new OpenLayers.LonLat(lon,lat).transform( fromProjection, toProjection);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
}else{
alert("please select any one control");
}
});
/******************Mouse click events ends here******************************************/
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key) {
control.activate();
c=1;
} else {
control.deactivate();
}
}
}
// function displayWKT(feature) {
// var str = wkt.write(feature);
// // not a good idea in general, just for this demo
// // str = str.replace(/,/g, ', ');
// // document.getElementById('wkt').innerHTML = str;
// $('#wkt').attr('value',"abc");
// }
function parseWKT() {
var element = document.getElementById('wkt');
var features = wkt.read(element.value);
var bounds;
if(features) {
if(features.constructor != Array) {
features = [features];
}
for(var i=0; i<features.length; ++i) {
if (!bounds) {
bounds = features[i].geometry.getBounds();
} else {
bounds.extend(features[i].geometry.getBounds());
}
}
vectors.addFeatures(features);
var plural = (features.length > 1) ? 's' : '';
element.value = 'Feature' + plural + ' added'
} else {
element.value = 'Bad WKT';
}
}
</script>
</head>
<body onload="init()">
<?php
if(isset($_POST['submit']))
{
$con = dbConnect();
$type = $_POST['type'];
$lng = $_POST['lng'];
$lat = $_POST['lat'];
$des = $_POST['des'];
$sql = "Insert into pointdetails values('null', '$type','$lng,$lat','$des')";
mysql_query($sql) or die(mysql_error());
dbClose($con);
}
function dbConnect()
{
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
else
{
mysql_select_db("mapping", $con);
return $con;
}
}
function dbClose($con)
{
mysql_close($con);
}
?>
<?php
$con = dbConnect();
$sql = "select * from place";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$options[$row['id']]=$row['name'];
}
//var_dump($options);
dbClose($con);
?>
<input type="button" value="point" id="pointToggle" name="Draw point" onclick="toggleControl(this);"/>
<input type="button" value="line" id="lineToggle" name="Draw line" onclick="toggleControl(this);"/>
<input type="button" value="polygon" id="polygonToggle" name="Draw polygon" onclick="toggleControl(this);"/>
<p>
<div class="wrapper">
<div id="map" class="smallmap"></div>
<div class="form-block">
<form action="index.php" method="post"><p>
<label>Type: </label>
<select name="type">
<?php foreach($options as $key=>$value): ?>
<option value="<?php echo $key; ?>"><?php echo $value; ?></option>
<?php endforeach; ?>
</select>
</p>
<p>
<label>Long</label>
<input type="text" value="" id="lngval" name="lng"></p>
<p><label>Lat</label>
<input type="text" value="" id="latval" name="lat"></p>
<p><label>Describe</label>
<textarea rows="4" cols="16" name="des"></textarea></p>
<input type="submit" value="Submit" name="submit">
</form>
</div>
<div> <textarea rows="4" cols="16" name="wkt" id="wkt"></textarea>
<p><input type="submit" value="feature" name="feature" onclick="parseWKT();"></p></div>
</div>
</body>
</html>
Above program is to get the coordinate to marked point, polygons etc and save it in database in WKT format.I am completely beginner to this thing.. Please i need your help. Currently i am stuck in getting cordinates. When i select any control(say polygon), i will be able to draw it in map but i need to get all that coordinates.. I have not idea to continue.. Please help me with this....
THanks in advance
You can just add an event handler for the 'featureadded' event on each DrawFeature control, and then write out the feature's geometry using OpenLayers.Format.WKT, like this:
for(var key in drawControls) {
map.addControl(drawControls[key]);
// register a listener on each control
drawControls[key].events.register('featureadded', drawControls[key], function(f) {
// create a WKT reader/parser/writer
var wkt = new OpenLayers.Format.WKT();
// write out the feature's geometry in WKT format
var out = wkt.write(f.feature);
console.log(out);
});
}
Example Output:
POLYGON((17.71874986589 9.6328123658895,20.53124986589 -10.05468763411,37.93359361589 9.2812498658895,17.71874986589 9.6328123658895))
来源：https://stackoverflow.com/questions/12967967/how-to-get-points-return-from-openlayers-control-drawfeature