我完全坚持使用openlayers编写脚本。我在postgis中有数据库，其中包含坐标和高度值，甚至每行的几何列。我使用提交按钮创建表单，仅根据用户输入的值检索数据。当我按下提交按钮时，PHP 正在获取正确的数据并转换为我显示为结果的 JSON 格式。有人知道如何将这些结果加载到开放层中并显示这些点吗？这是主页：
`<!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);
?> `
在我看来，这应该奏效，但根本不奏效。也许有人知道出了什么问题。感谢您的任何建议，因为我真的有足够的自己的建议。
我从未使用过 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();
}
}
我刚刚尝试了您的代码（chri_chri）。
我试图加载图像，但似乎错了...我现在也打开层
<!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>
我开始的是加载平面图并尝试缩放它。
你可以看看这个例子 postgis to geojson php，阐明如何使用 PHP 脚本通过 Postgis 数据库获取 geojson 数据。
就像您在 geojson 层 URL 中所做的那样，你传递了 PHP 脚本的 URL......希望有帮助;
我将PostGis与Openlayers 3/4一起使用，而无需GeoServer。我选择的方法是通过我调用的函数从 Postgis 数据库中获取 geojson，该函数返回数据并根据我的设置设置其样式。
在Javascript中，我定义了数据和样式=>Javascript-function通过GET调用php-script以从Postgis =>函数样式化数据以在Openlayers 3中呈现。整个sripts可以在Openlayers 3中使用Postgis-geojson的简单方法中看到？
请注意，建议的解决方案并不安全，因为GET字符串可以纵（sql注入）。我通过https使用调用，服务器端php脚本检查是否设置了SESSION。因此，如果不登录，则无法执行脚本。我们在非常小的组中使用它，但在许多人访问数据的环境中使用它可能不是一个好主意。
因此，安全性的改进将是好的。
您可以使用 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);
?>