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

您可以查看此示例 postgis to geojson php，以阐明如何使用 php 脚本通过 postgis 数据库获取 geojson 数据。

就像你在你的geojson层url中所做的那样，你传递你的php脚本的url......希望它有帮助；

于 2014-05-15T13:05:26.520 回答
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 与没有 GeoServer 的 Openlayers 3/4 一起使用。我选择的方式是通过我调用的函数从 Postgis 数据库中获取 geojson，该函数根据我的设置返回数据和样式。

在 Javascript 中，我定义了数据和样式 => Javascript 函数通过 GET 调用 php 脚本以从 Postgis 中检索数据 => 函数设置要在 Openlayers 3 中呈现的数据样式。整个 sripts 可以在Is there a simple way to在 Openlayers 3 中使用 Postgis-geojson？

请注意，建议的解决方案并不安全，因为可以操纵 GET 字符串（sql 注入）。我通过 https 使用调用，服务器端 php-script 检查是否设置了 SESSION。所以脚本在没有登录的情况下无法执行。我们在一个非常小的小组中使用它，但在许多人正在访问数据的环境中使用它可能不是一个好主意。

所以提高安全性会很好。

于 2017-09-17T20:03:31.630 回答