Lập trình webgis với ngôn ngữ PHP( Mapserver + postgresql)

Tài liệu hướng dẫn chi tiết cách viết 1 trang web có chức năng:+ Làm việc, thao tác với bản đồ;+ Xây dựng cơ sở dữ liệu không gian, phi không gian+ Truy vấn cơ sở dữ liệu và hiển thị trên bản đồcó bản doc để copy code

LẬP TRÌNH WEBGIS TRÊN MAPSERVER SỬ DỤNG

PHP/POSTGRESQL

NGUYỄN TÁ NAM – NAMNGUYENKHTN@GMAIL.COM

Mục Lục

Mục Lục 1

Phần 1: Lập trình WebGIS trên MapServer với PHP/PostgreSQL 3

Chương 1: Giới thiệu chung về GIS và WebGIS 3

Chương 2: Giới thiệu chung về các ngôn ngữ lập trình được sử dụng và CSDL PostgreSQL 5 2.1 Các ngôn ngữ lập trình được sử dụng 5

2.2 Hệ quản trị cơ sở dữ liệu PostgreSQL 6

Chương 3: Tổng quan về MS4W và thư viện OpenLayer 11

3.1 MS4W 11

3.2 Thư viện OpenLayer 13

Chương 4: Xây dựng hệ thống người dùng, quản lý người dùng 14

Mục tiêu 14

4.1 Xây dựng database chứa thông tin người dùng 14

4.2 Xây dựng phân quyền người dùng và các file chức năng 15

Chương 5: Xây dựng và làm việc với bản đồ 22

Mục tiêu 22

5.1 Tạo mapfile 22

5.2 Thiết kế giao diện cho Webgis (xây dựng file mapview.php) 24

5.3 Xây dựng chức năng tìm kiếm cho bản đồ 31

Chương 6: Xây dựng, tương tác và xử lý dữ liệu 35

Mục tiêu 35

6.1 Nhập dữ liệu dạng shapefile vào Postgres 35

6.2 Nhập dữ liệu dạng csv vào Postgres 38

6.3 Nhập dữ liệu trực tiếp qua giao diện web 42

6.4 Xuất dữ liệu trong csdl ra file csv và lưu trữ trên máy tính 45

6.5 Import shapefile vào postgres qua giao diện web 47

6.6 Export shapefile từ postgres và cho download về máy tính 51

6.7 Sử dụng dữ liệu trong csdl để vẽ biểu đồ 56

6.8 Nội suy dữ liệu 68

Phần 1: Lập trình WebGIS trên MapServer với PHP/PostgreSQL

Chương 1: Giới thiệu chung về GIS và WebGIS

Kiến trúc web của hệ thống thông tin dữ liệu không gian cũng gần giống như kiến trúc dành cho một hệ thống thông tin web cơ bản khác, ngoại trừ có sử dụng kỹ thuật GIS Có nhiều dạng công nghệ cho việc thành lập web cho thông tin không gian như: MapServer, GeoServer, ArcGIS Server,…

Cơ sở dữ liệu không gian sẽ được dùng để quản lý và truy xuất dữ liệu không gian, được đặt trên Data Server Nhà kho hay nơi lưu trữ (Clearing House) được dùng để lưu trữ và duy trì siêu dữ liệu Metadata về những dữ liệu không gian tại những Data Server khác nhau Dựa trên những thành phần quản lý dữ liệu, ứng dụng Server và

mô hình Server được dùng cho ứng dụng hệ thống để tính toán thông tin không gian qua các hàm cụ thể Tất cả kết quả tính toán của ứng dụng Server sẽ được gởi đến Web Server để thêm vào các gói HTML, gởi cho phía client và hiển thị nơi trình duyệt web.

a) Cilent gửi yêu cầu của người sử dụng thông qua giao thức HTTP đến Web Server b) Web Server nhận yêu cầu của người dùng từ cilent, xử lý và chuyển tiếp yêu cầu đến ứng dụng trên Server có liên quan.

c) Application Server (chính là các ứng dụng GIS) nhận các yêu cầu cụ thể đối với các ứng dụng và gọi các hàm có liên quan để tính toán xử lý Nếu có yêu cầu dữ liệu

nó sẽ gửi yêu cầu dữ liệu đến Data Exchange Center (trung tâm trao đổi dữ liệu) d) Data Exchange Center nhận yêu cầu dữ liệu, tìm kiếm vị trí dữ liệu, sau đó gửi yêu cầu dữ liệu đến Data Server chứa dữ liệu cần tìm.

e) Data Server tiến hành truy vấn dữ liệu cần thiết và trả dữ liệu này về cho Data Exchange Center.

f) Data Exchange Center nhận nhiều nguồn dữ liệu từ Data Server, sắp xếp logic dữ liệu theo yêu cầu và trả dữ liệu về cho Application Server.

g) Application Server nhận dữ liệu trả về từ các Data Exchange Center và đưa chúng đến các hàm cần sử dụng, xử lý, trả kết quả về Web Server

h) Web Server nhận kết quả xử lý, thêm vào các code HTML, PHP,… để có thể hiển thị lên trình duyệt, gửi trả kết quả về cho trình duyệt dưới dạng các trang web Kiến trúc 3-tier gồm 3 thành phần cơ bản, đại diện cho 3 tầng:

1) Database (Data tier): là nơi lưu trữ các dữ liệu địa lý bao gồm các dữ liệu không gian và phi không gian Các dữ liệu này được quản trị bởi các hệ quản trị cơ sở dữ liệu như: Oracle, MS SQL Server, Esri SDE, PostgreSQL,… hoặc là các dạng file dữ liệu như: Shapefile, Tab, XML,… Các dữ liệu này được thiết kế cài đặt và xây dựng theo từng quy trình cụ thể Tùy theo quy mô và yêu cầu của hệ thống mà tổ chức lựa chọn công nghệ quản trị cơ sở dữ liệu cho phù hợp.

2) Application Server (Bussiness tier): thường được tích hợp trong một Webserver nào đó, ví dụ như các Web Server nổi tiếng Apache Tomcat, Internet Information Server Đó là một ứng dụng phía Server nhiệm vụ chính của nó là tiếp nhận các yêu cầu từ client, lấy dữ liệu từ phía cơ sở dữ liệu theo yêu cầu client, trình bày dữ liệu theo cấu hình định sẵn hoặc theo yêu cầu của client và trả kết quả về theo yêu cầu

3) Client (Presentation tier): thông thường đơn thuần là một Browser như Internet Explorer, FireFox, Google Chome,… để mở các trang web theo URL định sẵn Các ứng dụng client có thể là 1 Website, Applet, Flash,… được viết bằng các công nghệ chuẩn mà W3C đã chứng thực Các client đôi khi cũng là một ứng dụng Desktop tương tự như phần mềm MapInfo, ArcMap,…

Chương 2: Giới thiệu chung về các ngôn ngữ lập trình được sử dụng và CSDL PostgreSQL

2.1 Các ngôn ngữ lập trình được sử dụng

2.1.1 Ngôn ngữ HTML

- HTML (Hyper Text Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì HTML đang được phát triển tiếp với phiên bản hiện tại HTML5 đã mang lại diện mạo mới cho Web.

- Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản –

có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp.

2.1.2 Ngôn ngữ Java

- Java là một ngôn ngữ lập trình dạng lập trình hướng đối tượng (OOP) Khác với phần lớn ngôn ngữ lập trình thông thường, thay vì biên dịch mã nguồn thành mã máy hoặc thông dịch mã nguồn khi chạy, java được thiết kế để biên dịch mã nguồn thành bytecode, bytecode sau đó sẽ được môi trường thực thi (runtime environment) chạy Bằng cách này, Java thường chạy chậm hơn những ngôn ngữ lập trình thông dịch khác như C++, Python, Perl, PHP, C#

- Cú pháp java được vay mượn nhiều từ C & C++ nhưng có cú pháp hướng đối tượng đơn giản hơn và ít tính năng xử l ý cấp thấp hơn Do đó việc viết một chương trình bằng java dễ hơn, đơn giản hơn, đỡ tốn công sửa lỗi hơn

2.1.3 Ngôn ngữ JavaScript

- JavaScript theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript

- Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript JavaScript có một số đối tượng định nghĩa sẵn, bao gồm mảng ( Array), đối tượng đại số Bool (Boolean), đối tượng ngày tháng (Date), đối tượng hàm (Function), đối tượng toán học(Math), đối tượng số (Number), đối tượng đối tượng (Object), đối tượng biểu thức tìm kiếm (RegExp) và đối tượng chuỗi ký tự ( String) Các đối tượng khác là đối tượng thuộc phần mềm chủ (phần mềm

áp dụng JavaScript - thường là trình duyệt).

2.1.4 Ngôn ngữ PHP

- PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới.

2.2 Hệ quản trị cơ sở dữ liệu PostgreSQL

2.2.1 Tổng quan

- PostgreSQL là hệ quản trị cơ sở dữ liệu được viết theo hướng mã nguồn mở và rất mạnh mẽ Hệ quản trị cơ sở dữ liệu này đã có hơn 15 năm phát triển, đồng thời

kiến trúc đã được kiểm chứng và tạo được lòng tin với người sử dụng về độ tin cậy, tính toàn vẹn dữ liệu, và tính đúng đắn PostgreSQL có thể chạy trên tất cả các hệ điều hành, bao gồm cả Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64), và Windows Do nó hoàn toàn tuân thủ ACID, có hỗ trợ đầy đủ các foreign keys, joins, views, triggers, và stored procedures (trên nhiều ngôn ngữ) Hệ quản trị này còn bao gồm các kiểu dữ liệu SQL: 2008 như INTEGER, NUMBER, BOOLEAN, CHAR, VARCHAR, DATE INTERVAL, và TIMESTAMPs PostgreSQL cũng hỗ trợ lưu trữ các đối tượng có kiểu dữ liệu nhị phân lớn, bao gồm cả hình ảnh, âm thanh, hoặc video Hệ quản trị cơ sở dữ liệu này được sử dụng thông qua giao diện của các ngôn ngữ C / C + +, Java, Net, Perl, Python, Ruby, Tcl, ODBC…

- Là một hệ quản trị cơ sở dữ liệu mạnh, PostgreSQL tự hào có các tính năng phức tạp như kiểm soát truy cập đồng thời nhiều phiên bản (MVCC), khôi phục dữ liệu tại từng thời điểm (Recovery), quản lý dung lượng bảng (tablespaces), sao chép không đồng bộ, giao dịch lồng nhau (savepoints), sao lưu trực tuyến hoặc nội bộ, truy vấn phức tạp và tối ưu hóa, và viết trước các khai báo để quản lý và gỡ lỗi PostgreSQL hỗ trợ bộ ký tự quốc tế, hỗ trợ bảng mã nhiều byte, Unicode, và cho phép định dạng, sắp xếp và phân loại ký tự văn bản (chữ hoa, thường) PostgreSQL còn được biết đến với khả năng mở rộng để nâng cao cả về số lượng dữ liệu quản

lý và số lượng người dùng truy cập đồng thời Đã từng có những hệ thống PostgreSQL hoạt động trong môi trường thực tế thực hiện quản lý vượt quá 4 terabyte dữ liệu.

Hình 2.2.1 Màn hình cài đặt ban đầu

Hình 2.2.2 Nhập password cài đặt

// Nên để password là admin

Hình 2.2.3 Kết thúc cài đặt chuyển sang cái plugin postgis

- Tích chọn hộp thoại trên để tiếp tục tải về và cài đặt Postgis extention:

Hình 2.2.4 Màn hình cài đặt postgis

Hình 2.2.5 Chọn extention trong list

- Ấn next và chờ bộ cài đặt download và cài postgis extention.

- Chúng ta sẽ tương tác với postgres qua pgAdmin III.

Chương 3: Tổng quan về MS4W và thư viện OpenLayer

3.1 MS4W

3.1.1 Tổng quan

- WebGIS là xu hướng phổ biến thông tin mạnh mẽ trên Internet không chỉ dưới góc độ thông tin thuộc tính thuần túy mà nó kết hợp được với thông tin không gian hữu ích cho người sử dụng Tiếp cận công nghệ WebGIS phù hợp là yếu tố quan trọng để xây dựng một WebGIS hoàn chỉnh và có khả năng đáp ứng phát triển trong tương lai Đề tài này ứng dụng công nghệ mã nguồn mở GeoServer để xây dựng WebGIS.

- Mã nguồn mở MapServer được phát triển bởi UMN (University of Minnesota )

Hỗ trợ nhiều môi trường phát triển khác nhau như: PHP, Python, Perl, Java, C# Hỗ trợ nhiều hệ điều hành: Linux, Windows, Mac OS X, Solaris Hỗ trợ nhiều định dạng dữ liệu ESRI shapfiles, PostGIS, ESRI ArcSDE, OracleSpatial, MySQL Tương thích với OGC.

- Là gói ứng dụng được cung cấp để cài đặt và sử dụng Mapserver trên nền tảng window Trong gói ms4w tiêu chuẩn thường bao gồm các thành phần sau:

 Apache HTTP Server version 2.2.22

 PHP version 5.4.3

 MapServer CGI 6.0.3

 MapScript 6.0.3 (CSharp, Java, PHP, Python)

 Includes support for Oracle 11g, and SDE data (if you have associated client/dlls)

 MrSID support built-in

 GDAL/OGR 1.9.1 and Utilities

Trong thư mục ms4w ta sẽ thấy được 1 file ‘apache-install.bat’.

- Vào start tìm kiếm cmd (command prompt) và chạy dưới quyền admin (Run as administrator) Đưa con trỏ tới thư mục ms4w vừa extract và chạy file apache- install.bat:

Hình 3.1.2 Chạy apache-install.bat bằng cmd

- Sau khi chạy xong ta vào kiểm tra xem ms4w đã được cài hay chưa bằng cách: vào Run gõ services.msc

Hình 3.1.3 Kiểm tra apache ms4w đã hoạt động

- Nếu ta thấy như trên là ms4w đã được cài đặt Nếu k ta cần restart máy để apache hoạt động (Automatic startup).

3.2 Thư viện OpenLayer

- OpenLayers là bộ thư viện JavaScript hỗ trợ hiển thị bản đồ trên các ứng dụng web, được viết bằng ngôn ngữ JavaScript OpenLayers không chỉ là thư viện cung cấp một API JavaScript mà nó có thể kết hợp các bản đồ từ nhiều nguồn khác nhau vào trang web hoặc ứng dụng.

- Đặc điểm nổi bật của thư viện OpenLayers:

o Bộ thư viện mã nguồn mở.

o Tuân theo chuẩn quốc tế.

o Hỗ trợ nhiều loại dịch vụ (WMS, WFS, WCS,…) và Map Server như ArcGIS, GeoServer, MapServer.

o Đọc được các định dạng trên Google Map, OpenStreetMap,…

o Hỗ trợ xây dựng các thao tác trên bản đồ.

Chương 4: Xây dựng hệ thống người dùng, quản lý người dùng

Mục tiêu

- Xây dựng trang giao diện thân thiện và dễ dàng sử dụng đối với người dùng

- Phân quyền đăng nhập đối với người dùng

- Xây dựng trang đăng ký người dùng mới

- Xây dựng trang chức năng chỉnh sửa đối với quyền admin

- Xây dựng trang hiển thị bản đồ đối với người dùng.

4.1 Xây dựng database chứa thông tin người dùng

- Trong Database webgis, ta tạo bảng với tên là account để chứa các thông tin người dùng như sau.

CREATE TABLE account

(

id integer NOT NULL DEFAULT nextval('registration_id_seq'::regclass),

fullname character(100) NOT NULL,

email character(100) NOT NULL,

username character(100) NOT NULL,

password character(100) NOT NULL,

role character(1),

CONSTRAINT registration_pkey PRIMARY KEY (id )

)

- Tạo 2 tài khoản với 2 quyền 1 và quyền 2

Hình 4.1.1 Dữ liệu người dùng trong postgres

4.2 Xây dựng phân quyền người dùng và các file chức năng

- File connection.php: kết nối với csdl PostgreSQL

- File function.php: chứa lệnh chức năng

- File login.php: giao diên đăng nhập

- File logout.php: chức năng thoát khỏi đăng nhập

- File admin.php: giao diện cho phân quyền admin

- File tamdao.php: giao diện cho phân quyền người dùng.

Kết nối với CSDL PostgreSQL

- Dùng câu lệnh sau để kết nối với CSDL PostgreSQL

<?php

$host = "host=localhost";

$port = "port=5432";

$dbname = "dbname=webgis";

$login = "user=postgres password=postgres";

$db = pg_connect( "$host $port $dbname $login" );

- Để kiểm tra chắn là bạn đã điền thông tin đăng nhập hay chưa, nếu chưa sẽ đưa ra thông báo

4.2.2 Xây dựng trang login.php

- Tạo style hiển thị

<style>

body{

background-image: du-lich-tam-dao-vinh-phuc.jpg);

background-repeat: no-repeat;

background-size: cover;

Hình 4.2.1 Giao diện đăng nhập

- Giao diện trang đăng nhập Ở trên có nút “Click On Register”, nếu bạn chưa có tài khoản thì các bạn click vào đây và sẽ được chuyển đến trang đăng ký tài khoản mới register.php

4.2.3 Xây dựng trang logout.php

- Code trang logout

4.2.4 Xây dựng trang admin.php

- Với trang admin.php, ta sẽ xây dựng để cho admin có 1 số quyền thao tác với trang web mà người dùng không được phép như quyền cập nhật đưa dữ liểu khảo sát vào CSDL.

4.2.5 Xây dựng trang đăng ký người dùng mới

- Tạo trang đăng ký người dùng register.php với nội dung.

<script type="text/javascript">

var reg_fullname = /^[a-zA-Z ]+$/;

var reg_email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;var reg_username = /^[a-zA-Z0-9_\.\-]+$/;

var reg_password = /^[a-zA-Z0-9~!@#$%^&*()_+|]+$/;

$sql = "INSERT INTO account (fullname, email, username, password) VALUES

('$fullname', '$email', '$username', '$password')";

name="register" id="register">

<div id="div_register_header"><label>Register</label><br /></div>

<hr />

<div id="div_register_field">

<label id="lb_fullname" >Full Name:</label><br />

<input name="tb_fullname" id="tb_fullname" type="text"

onchange="regexFullName()" onkeydown="regexFullName()" /><br />

<label id="lb_email" >Email:</label><br />

<input name="tb_email" id="tb_email" type="text" value=""

onchange="regexEmail()" onkeypress="regexEmail()" /><br />

<label id="lb_username" >Username:</label><br />

<input name="tb_username" id="tb_username" type="text"

-moz-border-radius: 5px; /* for Mozilla browsers */

-webkit-border-radius: 5px; /* for webkit browsers (Chrome, Safari) */

border-radius: 5px; /* for Opera and others */

border: 1px solid gray;

background: #EAEAEA;

padding: 5px 10px;

- Style cho trang đăng ký, liên kêt trong file register.css

- Giao diện trang đăng ký người dùng mới, sau khi đăng ký, hệ thông sẽ báo thành công và đưa bạn quay lại trang login để đăng nhập vào.

Chương 5: Xây dựng và làm việc với bản đồ

- Sau khi đã có phần mềm QGIS Chúng ta tạo 1 QGIS project, chọn tất cả shapefile

và lưu mới project

- Sau khi đã lưu project, các bạn mở project lên Vào Web  Mapserver Export  đặt tên mapfile và thiết lập size, url cấu hình cho mapfile

Hình 5.1.1 Tạo mapfile bằng plugin Qgis

- Tiến hành chỉnh sửa mapfile

Sửa trong tab WEB

IMAGEPATH ‘/tmp/’ thành IMAGEPATH ‘c:/ms4w/tmp/’

IMAGEURL ‘/tmp/’ thành IMAGEURL ‘c:/ms4w/tmp’

- Như vậy ta đã tạo được 1 mapfile sử dụng shapefile trực tiếp Để mapfile được tạo sư dụng shapefile được lưu trữ trên PostgreSQL ta phải sửa liên kết trong thẻ LAYER của mapfile đến csdl PostgreSQL

Trong thẻ Layer ta sửa thành

5.2 Thiết kế giao diện cho Webgis (xây dựng file mapview.php)

- Khai báo thư viện html, và thư viện script (cần được tải về và lưu vào htdocs/js/)

<script type="text/javascript" src="js/ext-base.js"></script>

<script type="text/javascript" src="js/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="js/ext-all.css" />

<link rel="stylesheet" type="text/css" href="js/examples.css" />

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

<script src="js/proj4js-combined.js"></script>

<script src="js/proj4js-compressed.js"></script>

<script type="text/javascript" src="js/GeoExt.js"></script>

<script type="text/javascript" src="js/proj4.js"></script>

- Ở đây các file java scripts được lấy lên từ folder js đã lưu sẵn trước đó, tránh việc phải load trực tuyến (khi mất mạng)

- Download và chỉnh sửa file proxy.cgi và copy vào trong bin Thêm câu lệnh sau vào nguồn:

C:\ms4w\Apache\cgi-OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

- Code chuyển đổi hệ lưới chiếu phù hợp với lưới chiếu của OpenStreetMap (sau này chúng ta sẽ thêm Layer OSM vào làm base layer)

<script>

Proj4js.defs["EPSG:32648"] = "+proj=utm +zone=48 +ellps=WGS84

+datum=WGS84 +units=m +no_defs";

Proj4js.defs["EPSG:3857"]= "+title=GoogleMercator +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m

+nadgrids=@null +no_defs";

var extent = new

OpenLayers.Bounds(509903.269898,2353149.194808,615343.733173,2405402.875723).transform(new OpenLayers.Projection("EPSG:32648"),new

- Add layer OSM

var osm = new OpenLayers.Layer.OSM("OpenStreetMap");

5.2.4 Thêm chức năng truy vấn thông tin trên bản đồ

//Get feature info

var info = new OpenLayers.Control.WMSGetFeatureInfo({

url: 'http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/Apache/ htdocs/mapfile/commune.map ',

title: 'Identify features by clicking',

5.2.5 Thêm action toolbar chứa các thao tác bản đồ

//Add action toolbar

var ctrl, toolbarItems = [], action, actions = {};

action = new GeoExt.Action({

control: new OpenLayers.Control.ZoomToMaxExtent(),

action = new GeoExt.Action({

text: "Draw Polygon",

control: new OpenLayers.Control.DrawFeature( vector, OpenLayers.Handler.Polygon

tooltip: "draw polygon",

// check item options

group: "draw"

});

actions["draw_poly"] = action;

toolbarItems.push(action);

action = new GeoExt.Action({

text: "Draw Line",

control: new OpenLayers.Control.DrawFeature( vector, OpenLayers.Handler.Path

tooltip: "draw line",

// check item options

group: "draw"

});

actions["draw_line"] = action;

toolbarItems.push(action);

toolbarItems.push("-");

ctrl = new OpenLayers.Control.NavigationHistory(); map.addControl(ctrl);

action = new GeoExt.Action({

5.2.6 Thêm panel chứa đối tượng map

//Add Map Panel

mapPanel = new GeoExt.MapPanel({

title: "Tam Dao Map",

//Add Layer Tree Panel

layerList = new GeoExt.tree.LayerContainer({text: 'Layers',

layerStore: mapPanel.layers,

leaf: false,

expanded: true

});

layerTree = new Ext.tree.TreePanel({

title: 'Layers Tree',

Hình 5.2.1 Giao diện bản đồ

5.3 Xây dựng chức năng tìm kiếm cho bản đồ

5.3.1 Tạo form để người dùng có thể lựa chọn tìm kiếm

- Ví dụ để tìm kiếm theo tên phường (‘eng0’) ta có đoạn code sau để nhập dữ liệu:

<form action="xuli.php" method="POST" enctype="multipart/form-data"

$sql="SELECT eng FROM ".TABLE;

$dbcon = pg_connect("dbname=".PG_DB." password=".PG_PASS."

<input name="timkiem" type="submit" value="Tim Kiem">

- Sau khi đã đưa ra được kết quả tìm kiếm, người dùng click vào link sẽ đưa đến

1 trang web chứa bản đồ được đánh dấu tâm điểm của vùng được chọn (mapquery.php)

var lonLat = new OpenLayers.LonLat(<?php echo $_GET['lon']?>,<?php echo $_GET['lat']?

>).transform(new OpenLayers.Projection("EPSG:32648"),newOpenLayers.Projection("EPSG:3857"));

var markers = new OpenLayers.Layer.Markers(

Hình 5.3.1 Lựa chọn địa chỉ tìm kiếm

Hình 5.3.2 Kết quả tìm kiếm

Chương 6: Xây dựng, tương tác và xử lý dữ liệu

Mục tiêu

- Xây dựng hệ thống cơ sở dữ liệu chứa thông tin để làm việc trong khóa học

- Tương tác với định dạng phổ thông hay được sử dụng trong GIS là shapefile trực tiếp trên giao diện web (import, export, đọc dữ liệu).

- Nhập dữ liệu vào csdl qua giao diện web

- Nhập, xuất dữ liệu bằng file csv (người dùng tùy chọn)

- Từ dữ liệu đã có vẽ ra biểu đồ để phân tích dữ liệu

- Từ hệ thông dữ liệu ban đầu, sử dụng các phương pháp nội suy để tính toán dự đoán giá trị tại điểm bất kì

6.1 Nhập dữ liệu dạng shapefile vào Postgres

- Bộ dữ liệu shapefile vùng Tam Đảo là dữ liệu chuẩn để thao tác trong toàn bộ báo

cáo Để import shapefile vào csdl, chúng ta sử dụng plugin Postgis Shapefile and DBF Loader Explorer được tự động cài đặt khi postgis extention được cài đặt Bước 1: Khởi tạo 1 database với template là Postgis template:

Hình 6.1.1 Tạo database mới Bước 2: Tùy chỉnh kết nối với postgres: Chọn ‘View connection detail’ nhập user pass

như đã cái đặt:

Hình 6.1.2 Chỉnh lại cách kết nối csdl