success
fail
Nov Dec Jan
Previous capture 01 Next capture
2012 2013 2014
6 captures
2 Sep 2013 - 15 Feb 2014
About this capture
Gis

Hướng dẫn xây dựng chức năng tìm kiếm cho web gis - demo webgis tra cứu thửa đất

Người đăng: soiqualang_chentreu    Ngày đăng: 2013-11-11

Hướng dẫn xây dựng chức năng tìm kiếm cho web gis - demo webgis tra cứu thửa đất


Dạo này mình thấy có nhiều người làm web gis thắc mắc cách tìm kiếm đối tượng. Bản thân mình không giỏi hơn ai nhưng may sao vụ này mình đang làm nên biết ít ít. Giờ muốn chia sẻ cho những ai không biết. Sẵn là cách chữa cháy cho những ai đang đăng kí đề tài tốt nghiệp là làm webgis mà nào giờ không biết lập trình web là cái tê mô gì ^^.
-Sản phẩm demo của cái hướng dẫn này sẽ là một cái webgis Tra cứu thông tin thửa đất quận 1, thành phố Hồ Chí Minh (tại mình thấy cái lĩnh vực thửa đất này nhiều người lao đầu vào)
Video demo cho nó phấn khởi, xem có đúng ý cái đang tìm không rồi theo dõi tiếp:

 

Video dưới là thay vì xuất kết quả tìm kiếm tra trang khác, ta dùng ajax trả kết quả tìm kiếm về dạng xml rồi thể hiện lại trang chủ.

 

-Phần mềm sử dụng: Geoserver, Notepad hay Notepad ++ (khuyến khích), Openlayers, Postgresql (Postgis).
-Ngôn ngữ lập trình: php (hiện giờ không cần các bạn phải biết, nhưng sau khi kết thúc cái hướng dẫn này thì yêu cầu các bạn phải biết chút chút đấy).
Phương châm của cái hướng dẫn này là làm đến đâu học đến đó. Tài liệu liên quan sẽ update khi gặp vấn đề.
-Yêu cầu: Phải biết Geoserver, cài và Layer preview được cái map của bản thân. Nếu chưa biết thì xem links này:http://gisvn.com.vn/showthread.php/6...es-postgis-SVG
(Vì là lần đầu viết 1 bài hướng dẫn như thế này nên không tránh khỏi sai sót, mong các bạn niệm tình bỏ qua,hihi)
Bắt đầu thui:
Đây là tài liệu yêu cầu các bạn phải đọc và thực hành trước khi theo dõi tiếp, như vậy những phần tiếp theo sẽ dễ hiểu hơn (biết cách đọc code).
HTML
http://trangxoa.com/html/
Cần phải đọc kĩ, hiểu kĩ, cái này là nền tảng của web. Không khó lắm đâu.
Php:
http://www.mediafire.com/view/?wsnib72b5euskec
Yêu cầu trước mắt: Sau khi đọc bạn phải biết khai báo biến php, chuỗi trong php, nối chuỗi, xuất biến ra màn hình.
Đặc biệt là cấu trúc If, kết nối CSDL
Sql:
http://www.mediafire.com/view/?c38kirq3havy9ik
http://www.mediafire.com/view/?4k4zgm8bgltc976
Bạn phải biết cách truy vấn bằng Select với nhiều điều kiện
Bạn nào chưa có dữ liệu thì Down dữ liệu demo của mình ở đây: http://www.mediafire.com/?kw1kp9pq4t99g0f

Phần 1: Geoserver, Postgis và Openlayer
A. Postgis
Các bạn tham khảo tài liệu sau về các hàm pgsql: http://www.mediafire.com/view/?w00gwtx84zw2wd2
Bạn phải đưa dữ liệu vào Postgis.
Nếu bạn dùng dữ liệu của tôi thì kết quả như thế này:

Một số lệnh pgsql có thể bạn phải dùng đến khi chuẩn hóa dữ liệu theo ý muốn:
Drop: Xóa bỏ một cột
Cách dùng: alter table q1 drop column id;
Rename: Đổi tên một trường dữ liệu
Cách dùng: alter table q1 rename column wkb_geometry to the_geom;

B. Geoserver
Tạo kết nối với Geoserver
Kết quả:

Như vầy là ok phần dữ liệu

C. Openlayer
Các bạn tham khảo về cách sử dụng Openlayer ở đây:
http://gisvn.com.vn/showthread.php/1...4425#post14425
- Đưa bản đồ của mình vào web
Bây giờ ta mở Notepad lên nào:
Cách khai báo 1 lớp WMS trong Openlayers
base = new OpenLayers.Layer.WMS(
"Thửa đất", "http://localhost:8080/geoserver/geohcm/wms"
,
{
LAYERS: 'geohcm:q1',
transparent:"true",
format: format
},
{singleTile: true, ratio: 1, isBaseLayer: true} 
);
Full code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache">
<title>Geoserver Layer: Soiqualang_Chentreu</title>
<link rel="stylesheet" href="../nhatro/OpenLayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../nhatro/OpenLayers/style.css" type="text/css">
<script src="../nhatro/OpenLayers/lib/OpenLayers.js"></script>
<script language="javascript">

//----------------------------hcm--------------------


function init() { 
map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar({'zoomWorldIcon': true}),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.LayerSwitcher()
],
maxExtent: new OpenLayers.Bounds(683720.4375, 1189373.625, 686668.75, 1194099.875),
maxResolution: "auto", 
projection:"EPSG:32648", 
numZoomLevels: 12,
units: 'm',
displayProjection: new OpenLayers.Projection("EPSG:32648")
});

var urlmapfile = "http://localhost:8080/geoserver/geohcm/wms"

var format="image/png";

base = new OpenLayers.Layer.WMS(
"Thửa đất", urlmapfile,
{
LAYERS: 'geohcm:q1',
transparent:"true",
format: format
},
{singleTile: true, ratio: 1, isBaseLayer: true} 
);
map.addLayer(base);

var lon = 106.67426;
var lat = 10.80740;

var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:32648"), map.getProjectionObject());
map.setCenter (lonLat);

}
//----------------end init--------------------

</script>
</head>
<body id="body" onload="init()">
<div id="title">Geoserver Layer: Soiqualang_Chentreu</div>
<div id="map" style="width: 800px; height: 500px;"></div>
</body>
</html>
Lưu lại thành file q1.html và chạy thử
Kết quả:

Muốn hiểu rõ ý nghĩa từng lệnh các bạn phải đọc tài liệu ở trên nhé.
Giờ ta đã có 1 cái bản đồ zoom ra zoom vô chơi rùi.


Phần 2: SQL và PHP
A. SQL
Chắc trước khi bắt đầu cái hướng dẫn này các bạn đã đọc xong cái tài liệu sql và pgsql mình gửi rồi phải không?
Ta mở phần mềm Postgresql lên, chọn bảng muốn truy vấn và nhấn Ctrl E để mở hộp thoại querry lên. Nhập lệnh vô và nhấn F5.



Ta ôn lại nhé: Quan trọng nhất là lệnh SELECT
Ví dụ:
-Tìm tất cả thông tin có trong bảng q1
Select * from q1;
Thêm điều kiện: where
-Tìm những thửa nằm ở đường Pasteur
Select * from q1 where ten_duong= ‘Pasteur’;
-Tìm những thửa nằm ở đường có tên bắt đầu bằng Pa (phân biệt Pa và pa)
Select * from q1 where ten_duong like ‘Pa%’;
-Tìm những thửa nằm ở đường có tên bắt đầu bằng Pa (không phân biệt Pa và pa)
Select * from q1 where ten_duong ilike ‘pa%’;
Và câu truy vấn thửa đất đầy đủ chúng ta sẽ dùng
Select * from q1 where ten_phuong=’tên phường’ and so_to=’số tờ’ and so_thua=’số thửa’;
Như vậy, để truy vấn nhiểu điều kiện ta sẽ dùng từ nối AND giữa các điều kiện trong mệnh đề where.
Nhớ các câu truy vấn nhé, ta sẽ gặp lại nó ở phần PHP.

B. PHP
Bạn đã đọc tài liệu về PHP chưa? Nếu chưa thì bây giờ hãy đọc cho hiểu và thực hành những gì trong đó đi để bắt đầu tiếp phần hướng dẫn này.
Giờ ta cùng ôn lại nhé:
Nội dung trang php sẽ được nằm trong thẻ tab <?php …nội dung…..?>
Khai báo biến trong php ta dùng kí hiệu $
Ví dụ: biến x=10 tai khai báo $x=10;
$gisvn= “Dien dan gis Viet Nam”;
Muốn xuất biến ta dùng lệnh echo
Ví dụ: echo $gisvn thì trang web sẽ xuất hiện dòng chữ: Dien dan gis Viet Nam

Bài toán đặt ra: Nhiều bạn cứ chăm chăm tìm hiểu cái hàm tìm kiếm trong openlayers hay của geoserver trong khi đó, các bạn quên mất là mình đang làm web, chỉ thêm yếu tố gis vào thôi. Do vậy , ở đây mình chỉ dùng Geoserver để tạo dịch vụ cung cấp bản đồ, Openlayer để thể hiện bản đồ lên web, còn phần dữ liệu thuộc tính thì mình dùng dùng một trang web bình thường.

1. Bắt đầu truy vấn CSDL cho web.
- Đầu tiên ta cần khai báo kết nối CSDL cho trang web.
Ta dùng php để khai báo: Bạn có thể tham khảo tại trang chủ của php
<?php
// Database connection settings
define("PG_DB" , "thuadatq1");
define("PG_HOST", "localhost"); 
define("PG_USER", "postgres");
define("PG_PORT", "5432"); 
define("TABLE", "q1");
define("PG_PASS","2679191"); 
?>
Nhìn chắc bạn cũng hiểu ý nghĩa của từng dòng rồi phải không? Mình không cần giải thích gì thêm nghen.
Trong Notepad bạn tạo 1 file mới, dán cái đoạn ở trên vào và lưu thành taplam1.php
Bây giờ ta thử truy vấn CSDL.
Các bạn còn nhớ các câu lệnh SQL khi nãy ta ôn lại chứ, bây giờ tha hồ làm thử.
Trong cặp tab php ở trên, ta thêm tiếp đoạn lệnh sau:

$sql="SELECT distinct ten_phuong 
FROM ".TABLE;
$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS." host=".PG_HOST." user=".PG_USER);
$query = pg_query($dbcon,$sql); 
while($kq=pg_fetch_assoc($query)) {
echo $kq[ten_phuong]."<br>";
}
pg_close($dbcon);
$sql ta sẽ lưu câu lệnh truy vấn, kết quả câu lệnh trên sẽ xuất ra tất cả các tên phường của quận 1.

Full code:


Kết quả khi chạy web:

Các bạn nhớ ngâm cứu kĩ cái ví dụ ở trên nha, vì nó là cái cơ bản nhất trong truy vấn CSDL web đấy, nếu làm web động, các bạn sẽ phải làm nó hoài hoài.


2. Truyền giá trị trong php
Cái này để tuyền giá trị khi người dùng nhập vào để truy vấn, dạng như:



Ví dụ: Các bạn tạo file input.html, ở đây các bạn tạo form html như hình trên.
Yêu cầu các bạn xem lại tài liệu HTML nhé.
Full code:

Ở đây mình dùng table để định dạng cho nó ngay ngắn một xíu.
Kết quả khi chạy web:


Mình cố tình để cho các bạn phải nhập code vào, các bạn có thấy vấn đề gì không?
1,2,3…nhớ lại
Ngay chỗ select box, các bạn phải nhập thủ công từng tên phường một, giả sử dữ liệu các bạn lớn, các bạn có hàng nghìn tên phường thì thế nào?

Bây giờ ta sẽ thấy sự hay ho của lập trình web động, thay vì phải ngồi thủ công nhập tên phường như thế (vừa mất thời gian, vừa không chính xác), ta sẽ truy vấn CSDL ra, các bạn nhớ cái ví dụ trước của mình không? Truy vấn tên phường đó. Giờ là lúc áp dụng.
Các bạn save as cái file vừa rồi của các bạn thành file taplam2.php, rồi khai báo kết nối CSDL như taplam1.php ở ngay đầu trang luôn, nhớ đóng thẻ php lại nhé.
Chúng ta thay thế cái select box cũ thành cái select box đã kết hợp CSDL như sau:
Xóa dòng này

Và thay thế như sau:




Fullcode:
<?php
// Database connection settings
define("PG_DB" , "thuadatq1");
define("PG_HOST", "localhost"); 
define("PG_USER", "postgres");
define("PG_PORT", "5432"); 
define("TABLE", "q1");
define("PG_PASS","2679191"); 
?>
<table>
<form action="xuli.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td>
Phường xã
</td>
<td>
<select name="phuongxa">
<?php

$sql="SELECT distinct ten_phuong 
FROM ".TABLE;
$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS." host=".PG_HOST." user=".PG_USER);
$query = pg_query($dbcon,$sql); 
while($kq=pg_fetch_assoc($query)) {
//echo $kq[ten_phuong]."<br>";
echo "<option value='".$kq[ten_phuong]."'>".$kq[ten_phuong]."</option>";
}
pg_close($dbcon);

?>
</select>
</td>
</tr>
<tr>
<td>Số tờ:</td>
<td>
<input name="soto" type="text"/>
</td>
</tr>
<tr>
<td>Số thửa:</td>
<td>
<input name="sothua" type="text"/>
<input name="timkiem" type="submit" value="Tìm kiếm">
</td>
</tr>
</form>
</table>
Và đây là kết quả:




Các bạn có để ý thấy dòng:
<form action="xuli.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
Mình có ghi action=”xuli.php” và method="post" không?

File xuli.php mình sẽ là nơi xử lí những thông tin từ file taplam2.php gửi đến chẳng hạn như xuất những thông tin do người dùng nhập từ taplam2.php hay tạo câu truy vấn CSDL.
(Để hiểu rõ hơn chịu khó đọc tài liệu nhé)
Ví dụ trang xuli.php để thể hiện những gì người dùng nhập vào:


$sothua=addslashes($_POST['sothua']); có nghĩa là ta sẽ gán cho biến $sothua giá trị của cái textbox có tên sothua ở bên file taplam2.php bằng phương pháp POST

Khi nhập vào bên file taplam2.php

Kết quả trả về bên file xuli.php

Vậy là xong phần truyền trị.

Bây giờ đã có đủ “công lực” rồi, ta sẽ đi giải quyết vấn đề của bài toán tìm kiếm trên webgis.





Phần 3: GIẢI QUYẾT BÀI TOÁN
A. Tạo câu truy vấn từ các dữ liệu người dùng nhập vào.
Ta nhớ cấu trúc truy vấn nhiều điều kiện như sau:
Select * from q1 where ten_phuong=’tên phường’ and so_to=’số tờ’ and so_thua=’số thửa’;
Bây giờ ta sẽ gán các giá trị tên phương, số tờ, số thửa thành các biến do người dùng nhập vào. Thử suy nghĩ xem có những trường hợp nào sẽ xảy ra cho câu truy vấn của ta
1, 2, 3 suy nghĩ….
- Sẽ có trường hợp người dùng không nhập số tờ hoặc số thửa
à Câu truy vấn sẽ thành
Select * from q1 where ten_phuong=’tên phường’ and so_to=’’ and so_thua=’’;
Câu truy vấn bị sai đi, như vậy ta không thể gán trực tiếp biến vào câu truy vấn được, ta phải xét xem ô đó có giá trị không mới thêm vào câu truy vấn.
Do vậy mình sẽ dùng mệnh đề If để kiểm tra, nếu ô đó là rỗng thì không thêm điều kiện đó vào.

$where=””;

if($phuongxa<>""){
$where=$where."and ten_phuong='".$phuongxa."'";
}
if($soto<>""){
$where=$where."and so_to='".$soto."'";
}
if($sothua<>""){
$where=$where."and so_thua='".$sothua."'";
}
Thử nhập vào các điều kiện bên taplam2.php và echo điều kiện where ra màn hình xem.

Ta có kết quả như trên, như vậy mệnh đề where vẫn sai, do bắt đầu bằng từ and, do vậy ta phải tìm cách loại bỏ từ and đó.
Ta sẽ gán giá trị ban đầu cho $where không phải bằng rỗng “” nữa mà là 1=1
$where=”1=1”
Lúc này mệnh đề where sẽ như sau:


Vì 1=1 luôn đúng nên có cũng không sao cả.
Full code:
<?php
// Database connection settings
define("PG_DB" , "thuadatq1");
define("PG_HOST", "localhost"); 
define("PG_USER", "postgres");
define("PG_PORT", "5432"); 
define("TABLE", "q1");
define("PG_PASS","2679191"); 

$phuongxa=addslashes($_POST['phuongxa']);
$soto=addslashes($_POST['soto']); 
$sothua=addslashes($_POST['sothua']); 

//echo $phuongxa;
//echo $soto;
//echo $sothua;

$where="1=1";

if($phuongxa<>""){
$where=$where."and ten_phuong='".$phuongxa."'";
}
if($soto<>""){
$where=$where."and so_to='".$soto."'";
}
if($sothua<>""){
$where=$where."and so_thua='".$sothua."'";
}

//echo $where."<br>";

$sql="SELECT * FROM ".TABLE." WHERE ".$where;
$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS." host=".PG_HOST." user=".PG_USER);
$query = pg_query($dbcon,$sql); 

echo "<table border=\"1\">";
echo "<tr>
<th width=\"50\">Số nhà</th>
<th width=\"150\">Số tờ</th>
<th width=\"200\">Số thửa</th>
<th width=\"200\">Diện tích</th>

</tr>";


while($kq=pg_fetch_assoc($query)) {
//echo $kq[ten_phuong];
echo "<tr>
<td>", $kq['so_nha'].", Đường ".$kq['ten_duong'].", Phường ".$kq['ten_phuong'].", ".$kq['ten_quan'] ,"</td>
<td>", $kq['so_to'],"</td>
<td>", $kq['so_thua'],"</td>
<td>", $kq['dien_tich']." m<sup>2","</td>


</tr>";
}
echo"</table>";
pg_close($dbcon);
?>
Kết quả sau khi sửa trang xuli.php

(tôi định dạng xuất dữ liệu ra bảng cho nó rõ ràng)



B. Giải quyết vấn đề zoom đến đúng thửa đất truy vấn
Thông thường người ta sẽ dùng bbox để zoom đến vị trí đối tượng đó, cài này thông dụng quá nên mình nghĩ các bạn nên lên google tìm kiếm xem
Mình thì mình để ý thấy cái Permalink của Openlayers cũng làm được chuyện này nên mình nghĩ ra cách làm này.

Có bao giờ các bạn nhấp vô cái link đó chưa? Nếu bản đồ của bạn không có thì bạn add thêm control này vô openlayer: new OpenLayers.Control.Permalink(), vào control

Khi nhấp vô, các bạn nhìn lên thanh địa chỉ web sẽ có dạng:
http://localhost:999/huongdan/q1.php...59375&layers=B


Khi bạn copy địa chỉ này duyệt sang một tab khác thì nó vẫn zoom đến đúng vị trí đó và độ zoom đó. Đây chính là tính chất cuat Permalink mà ta sẽ sử dụng. ^^
Như vậy, muốn dùng cái này ta phải có thêm 2 giá trị là lon và lat (tọa độ đối tượng), còn cái zoom thì t cho giá trị nào cũng được.

Giải quyết vấn đề
Để có 2 giá trị lon, lat cho đối tượng, mình nghĩ là sẽ dùng tọa độ centroid của đối tượng đó.
Postgis có hàm lấy centroid của đối tượng là hàm: ST_Centroid


Ta sẽ dùng hàm này để lấy tọa độ gán cho hai biến lon ,lat
Biến $sql sẽ thành:
$sql="SELECT *,st_x(ST_Centroid(the_geom)) as x, st_y(ST_Centroid(the_geom)) as y FROM ".TABLE." WHERE ".$where;
Kết quả:




Hoàn thiện kết quả:
Từ file 1.html (file có bản đồ của ta), ta save as thành q1.php, dán đoạn code của cái file taplam2.php (có form để nhập điều kiện tìm kiếm vào).
Fullcode:
<?php
// Database connection settings
define("PG_DB" , "thuadatq1");
define("PG_HOST", "localhost"); 
define("PG_USER", "postgres");
define("PG_PORT", "5432"); 
define("TABLE", "q1");
define("PG_PASS","2679191"); 


?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache">
<title>Geoserver Layer: Soiqualang_Chentreu</title>
<link rel="stylesheet" href="../nhatro/OpenLayers/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="../nhatro/OpenLayers/style.css" type="text/css">

<script src="../nhatro/OpenLayers/lib/OpenLayers.js"></script>



<script language="javascript">

//----------------------------hcm--------------------


function init() { 
map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar({'zoomWorldIcon': true}),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.OverviewMap(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.LayerSwitcher()
],
maxExtent: new OpenLayers.Bounds(683720.4375, 1189373.625, 686668.75, 1194099.875),
maxResolution: "auto", 
projection:"EPSG:32648", 
numZoomLevels: 12,
units: 'm',
displayProjection: new OpenLayers.Projection("EPSG:32648")
});
//http://localhost:999/cgi-bin/mapserv.exe?map=D:/ms4w/Apache/htdocs/nhatro/wms/routing.map&LAYERS=congvien&TRANSPARENT=true&FORMA T=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=Ge tMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_i nimage&SRS=EPSG%3A32648&BBOX=106.66781361328,10.80 207729537,106.68070638672,10.81272270463&WIDTH=545 &HEIGHT=450
var urlmapfile = "http://localhost:8080/geoserver/geohcm/wms"

var format="image/png";

base = new OpenLayers.Layer.WMS(
"Đơn vị hành chính", urlmapfile,
{
LAYERS: 'geohcm:q1',
transparent:"true",
format: format
},
{singleTile: true, ratio: 1, isBaseLayer: true} 
);
map.addLayer(base);

//-----------end hcm------------------------- 


var lon = 106.67426;
var lat = 10.80740;

var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:32648"), map.getProjectionObject());
map.setCenter (lonLat);

}
//----------------end init--------------------

</script>
</head>
<body id="body" onload="init()">
<div id="title">Geoserver Layer: Soiqualang_Chentreu</div>
<table>
<tr>
<td> 
<div id="map" style="width: 800px; height: 500px;"></div>
</td>
<td>
<table>
<form action="xuli.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
<tr>
<td>
Phường xã
</td>
<td>
<select name="phuongxa">
<?php

$sql="SELECT distinct ten_phuong 
FROM ".TABLE;
$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS." host=".PG_HOST." user=".PG_USER);
$query = pg_query($dbcon,$sql); 
while($kq=pg_fetch_assoc($query)) {
//echo $kq[ten_phuong]."<br>";
echo "<option value='".$kq[ten_phuong]."'>".$kq[ten_phuong]."</option>";
}
pg_close($dbcon);

?>
</select>
</td>
</tr>
<tr>
<td>Số tờ:</td>
<td>
<input name="soto" type="text"/>
</td>
</tr>
<tr>
<td>Số thửa:</td>
<td>
<input name="sothua" type="text"/>
<input name="timkiem" type="submit" value="Tìm kiếm">
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</body>
</html>
File xuli.php, ta sẽ tạo thành link đến file q1.php có cấu trúc y như permalink
Fullcode:
<?php
// Database connection settings
define("PG_DB" , "thuadatq1");
define("PG_HOST", "localhost"); 
define("PG_USER", "postgres");
define("PG_PORT", "5432"); 
define("TABLE", "q1");
define("PG_PASS","2679191"); 

$phuongxa=addslashes($_POST['phuongxa']);
$soto=addslashes($_POST['soto']); 
$sothua=addslashes($_POST['sothua']); 

//echo $phuongxa;
//echo $soto;
//echo $sothua;

$where="1=1";

if($phuongxa<>""){
$where=$where."and ten_phuong='".$phuongxa."'";
}
if($soto<>""){
$where=$where."and so_to='".$soto."'";
}
if($sothua<>""){
$where=$where."and so_thua='".$sothua."'";
}

//echo $where."<br>";

$sql="SELECT *,st_x(ST_Centroid(the_geom)) as x, st_y(ST_Centroid(the_geom)) as y FROM ".TABLE." WHERE ".$where;
$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS." host=".PG_HOST." user=".PG_USER);
$query = pg_query($dbcon,$sql); 

echo "<table border=\"1\">";
echo "<tr>
<th width=\"50\">Số nhà</th>
<th width=\"150\">Số tờ</th>
<th width=\"200\">Số thửa</th>
<th width=\"200\">Diện tích</th>
<th width=\"200\">Vị trí</th>
</tr>";


while($kq=pg_fetch_assoc($query)) {
//echo $kq[ten_phuong];
echo "<tr>
<td>", $kq['so_nha'].", Đường ".$kq['ten_duong'].", Phường ".$kq['ten_phuong'].", ".$kq['ten_quan'] ,"</td>
<td>", $kq['so_to'],"</td>
<td>", $kq['so_thua'],"</td>
<td>", $kq['dien_tich']." m<sup>2","</td>
<td>", "<a href='q1.php?zoom=9&lat=".$kq[y]."&lon=".$kq[x]."'>Link</a>","</td>

</tr>";
}
echo"</table>";
pg_close($dbcon);
?>


Kết quả:

a/ tìm kiếm thửa đất thuộc phường Cầu Kho có số tờ =2 và số thửa =3


Kết quả tìm kiếm:


b/ Tìm kiếm tất cả thửa đất phường Cô Giang có số tờ =3


Kết quả:



Đến đây là kết thúc bài hướng dẫn, bạn nào chịu khó theo dõi từ đầu đến cuối thì hưởng thành quả thui. (công sức cả ngày của mình đó, ngồi làm demo còn nhanh hơn viết cái này). Chúc các bạn làm được nha.
Mình chỉ hướng dẫn cái sườn thui, chưa có code giao diện gì hết nên…xấu vậy đó, các bạn đọc thêm tài liệu mần mò thêm nghen.
Đối với cái đề tài thửa đất này, các bạn nên làm thêm cái cập nhật thuộc tính nữa, đọc tài liệu về sql mình đưa đó.
Các chức năng như tạo các nút zoom, pan, measure thì openlayer có ví dụ, các bạn tự đọc và tìm hiểu nhé.

Hi vọng các bạn sẽ có một cái webgis thật hoành tráng, có kết quả nhớ comment bên dưới nghen.
Chúc mọi người ngủ ngon. Có gì mai mình up cái clip lên nhìn cho nó trực quan hơn.
P/s: Sr viết một lèo như vậy nha, tại mình không có thường xuyên lên mạng nên làm một lèo luôn. Nếu ai có thắc mắc gì thì cứ viết ở đây. Mình lên mạng thấy thì mình sẽ trả lời, hoặc ai giỏi webgis thì chỉ dùm các bạn nha.


Nguồn: trangxoa.com http://trangxoa.com/web/index.php?pages=gis&id=15
soiqualang_chentreu [trangxoa.com] 
Follow us: soiqualang.chentreu on Facebook



Các tin khác...


Write a commnent about Hướng dẫn xây dựng chức năng tìm kiếm cho web gis - demo webgis tra cứu thửa đất !, thanks.

Tìm kiếm

Mục lục
 
Lịch âm - dương
Nhấp chuột vô ngày để xem chi tiết ^^

gia dinh toi do

Thống kê truy cập

DMCA.com


eXTReMe Tracker

Copyright © 2012 - Soiqualang_Chentreu
Trắng Xóa - Hướng dẫn xây dựng chức năng tìm kiếm cho web gis - demo webgis tra cứu thửa đất