如何显示我使用开放图层绘制的点和线的纬度和经度?

时间:2011-02-28 11:36:05

标签: javascript openlayers

  

可能重复:
  How to display the latitude and longitude in from this code using Openlayers?

<!DOCTYPE html>
<html>



<head>
  <script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
  <script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script> 
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

</style>
</head>
<body>
  <div id="map" class="smallmap" style="width:400px; height:300px"></div>
  Coordinates when click display here: <p id="coord"></p>
<script>

    var map, vectors, controls;
    map = new OpenLayers.Map('map');
    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});

    vectors = new OpenLayers.Layer.Vector("Vector Layer");

    map.addLayers([wms, vectors]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    //map.addControl(new OpenLayers.Control.Click());

   triger: map.events.register("click", map, function(e) {
      var position = map.getLonLatFromPixel(e.xy);

      OpenLayers.Util.getElement("coord").innerHTML =
         position.lon.toFixed(3) + ', ' + position.lat.toFixed(3);

    });


    controls = {
      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),
      drag: new OpenLayers.Control.DragFeature(vectors)
    };


    map.setCenter(new OpenLayers.LonLat(0, 0), 3);


</script>
    </head>
    <body onload="init()">
        <h1 id="title">Drag Feature Example</h1>

        <div id="tags">
            point, line, linestring, polygon, digitizing, geometry, draw, drag
        </div>

        <p id="shortdesc">
            Demonstrates point, line and polygon creation and editing.
        </p>

        <div id="map" class="smallmap"></div>

        <div id="controls">
            <ul id="controlToggle">
                <li>
                    <input type="radio" name="type" value="none" id="noneToggle"
                           onclick="toggleControl(this);" checked="checked" />

                    <label for="noneToggle">navigate</label>
                </li>
                <li>
                    <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
                    <label for="pointToggle">draw point</label>
                </li>
                <li>
                    <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />

                    <label for="lineToggle">draw line</label>
                </li>
                <li>
                    <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
                    <label for="polygonToggle">draw polygon</label>
                </li>
                <li>
                    <input type="radio" name="type" value="drag" id="dragToggle"
                           onclick="toggleControl(this);" />

                    <label for="dragToggle">drag feature</label>
                </li>
            </ul>
        </div>

        <div id="docs"></div>
    </body>
</html>

如何获取我点击的点或我画的线的纬度和经度?

0 个答案:

没有答案