<!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 onl oad="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格式保存在数据库中.我完全是初学者..请我需要你的帮助.目前我被困在了坐下.当我选择任何控件(比如多边形)时,我将能够在地图中绘制它,但我需要得到所有的坐标..我不知道要继续..请帮助我…
提前致谢
解决方法:
您可以在每个DrawFeature control上为’featureadded’事件添加事件处理程序,然后使用OpenLayers.Format.WKT写出要素的几何,如下所示：
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))