MỤC LỤC LỜI CAM ĐOAN i MỤC LỤC ii DANH MỤC TỪ VIẾT TẮT iv DANH MỤC CÁC BẢNG v DANH MỤC HÌNH ẢNH vi LỜI CÁM ƠN 1 MỞ ĐẦU 2 1. Lý do chọn đề tài 2 2. Nội dung nghiên cứu 5 3. Phương pháp nghiên cứu 5 CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ GIS 7 VÀ WEBGIS 7 1.1 Giới thiệu công nghệ GIS 7 1.1.1 Định nghĩa GIS 7 1.1.2 Các thành phần cơ bản trong GIS 8 1.1.3 Chức năng và ứng dụng của GIS 15 1.2 WebGIS công nghệ GIS qua mạng 17 1.2.1 Khái niệm về WebGIS 17 1.2.2 Kiến trúc WebGIS 18 1.2.3 Xây dựng WebGIS Server và WebGIS Client 21 1.3 Giải pháp mã nguồn đóng và mã nguồn mở 24 1.3.1 Giải pháp mã nguồn đóng 24 1.3.2 Giải pháp mã nguồn mở 25 1.3.3 Phần mềm máy chủ GeoServer 27 CHƯƠNG 2 : XÂY DỰNG CƠ SỞ DỮ LIỆU 30 2.1 Hiện trạng nhu cầu thông tin 30 2.1.1 Nhận xét về khu vực nghiên cứu 30 2.1.2 Hiện trạng 31 2.2 Thiết kế 31 2.2.1 Thiết kế kiến trúc 31 2.2.2 Thiết kế cơ sở dữ liệu 32 2.2.3 Thiết kế lớp bản đồ với Arcgis 32 2.3 Hệ quản trị CSDL PostgreSQL 34 2.3.1 Giới thiệu 34 2.3.2 Thiết kế cơ sở dữ liệu 37 CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG WEBGIS 40 3.1 Giới thiệu về hệ thống 40 3.2 Máy chủ GeoServer 40 3.2.1 Khái quát về GeoServer 40 3.2.2 Mô hình hoạt động 41 3.2.3 Sử dụng GeoServer làm máy chủ cho bản đồ 45 3.3 Openlayers 51 3.3.1 Giới thiệu về Openlayers 51 3.3.2 Sử dụng OpenLayer tạo bản đồ 52 3.4 Xây dựng giao diện 58 3.4.1 Giao diện chính 58 3.4.2 Giao diện quản trị 60 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 62 DANH MỤC TÀI LIỆU THAM KHẢO 63 PHỤ LỤC 64
TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN THỊ HỒNG VÂN NGHIÊN CỨU XÂY DỰNG ỨNG DỤNG WEBGIS DỰA TRÊN MÃ NGUỒN MỞ Hà Nội – Năm 2015 TRƯỜNG ĐẠI HỌC TÀI NGUYÊN VÀ MÔI TRƯỜNG HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN NGUYỄN THỊ HỒNG VÂN NGHIÊN CỨU XÂY DỰNG ỨNG DỤNG WEBGIS DỰA TRÊN MÃ NGUỒN MỞ Chuyên ngành: Công nghệ thông tin Mã ngành: NGƯỜI HƯỚNG DẪN : THS VŨ VĂN HUÂN Hà Nội – Năm 2015 LỜI CAM ĐOAN Em tên là: Nguyễn Thị Hồng Vân, sinh viên lớp DH1C2 – Khoa Công nghệ thông tin - Trường Đại học Tài Nguyên Môi Trường Hà Nội Em xin cam đoan toàn nội dung đồ án em tự học tập, nghiên cứu Internet, sách tài liệu nước có liên quan Không chép hay sử dụng làm khác, tài liệu trích dẫn cụ thể Em xin chịu hoàn toàn trách nhiệm lời cam đoan trước Quý Thầy Cô, Khoa Nhà trường Hà Nội, ngày … tháng … năm 2015 Người cam đoan Nguyễn Thị Hồng Vân i MỤC LỤC LỜI CAM ĐOAN i MỤC LỤC ii DANH MỤC TỪ VIẾT TẮT iv DANH MỤC CÁC BẢNG .v DANH MỤC HÌNH ẢNH .vi LỜI CÁM ƠN MỞ ĐẦU 1.Lý chọn đề tài 2.Nội dung nghiên cứu 3.Phương pháp nghiên cứu CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ GIS .7 VÀ WEBGIS 1.1Giới thiệu công nghệ GIS 1.2WebGIS - công nghệ GIS qua mạng 17 1.3Giải pháp mã nguồn đóng mã nguồn mở 24 CHƯƠNG : XÂY DỰNG CƠ SỞ DỮ LIỆU 30 1.4Hiện trạng nhu cầu thông tin 30 1.5Thiết kế 31 1.6Hệ quản trị CSDL PostgreSQL 34 Bảng 2.1 - Table (layer) hành 38 Bảng 2.2 - Table (layer) Khu dự trữ sinh 38 Bảng 2.3 - Table (layer) Khu khai thác dầu khí .39 Bảng 2.4 - Table (layer) Vùng quản lý tích cực .39 Bảng 2.5 - Table (layer) Quản lý thông thường: 39 CHƯƠNG : XÂY DỰNG ỨNG DỤNG WEBGIS 40 1.7Giới thiệu hệ thống 40 1.8Máy chủ GeoServer 40 1.9Openlayers 51 1.10Xây dựng giao diện .58 ii KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .62 DANH MỤC TÀI LIỆU THAM KHẢO .63 PHỤ LỤC 63 iii DANH MỤC TỪ VIẾT TẮT Từ viết tắt GIS LAN GML Tiếng Anh Geographic Information System Local Area Network Geographic Markup Language Tiếng Việt Hệ thống thông tin đại lý Mạng cục Ngôn ngữ đánh dấu địa lý WMS WFS WCS SLD KML SOAP SVG CSDL Web Map Service Web Feature Service Web Coverage Service Styled Layer Descriptor Keyhole Markup Language Simple Object Access Protocol Scalable Vector Graphics Dịch vụ cung cấp đồ Dịch vụ tính Web Dịch vụ bảo đảm Web Mô tả kiểu lớp Ngôn ngữ Đánh dấu Keyhole Giao thức truy cập đối tượng đơn giản Chuẩn đồ họa Vector Cơ sở liệu iv DANH MỤC CÁC BẢNG Bảng 2.1 - Table (layer) hành 38 Bảng 2.2 - Table (layer) Khu dự trữ sinh .38 Bảng 2.3 - Table (layer) Khu khai thác dầu khí 39 Bảng 2.4 - Table (layer) Vùng quản lý tích cực 39 Bảng 2.5 - Table (layer) Quản lý thông thường: .39 v DANH MỤC HÌNH ẢNH Hình a - Bản đồ định hướng quy hoạch tổng thể biển đảo khu vực CĐ - PQ Hình b - Google Map Hình 1.1 - Mô hệ thống thông tin địa lý Hình 1.2 - Mô thành phần GIS Hình 1.3 - Các hợp phần thiết yếu cho công nghệ GIS Hình 1.4 - Bảng số hóa (Digitizer) 10 Hình 1.5 - Máy quét (Scanner) 11 Hình 1.6 - Máy in .11 Hình 1.7 - Máy vẽ 12 Hình 1.8 - Các bước xử lý ứng dụng WebGIS 19 Hình 1.9 - Các dạng yêu cầu từ phía client .20 Hình 1.10 - Mô hình WebGIS Server 21 Hình 1.11 - Mô hình WeebGIS Client 22 Hình 1.12 - Mô hình tương tác WebGIS Server WebGIS Client 23 Hình 1.13 - Phân tích liệu phía Client 23 Hình 1.14 - Cơ chế hiển thị chồng xếp liệu 24 Hình 1.15 - Kiến trúc phần mềm mã nguồn mở .26 Hình 1.16 - Kiến trúc GeoServer 28 Hình 1.17 – GeoServer 29 Hình 2.1 - Bản đồ định hướng quy hoạch tổng thể biển đảo khu vực CĐ - PQ .30 Hình 2.2 - Sơ đồ kiến trúc GIS 31 Hình 2.3 - Một số lớp ArcMap 32 Hình 2.4 - Xây dựng liệu cho lớp hành 33 Hình 2.5 - Xây dựng liệu cho lớp khai thác dầu khí 33 Hình 2.6 - Xây dựng liệu cho lớp khu dự trữ sinh 34 Hình 2.7 - Kết nối vào Hệ quản trị CSDL Postgres 35 Hình 2.8 - Các hàm truy xuất liệu không gian 36 Hình 2.9 - Tạo CSDL có tên postgis Postgres .37 Hình 2.10 -Tạo CSDL có tên postgis Postgres 37 vi Hình 2.11 - Sau import Shapefile vào 38 Hình 3.1 - Mô hình hoạt động GeoServer 41 Hình 3.2 - Các chuẩn OGC dùng GeoServer 42 Hình 3.3 - Lược đồ WMS 42 Hình 3.4 - GetMap request WMS 43 Hình 3.5 - Các định dạng liệu raster thành chuẩn OGC (WMS) .43 Hình 3.6 - Lược đồ WFS 44 Hình 3.7 - Vai trò Web Coverage Service 44 Hình 3.8 - Cấu hình Data Layer GeoServer 45 Hình 3.9 - Cấu hình Publishing Layer GeoServer 46 Hình 3.10 - Sơ đồ hoạt động Openlayer 52 Hình 3.11 - Hiển thị Layer hành lên trình duyệt web 55 Hình 3.12 - Giao diện WebGIS với layer Khu dự trữ sinh 58 Hình 3.13 - Giao diện WebGIS với layer Khu khai thác dầu khí 58 Hình 3.14 - Giao diện WebGIS với layer Khu quản lý tích cực .59 Hình 3.15 - Giao diện WebGIS với layer Khu quản lý thông thường 59 Hình 3.16 - Giao diện Login 60 Hình 3.17 - Giao diện trang quản lý khu dự trữ sinh 60 Hình 3.18 - Giao diện trang thêm thông tin thuộc tính 61 Hình 3.19 - Giao diện trang sửa thông tin thuộc tính .61 vii LỜI CÁM ƠN Trong suốt thời gian học tập trường Đại học Tài nguyên Môi trường Hà Nội em thầy cô bảo tận tình Không kiến thức chuyên môn, chuyên ngành, chia sẻ, kinh nghiệm, kỹ sống Tất điều thực hành trang quý báu, làm tảng để em đương đầu với thử thách, khó khăn bước vào môi trường đầy cạnh tranh xã hội Em xin cám ơn thầy cô, người tận tình truyền đạt cho em tri thức, kinh nghiệm quý báu Em xin gửi lời cảm ơn đến thầy cô Khoa Công nghệ Thông tin Trung tâm Công nghệ Thông tin Em xin chân thành cảm ơn thầy Vũ Văn Huân, thầy Trần Cảnh Dương người tạo điều kiện, tận tình hướng dẫn, đóng góp ý kiến bảo em suốt trình thực đề tài Em xin gửi lời cảm ơn tới thầy Trần Ngọc Huân – Khoa Tài nguyên Nước hỗ trợ em vấn đề kỹ thuật liên quan đến GIS, giúp em hoàn thiện kiến thức GIS Mặc dù cố gắng tránh khỏi sai sót trình thực Rất mong nhận ý kiến đóng góp quý báu quý thầy cô Em xin chân thành cảm ơn! Sinh viên thực Nguyễn Thị Hồng Vân Chép đè thư mục “lib” “share” thư mục \Soft\pgRouting–1.03 đến đường dẫn cài đặt PostgreSQL, ví dụ: “C:\Program Files\ PostgreSQL\8.4\” Import liệu: Khởi động PostgreSQL (pgAdminIII.exe thư mục cài đặt PostgreSQL) Kết nối đến server (nhập password có tạo lúc cài đặt) Tạo CSDL mới, ví dụ: dldbscl Import liệu từ file shape: 68 - Chạy file shp2pgsql–gui từ thư mục: C:\Program Files\PostgreSQL \8.4\bin\postgisgui\ - Chọn hình sau: Thông số SRID phải trùng với thông số lúc số hóa đồ (Khi vẽbản đồ MapInfo hệ tọa độ quy chiếu) Import tất file shape lại vào Sau import xong, CSDL xuất bảng chứa liệu: Các Table sau Import từ Shapefile: 69 c Cài đặt máy chủ GeoServer Giao diện GeoServer chuẩn bị cài đặt: 70 Chọn đường dẫn cài đặt GeoServer: 71 Chọn tên vị trí thư mục Start Menu : Chọn đường dẫn lưu JRE: 72 Chọn đường dẫn lưu thư mục GeoServer data: Điền thông tin usename, password cho quyền administration GeoServer: 73 Điền port mà GeoServer trả lời: Tiến hành cài đặt GeoServer: 74 Giao diện GeoServer: Tạo workspaces mới: Click chọn Workspaces\Add new workspace Name: tên workspaces, ví dụ: BandoDBSCL Namespace URL: địa cho namespace, ví dụ www.dulichdbscl.vn Nhấn Submit để tạo Cách tạo Workspace GeoServer: 75 Tạo Store: Click chọn Store\Add new Store\ Chọn PostGIS – PostGIS Database Code chương trình Code hiển thị đồ /* round corners of layer switcher, and make it transparent */ olControlLayerSwitcher layersDiv { border-radius: 10px 0 10px; float:right; } 76 #map { clear: both; position: relative; width: 1170px; height: 600px; border: 1px solid black; float:50% } #wrapper { width: 300px; } #popup { padding-bottom: 45px; width: 400px; } hinh{ float: left; } OpenLayers.ProxyHost = "proxy.cgi?url="; var map,info; var t = ""; var layerPoint, layer; function init() { map = new OpenLayers.Map("map", { controls: [ new OpenLayers.Control.Navigation(), 77 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.LayerSwitcher(), new OpenLayers.Control.KeyboardDefaults(), ], maxExtent: new OpenLayers.Bounds(102.4, 7.386982714771141,107.8,11.1728180000001), maxResolution: "auto", projection:"EPSG:4326", numZoomLevels: 12, units: 'm', displayProjection: new OpenLayers.Projection("EPSG:4326") }); var urlmapfile = "http://localhost:8081/geoserver/testdoan/wms" var format="image/png"; // setup single tiled layer var untiled2 = new OpenLayers.Layer.WMS( 'Khu QL thông thường', "http://localhost:8081/geoserver/testdoan/wms", { "LAYERS": 'testdoan:qlthongthuong', "STYLES": '', format: format }, { 78 singleTile: true, ratio: 1, isBaseLayer: true, yx: { 'EPSG:4326': true } } ); var untiled1 = new OpenLayers.Layer.WMS( 'Khu quản lý tích cực', "http://localhost:8081/geoserver/testdoan/wms", { "LAYERS": 'testdoan:Quanlytt', "STYLES": '', format: format }, { singleTile: true, ratio: 1, isBaseLayer: true, yx: { 'EPSG:4326': true } } ); var untiled0 = new OpenLayers.Layer.WMS( 'Khu khai thác dầu khí', "http://localhost:8081/geoserver/testdoan/wms", { "LAYERS": 'testdoan:testdoan6', "STYLES": '', format: format }, { 79 singleTile: true, ratio: 1, isBaseLayer: true, yx: { 'EPSG:4326': true } } ); var untiled = new OpenLayers.Layer.WMS( 'Khu dự trữ sinh quyển', "http://localhost:8081/geoserver/testdoan/wms", { "LAYERS": 'testdoan:testdoan5', "STYLES": '', format: format }, { singleTile: true, ratio: 1, isBaseLayer: true, yx: { 'EPSG:4326': true } } ); //tiled = new OpenLayers.Layer.WMS( map.addLayers([untiled, untiled0, untiled1, untiled2]); // map.addLayers([tiled, untiled3]); var lon = 109; var lat = 12; 80 OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger }, this.handlerOptions ); }, trigger: function(e) { var lonlat = map.getLonLatFromPixel(e.xy); alert("You clicked near " + lonlat.lat + " N, " + + lonlat.lon + " E"); } }); 81 var click = new OpenLayers.Control.Click(); map.addControl(click); click.activate(); var pop = map.popups; for(var i = 0; i