如何从OpenLayers.Control.DrawFeature获取积分 [英] how to get points return from OpenLayers.Control.DrawFeature
本文介绍了如何从OpenLayers.Control.DrawFeature获取积分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!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>
以上程序是将坐标标记为点，多边形等，并以WKT格式保存在数据库中我完全是初学者..我需要你的帮助。目前我被困在了坐下。当我选择任何控件（比如多边形）时，我将能够在地图中绘制它，但我需要获得所有坐标..我不知道要继续..请帮助我....
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....
提前谢谢
推荐答案
你可以为'featureadded添加一个事件处理程序'每个 DrawFeature控件，然后使用 OpenLayers.Format写出要素的几何图形.WKT ，如下所示：
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);
});
}
示例输出：
POLYGON（（17.71874986589 9.6328123658895,20.53124986589 -10.05468763411,37.93359361589 9.2812498658895,17.71874986589 9.6328123658895））
Example Output:
POLYGON((17.71874986589 9.6328123658895,20.53124986589 -10.05468763411,37.93359361589 9.2812498658895,17.71874986589 9.6328123658895))
这篇关于如何从OpenLayers.Control.DrawFeature获取积分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
