admin管理员组文章数量:1397134
<!DOCTYPE html>
<html xmlns="" 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 pletely 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
<!DOCTYPE html>
<html xmlns="http://www.w3/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 pletely 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
Share Improve this question edited Oct 19, 2012 at 14:56 yalestar 9,5747 gold badges40 silver badges54 bronze badges asked Oct 19, 2012 at 5:36 user98239820user98239820 1,4912 gold badges16 silver badges31 bronze badges1 Answer
Reset to default 6You 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))
本文标签： javascripthow to get points return from OpenLayersControlDrawFeatureStack Overflow
版权声明：本文标题：javascript - how to get points return from OpenLayers.Control.DrawFeature - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744115813a2591508.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论