1

私は openlayers を使ったスクリプティングを完全にやり遂げました。postgis には、座標と高さの値、さらには各行のジオメトリ列を含むデータベースがあります。ユーザーが入力した値に従ってのみデータを取得する送信ボタンを含むフォームを作成します。送信ボタンを押すと、PHP は正しいデータを取得し、結果として表示した JSON 形式に変換します。これらの結果をopenlayersレイヤーにロードしてそれらのポイントを表示する方法を知っている人はいますか? それがメインページです：

    `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to my maps</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />


        <style type="text/css">
                       #bmap {
                          width:83%;
                          height:90%;
                          border:2px solid black;


                          position:absolute;
                          top:10px;
                          left:200px;
                          }
                          body{
                          background:yellow;
                          }
            </style>

             <script>

                    var mapoptions = {
                                theme: null,
                                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                                maxResolution: 156543.0399,
                                numZoomLevels: 20,
                                units: 'm',
                                projection: new OpenLayers.Projection("EPSG:900913"),
                                displayProjection: new OpenLayers.Projection("EPSG:4326"),

                     controls:[
                                  new OpenLayers.Control.PanZoomBar(),
                                  new OpenLayers.Control.Navigation(),
                                  new OpenLayers.Control.LayerSwitcher(),
                                  new OpenLayers.Control.MousePosition(),
                                  new OpenLayers.Control.ScaleLine(),
                                  new OpenLayers.Control.Scale()
                              ]
                    };



                          function init() {
                            map = new OpenLayers.Map("bmap", mapoptions);

                            var mapnik = new OpenLayers.Layer.OSM("OSM Mapnik");
                            map.addLayer(mapnik);

                            var cyclemap = new OpenLayers.Layer.OSM("OSM CycleMap");
                            map.addLayer(cyclemap);



                             var wmslayer = new OpenLayers.Layer.WMS(
                                        "Altitude points",
                                        "http://192.168.56.101:8080/geoserver/wms",
                                        {'layers': 'dublin_flooding:dublin', 'format':'image/png', 'transparent':'true'},
                                        {'opacity': 1.0, 'isBaseLayer': false, 'visibility': false}
                                   );
                              map.addLayer(wmslayer);

var veclayer=new OpenLayers.Layer.Vector("geojson",{

                    strategies: [new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
            url: "query5.php",
                        format: new OpenLayers.Format.GeoJSON(),
                    internalProjection: new OpenLayers.Projection("EPSG:900913"),
                          externalProjection: new OpenLayers.Projection("EPSG:4326")
                    }),

                });
                map.addLayer(veclayer);




                            map.setCenter(new OpenLayers.LonLat(-6.26555,53.34590) // Center of the map
                              .transform(
                                new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                                new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
                              ), 12 // Zoom level
                            );
                          }
            </script>


</head>

<body>
<h3>Flooding projection</h3>
<form action="query5.php" method="POST" name="form">


        <table cellpadding="0">
        <tr>
        <td>
        <p>Meters:</p>
        </td>
        <td>
        <input name="sliderValue" id="sliderValue" type="Text" size="3">
        </td>
        </tr>
        <tr>
        <td>
<input name="Submit" type="Submit" value="Submit">
</td>
</tr>
</table>

</form>
<body onload="init();">
 <div id="bmap"></div>
</body>
</html>
`

PHPクエリは次のようになります。

    `<?php
$db = pg_connect("host=localhost port=5432 dbname=firstSpatialDB user=postgres password=postgres");
$query = "SELECT* FROM dublin where alt<='$_POST[sliderValue]'";
        $result = pg_query($query);
// Return route as GeoJSON
   $geojson = array(
       'type'      => 'FeatureCollection',
       'features'  => array()
    ); 
   // Add edges to GeoJSON array
    while($row=pg_fetch_array($result)) {  
  $feature = array(
          'type' => 'Feature', 
          'geometry' => array(
             'type' => 'Point',
             'coordinates' => array($row[1], $row[2])

          ),
          'properties' => array(
            'gid' => $row[0],
            'alt' => $row[3]
           )
       );
       // Add feature array to feature collection array
       array_push($geojson['features'], $feature);
    }
    pg_close($dbconn);
  // Return routing result
    header("Content-Type:application/json",true);
    //header("Location:map.html");
    echo json_encode($geojson);
?> `

私の見解では、それは機能するはずですが、まったく機能していません。多分誰かが何が悪いのか考えています。私は本当に自分のものを十分に持っているので、何か提案をありがとう。

4

5 に答える 5

1

あなたのコード (chri_chri) を試しました。

画像を読み込もうとしましたが、間違っているようです...私も今openlayersに

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Floorplan test</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css"     type="text/css" />


        <style type="text/css">
                       #bmap {
                          width:83%;
                          height:90%;
                          border:2px solid black;


                          position:absolute;
                          top:10px;
                          left:200px;
                          }
                          body{
                          background:yellow;
                          }
            </style>

             <script>

                   var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
             var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            'png_1.jpg',
            new OpenLayers.Bounds(-300, -188.759, 300, 188.759),
            new OpenLayers.Size(580, 288),
            options
        );
            map.addLayer(floorplan);
           //Create a Format object
    var vector_format = new OpenLayers.Format.GeoJSON({}); 

    //Create a Protocol object using the format object just created
    var vector_protocol = new OpenLayers.Protocol.HTTP({
        url: 'ex5_data.json',
        format: vector_format
    });

    //Create an array of strategy objects
    var vector_strategies = [new OpenLayers.Strategy.Fixed()];

    //Create a vector layer that contains a Format, Protocol, and Strategy class
    var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{    
        protocol: vector_protocol,
        strategies: vector_strategies 
    });

    map.addLayer(vector_layer);

    if(!map.getCenter()){
        map.zoomToMaxExtent();
    }
        }
            </script>


</head>

<body>
<h3>Floorplan</h3>

<body onload="init();">
 <div id="bmap"></div>
</body>
</html>

私が始めたのは、フロアプラン マップを読み込んで、それをスケーリングしようとすることです。

于 2012-06-13T08:24:27.120 に答える
1

私はphpを使ったことがないので、それがあなたの問題なのかどうかわかりません。あなたのコードをこれと比較してください。私にとってはうまくいきました。おそらくあなたのエラーはJavaScriptにあります。

 var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
             var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            '../../temp_photos/sample-floor-plan.jpg',
            new OpenLayers.Bounds(-300, -188.759, 300, 188.759),
            new OpenLayers.Size(580, 288),
            options
        );
            map.addLayer(floorplan);
           //Create a Format object
    var vector_format = new OpenLayers.Format.GeoJSON({}); 

    //Create a Protocol object using the format object just created
    var vector_protocol = new OpenLayers.Protocol.HTTP({
        url: 'ex5_data.json',
        format: vector_format
    });

    //Create an array of strategy objects
    var vector_strategies = [new OpenLayers.Strategy.Fixed()];

    //Create a vector layer that contains a Format, Protocol, and Strategy class
    var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
        protocol: vector_protocol,
        strategies: vector_strategies 
    });

    map.addLayer(vector_layer);

    if(!map.getCenter()){
        map.zoomToMaxExtent();
    }
        }
于 2012-05-24T11:24:15.183 に答える
0

PHPを使用できます

<?php
    ini_set('display_errors', 1);

    # Connect to PostgreSQL database
    $conn = pg_connect("dbname='gisdata' user='username' 
    password='password' host='localhost'") 
    or die ("Could not connect to server\n");

    $result = pg_fetch_all(pg_query($conn, "SELECT row_to_json(fc)
        FROM ( SELECT 'FeatureCollection' As type, 
        array_to_json(array_agg(f)) As features
        FROM (SELECT 'Feature' As type
        , ST_AsGeoJSON(lg.geom, 4)::json As geometry
        , row_to_json((SELECT l FROM (SELECT id, designacao) As l
          )) As properties
        FROM hidrog As lg ) As f ) As fc;"));

    if (!$result) {
        echo "An error occurred.\n";
        exit;
    }

    #echo json_encode($result, JSON_NUMERIC_CHECK);
    $json_data = json_encode($result);
    file_put_contents('test.json', $json_data);

    $jsonString = file_get_contents('test.json');
    $json_new = substr($jsonString, 17,-2);
    $json_new = str_ireplace('\"', '"', $json_new);
    echo $json_new;

    file_put_contents('test_new.json', $json_new);
?>
于 2017-12-15T11:19:01.723 に答える
0

このpostgis to geojson phpの例を見ると 、php スクリプトを使用して postgis データベースから geojson データを取得する方法が明確になっています。

そして、geojson レイヤーの URL で行ったように、php スクリプトの URL を渡します...お役に立てば幸いです。

于 2014-05-15T13:05:26.520 に答える