如何使用 postgresql、geoserver 和开放层 3 和 php 在地图上搜索并获取详细信息?
How to search on a map and fetch the details using postgresql, geoserver and open layers 3 and php?
我在 postgresql 数据库中有 tables,数据库名称是 BMC,它包含 50 tables。我使用 openlayers3 在 html 文件中显示地图,应用程序服务器是地理服务器。所以请帮助我以 table 格式显示数据库中的数据,并在地图上搜索查询以获取它的确切位置。
var Source_TANK =
new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/BMC/wms?',
params: {
'LAYERS': 'BMC:water_tank',
'VERSION': '1.1.0',
'FORMAT': 'image/png',
'TILED': true
},
id:"water_tank",
serverType:'geoserver'
});
var Layer_TANK = new ol.layer.Tile({
source: Source_TANK,
});
<asp:ListItem Text="Water Tank" Value="49" />
</asp:DropDownList>
<asp:DropDownList ID="DropDownListSearchBy" runat="server" style="width:80%;margin-bottom:4px; margin-left:10px;margin-top:3px;">
<asp:ListItem Text="Water Tank" Value="0" />
</asp:DropDownList>
<asp:TextBox ID="TextBoxSearch" placeholder="Search for Place, Property etc." style="width:80%;margin:20px;margin-left:10px;margin-top:3px;" runat="server"></asp:TextBox><br>
<button id="btn_search" type="button" title="Search" style="width:auto;height:auto; background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Search
<img src="img/search.png">
</button>
<button id="btn_clear" type="button" title="Clear" style="width:auto;height:auto;background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Clear
<img src="img/refresh2.png">
</button>
</form>
要以表格格式显示数据,请使用来自 Geoserver 的 WFS 服务 GetFeature 请求。有许多可用的输出格式,如 GeoJSON、KML、CSV。
我个人选择 GeoJSON 因为 JSON 对象可以轻松处理。
浏览下面的 link 了解更多
http://docs.geoserver.org/latest/en/user/services/wfs/reference.html
示例 WFS url
注意: 此请求将获取该层中的所有记录,因此响应可能需要一些时间,具体取决于 table 中的记录数。
我在 postgresql 数据库中有 tables,数据库名称是 BMC,它包含 50 tables。我使用 openlayers3 在 html 文件中显示地图,应用程序服务器是地理服务器。所以请帮助我以 table 格式显示数据库中的数据,并在地图上搜索查询以获取它的确切位置。
var Source_TANK =
new ol.source.TileWMS({
url: 'http://localhost:8080/geoserver/BMC/wms?',
params: {
'LAYERS': 'BMC:water_tank',
'VERSION': '1.1.0',
'FORMAT': 'image/png',
'TILED': true
},
id:"water_tank",
serverType:'geoserver'
});
var Layer_TANK = new ol.layer.Tile({
source: Source_TANK,
});
<asp:ListItem Text="Water Tank" Value="49" />
</asp:DropDownList>
<asp:DropDownList ID="DropDownListSearchBy" runat="server" style="width:80%;margin-bottom:4px; margin-left:10px;margin-top:3px;">
<asp:ListItem Text="Water Tank" Value="0" />
</asp:DropDownList>
<asp:TextBox ID="TextBoxSearch" placeholder="Search for Place, Property etc." style="width:80%;margin:20px;margin-left:10px;margin-top:3px;" runat="server"></asp:TextBox><br>
<button id="btn_search" type="button" title="Search" style="width:auto;height:auto; background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Search
<img src="img/search.png">
</button>
<button id="btn_clear" type="button" title="Clear" style="width:auto;height:auto;background-color:#3c8dbc;border-color:transparent;margin-left:10px;font-style:normal; font-color:#f9f9f9; font-family: sans-serif; color: #FFFFFF;margin-bottom:10px;">Clear
<img src="img/refresh2.png">
</button>
</form>
要以表格格式显示数据,请使用来自 Geoserver 的 WFS 服务 GetFeature 请求。有许多可用的输出格式,如 GeoJSON、KML、CSV。
我个人选择 GeoJSON 因为 JSON 对象可以轻松处理。 浏览下面的 link 了解更多 http://docs.geoserver.org/latest/en/user/services/wfs/reference.html
示例 WFS url
注意: 此请求将获取该层中的所有记录,因此响应可能需要一些时间,具体取决于 table 中的记录数。