标签：javascript overlay openlayers openstreetmap
<!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))
标签：javascript,overlay,openlayers,openstreetmap 来源： https://codeday.me/bug/20190529/1181160.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。