Question

我对osm很新。我想在那里考虑我的代码问一个问题。当前我的代码使得pgrouting在两点之间工作。并且起点由地理位置选择，终点我手动记录为lonFinal，latFinal。我想要的是在geolaciton（已经完成）选择的点和地图上点击的点之间建立一条路线。实际上问题是我将如何选择点击点作为终点。提前谢谢。

        <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
    <html>
    <head>

    <meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
    <meta lang="de">

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script >
        var map;
            function init() {  
            var proj = new OpenLayers.Projection("EPSG:4326");
            var mapproj = new OpenLayers.Projection("EPSG:3857");
            var bounds = new OpenLayers.Bounds(
            16.1536311, 48.106509,16.6148645, 48.3433243
            ).transform(proj, mapproj);

            var options = {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.KeyboardDefaults(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            ],
            maxExtent: bounds,
            projection: new OpenLayers.Projection("EPSG:3857")
            };    

                  map = new OpenLayers.Map("map", options);

                  var osmBaseLayer = new OpenLayers.Layer.OSM();
                  map.addLayer(osmBaseLayer);


                          var lonStart = 16.36864;
                          var latStart = 48.19779;
                          var lonFinal = 16.36893;
                          var latFinal = 48.19638;
                          if (navigator.geolocation)
                         {
                         navigator.geolocation.getCurrentPosition(showPosition);
                         }else{
                         alert("Geolocation is not supported by this browser.");
                         }

                var lonStart = 16.36864;
                var latStart = 48.19779;
                var lonFinal = 16.36893;
                var latFinal = 48.19638;
                var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
                proj, map.getProjectionObject());   
                map.setCenter(startCoord, 14);         
        };


    function showPosition(position)
              {     
                  var lonFinal = 16.36759;
                  var latFinal = 48.19629;

                   lonStart=position.coords.longitude;
                   latStart=position.coords.latitude;

             var Style = {strokeColor: "red", strokeWidth:4}
             var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
             {projection: new OpenLayers.Projection("EPSG:4326"),
             style: Style,
             strategies: [new OpenLayers.Strategy.BBOX()],
             protocol: new OpenLayers.Protocol.HTTP({
                    url:"http://localhost/geoinfo/pgrouting.php",
                    params: {'lonStart': lonStart,
                     'latStart': latStart,
                     'lonEnd': lonFinal,
                     'latEnd': latFinal},
             format: new OpenLayers.Format.GeoJSON()
                    })
          });
        map.addLayer(vector_layer);

           var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
                {projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.HTTP({
                url:"http://localhost/geoinfo/kaiser.php",
                format: new OpenLayers.Format.GeoJSON()
                }),
                 fillColor: 'green',
                 strokeColor: 'green',
                 strokeWidth: 10});
          map.addLayer(vector_layer);


      }
          </script>
        </head>
          <body onload="init();">
            <div id="map" class='divMap'></div>     
      </body>
    </html>

Answer 1

我做到了！这是代码。

             <!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
    <html>
    <head>

    <meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
    <meta lang="de">

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script >

      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, 
      { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false },
       initialize: function(options) 
       { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); 
         OpenLayers.Control.prototype.initialize.apply( this, arguments ); 
         this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger },
         this.handlerOptions ); }, trigger: function(e) { 
        var lonlat = map.getLonLatFromPixel(e.xy);
        alert("The progress will take some seconds" );
        var endpoint = new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(map.getProjectionObject(),proj);    
        calculateRoute(endpoint);

        }
        });
        var map;
        var lonStart = 16.36864;
        var latStart = 48.19779;
        var lonFinal = 16.36893;
        var latFinal = 48.19638;
        var proj = new OpenLayers.Projection("EPSG:4326");
        var mapproj = new OpenLayers.Projection("EPSG:3857");
        function init() {  
            var bounds = new OpenLayers.Bounds(
            16.1536311, 48.106509,16.6148645, 48.3433243
            ).transform(proj, mapproj);

            var options = {
            controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.KeyboardDefaults(),
            new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Attribution(),
            new OpenLayers.Control.MousePosition(),
            new OpenLayers.Control.Click(),
            ],
            maxExtent: bounds,
            projection: new OpenLayers.Projection("EPSG:3857")
            };    

                  map = new OpenLayers.Map("map", options);

                  var osmBaseLayer = new OpenLayers.Layer.OSM();
                  map.addLayer(osmBaseLayer);
                  var click = new OpenLayers.Control.Click();
                   map.addControl(click); 
                   click.activate();


                          lonStart = 16.36864;
                          latStart = 48.19779;
                          lonFinal = 16.36893;
                          latFinal = 48.19638;
                          if (navigator.geolocation)
                         {
                         navigator.geolocation.getCurrentPosition(setmylocation);
                         }else{
                         alert("Geolocation is not supported by this browser.");
                         }

                lonStart = 16.36864;
                latStart = 48.19779;
                lonFinal = 16.36893;
                latFinal = 48.19638;
                var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
                proj, map.getProjectionObject());   
                map.setCenter(startCoord, 14);


           var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
                {projection: new OpenLayers.Projection("EPSG:4326"),
                strategies: [new OpenLayers.Strategy.BBOX()],
                protocol: new OpenLayers.Protocol.HTTP({
                url:"http://localhost/geoinfo/kaiser.php",
                format: new OpenLayers.Format.GeoJSON()
                }),
                 fillColor: 'green',
                 strokeColor: 'green',
                 strokeWidth: 10});
          map.addLayer(vector_layer);         
        };


    function setmylocation(position)
    {     
        lonStart=position.coords.longitude;
        latStart=position.coords.latitude;   
    }

    function calculateRoute(endposition)
    {
        lonFinal=endposition.lon;
        latFinal=endposition.lat;
        var Style = {strokeColor: "red", strokeWidth:4}
             var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
             {projection: new OpenLayers.Projection("EPSG:4326"),
             style: Style,
             strategies: [new OpenLayers.Strategy.BBOX()],
             protocol: new OpenLayers.Protocol.HTTP({
                    url:"http://localhost/geoinfo/pgrouting.php",
                    params: {'lonStart': lonStart,
                     'latStart': latStart,
                     'lonEnd': lonFinal,
                     'latEnd': latFinal},
             format: new OpenLayers.Format.GeoJSON()
                    })
          });
        map.addLayer(vector_layer);


    }
          </script>
        </head>
          <body onload="init();">
            <div id="map" class='divMap'></div>     
      </body>
    </html>

选择单击的点作为OSM上路径的端点

1 个答案: