Question

<!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格式将其保存在数据库中。我完全是初学者。我需要你的帮助。目前我被困在了坐下。当我选择任何控件（比如多边形）时，我将能够在地图中绘制它，但我需要获得所有坐标..我不知道要继续..请帮助我....

提前谢谢

Answer 1

您可以在每个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））

如何从OpenLayers.Control.DrawFeature获取积分

1 个答案: