Đề tài áp dụng thay đổi style (symbology) sẵn có vào một lớp điểm

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN HỆ THỐNG TIN KHÔNG THÔNG GIAN Đề tài: ÁP DỤNG / THAY ĐỔI STYLE (SYMBOLOGY) SẴN CÓ VÀO MỘT LỚP ĐIỂM Sinh viên thực : NGUYỄN ĐÌNH NAM NGUYỄN VĂN DƯƠNG ĐẶNG MINH NGỌC Giảng viên hướng dẫn : Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D14CNPM5 Khóa : 2022 – 2023 Hà Nội, tháng năm 202 PHIẾU CHẤM ĐIỂM Sinh viên thực hiện: Họ tên Chữ ký Điểm NGUYỄN ĐÌNH NAM NGUYỄN VĂN DƯƠNG ĐẶNG MINH NGỌC Giảng viên chấm: Họ tên Giảng viên chấm : Giảng viên chấm : Chữ ký Ghi LỜI CẢM ƠN Trên thực tế khơng có thành cơng mà khơng gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập, chúng em nhận nhiều quan tâm, giúp đỡ Thầy Cơ, gia đình bạn bè Em xin chân thành gửi lời cảm ơn sâu sắc tới thầy, tận tình giảng dạy truyền đạt cho chúng em kiến thức, kinh nghiệm quý báu suốt thời gian học tập rèn luyện Sau cùng, chúng em xin kính chúc thầy cô Khoa Công Nghệ Thông Tin dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh truyền đạt kiến thức cho hệ mai sau Chúng em xin chân thành cảm ơn Danh mục từ viết tắt AI Artificial Intelligence GIS Geographic Information System CNPM Công nghệ phần mềm EPU Đại học điện lực ATM Automated teller machine ICT Công nghệ thông tin truyền thông CSDL Cơ sở liệu SHP Shapefile LỜI MỞ ĐẦU 1.Lý chọn đề tài Để hồn hồn mơn học năm 2022-2023, sinh viên cần viết báo cáo mơn học Đó lí có báo cáo này, để sử dụng QGIS, Geoserver, PostGIS, OpenLayer áp dụng xây dựng đồ đưa lên web thông qua đề tài:”Áp dụng / thay đổi style sẵn có vào lớp điểm” Do thời gian có hạn, chúng tơi khơng mong muốn xây dựng phần mềm hồn chỉnh xác, mà cố gắng áp dụng qui trình xây dựng đồ đưa lên web Những kiến thức sử dụng để xây dựng sở luật tập thu thập chủ yếu từ website QGIS,Geoserver,PostGIS, 2.Cấu trúc báo cáo Cấu trúc báo cáo sk chia thành chương chính: Chương 1: Hướng dẫn sủ dụng cài đạt Chương 2: Giới thiệu plugin Chương 3: Xây dựng hệ thống CHƯƠNG 1:HƯỚNG DẪN SỬ DỤNG VÀ CÀI ĐẶT CHƯƠNG 2:GIỚI THIỆU PLUGIN Tại điểm QGIS Bước 1: Mở lớp điểm tạo Bước 2: Kích hoạt chế độ sửa lớp điểm Trên giao diện QGIS, ta chuột trái vào lớp điểm để chọn lớp sau chọn biểu tượng bút công cụ Digitizing Toolbar Bước 3: Thêm điểm Chọn icon phím tắt Ctrl + (đây phím tắt thêm đối tượng mới, mở liệu điểm thêm điểm mới, đường thêm đường mới, vùng thêm vùng mới) Biểu tượng thêm điểm xuất , người dùng chuột trái vào cửa sổ hình vào nơi muốn thêm điểm để thêm điểm Sau chuột phải vào hình thả cửa sổ xuất với trường liệu người dùng tạo phần I, người dùng điền thơng tin vào để điểm chứa thơng tin, chọn OK ln điểm có đối tượng mà khơng có thuộc tính, thơng tin điền sau Sau kết thúc hình sk xuất điểm Để đổi kiểu điểm/style điểm, người dùng tiến hành thực số biên tập đồ Việt Nam giới thiệu Bước 3: Nhập thông tin cho điểm Trên giao diện QGIS chọn vào lớp điểm => Open Attribute Table Thu nhỏ cửa sổ Table lại để góc sau click vào điểm sk thấy điểm tơ màu vàng hình Nếu khơng thấy điểm q nhiều nhấn phím Ctrl+j để điểm trung tâm hình Tiếp theo người dùng thao tao click vào biểu tượng chiến bút Table để bật chế độ sửa table , sau người dùng click vào trường để điền thông tin Thông thường thêm điểm người dùng nhập thông tin, kể đến nước nhập trường thơng tin chính, sau thường thu thập dạng excel với nhiều trường khác sau dùng tính join để thêm thơng tin vào table cách nhanh chóng Phần sk nói rõ với video Trong trình làm sau làm xong, người dùng nên thường xuyên save table lại, sau làm xong khơng chỉnh sửa nên tắt biểu tượng bút Tạo điểm từ lớp ảnh vệ tinh (base tham khảo) Phần sk giới thiệu cho quý vị cách tạo điểm dựa vào đối tượng khác (bắt dính vào đối tượng khác có sẵn), tạo điểm dựa vào lớp đồ (Google Earth) … Ví dụ: Chúng ta sk chấm số thu hút khách du lịch Hà Nội thông qua Google Hybrid Cách lấy lớp base Google Hybrid bạn chưa biết xem lại Sau mở lớp base xong, thực bật chế độ edit lớp điểm, tương tự làm tiến hành số hóa Tạo điểm dựa lớp có sẵn Ví dụ: Ta cần tạo điểm nằm giao cắt giao đường hình phía Người dùng thao tác kích hoạt biểu tượng nam châm (bắt dính) để di chuyển đến giao điểm đường thẳng điểm nút sk xuất thêm hình vng màu tím thể bắt dính Người dùng click chuột trái vào vị trí bắt dính để thêm điểm Ngồi ra, người dùng muốn tạo điểm từ nút tạo đường thẳng dùng lệnh hộp thoại Processing Toolbox (Line to point polygon to point) Với hộp thoại người dùng có nhiều lựa chọn ví dụ tạo point theo khoảng cách line theo nút/point tạo nên line… Ấn Save bạn tạo xong Spatial Database để lưu liệu không gian Bước : Mở công cụ PostGIS Shapefile Import/Export Manager lên Công cụ cài sẵn sau bạn cài PostGIS (bạn tìm thấy Start -> PostGIS ) Chọn vào View connection details… để nhập thông tin đăng nhập vào PostGIS hình : 19 Bước : Chọn AddFile, tìm đến file shape cần add click Ok để thêm file shape vào danh sách Sau click Import để đưa shape file vào 20 Bước : Vậy đẩy xong file shape vào csdl bạn kiểm tra postgresql sk thấy tạo bảng hình 21 3.3.2 Public Data với GeoServer Ở mục sk tìm hiểu cách sử dụng Geoserver để public data chúng ta, sử dụng để show lên web, chia sẻ cho người khác dạng WMSweb map service Bước 1: Dùng trình duyệt vào Geoserver, để cổng Geoserver 8080 nên đường dẫn sk : http://localhost:8080 Đăng nhập để vào quản trị Geoserver Bước 2: Đầu tiên bạn phải tạo Workspace, nôm na vùng làm việc, sau bạn tạo phải chọn Workspace Chọn Workspace cột bên trái, phần Data, chọn Add new Workspace 22 Điền tên Namespace URI vào ô nhập ấn Submit Bước : Tiếp đến tạo Stores để trỏ đến data Chọn Store cột bên trái, chọn Add new store Ở Geoserver hỗ trợ nhiều loại data, làm việc với PostGIS nên sk chọn vào PostGIS 23 Bước : Chúng ta nhập thông số cho store chúng ta, sau nhập thành công Geoserver sk tự động load layer đưa sang trang layer, chọn public để public ln layer cần thiết Bước : Trong phần bạn sk phải định nghĩa thông số cho layer tên tuổi… Trong có phần định nghĩa hệ tọa độ, hệ tọa độ sử dụng cho đồ hệ VN-2000 UTM zone 48N, code 4326 24 Bước : Trong phần Bounding Boxes, tính tốn extent cho layer hình dưới: 25 Bước 6: Kick Save để lưu lại layer Sau lưu xong Layer sk danh sách layer hình Bước : Vậy public layer xong, bạn vào Layer Preview để xem layer 3.4.Xây dựng ứng dụng WebGIS với tính 3.4.1.Hiển thi đồ lên web Ở phần sk tìm hiểu cách đưa đồ lên web với chức hiển thị đồ biên tập trước Chúng ta cần thêm thư viện JavaScript Openlayer Chúng ta tải tại: http://openlayers.org/download/ lấy trực tiếp link đến file js không cần tải 26 Trong sử dụng JQuery bạn phải tải thêm JQuery Đầu tiên bạn tạo folder để chứa web mình, tạo file html để bắt đầu code Chúng ta sk cần add thứ sau thẻ head HTML: Quay lại thẻ Head, thêm code javascript sau: $("#document").ready(function () { var format = 'image/png'; var bounds = [105.75872802734375, 21.009902954101562, 105.82250213623047, 21.049697875976562 ]; var Roads = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/quanlau/wms', 27 params: { 'FORMAT': format, 'VERSION': '1.1.1', STYLES: '', LAYERS: 'quanlau:roads', }})}); Trong đó: var bounds = [105.75872802734375, 21.009902954101562, 105.82250213623047, 21.049697875976562 ]; để xác định extent đồ muốn hiển thị var quanlau = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/quanlau/wms', params: { 'FORMAT': format, 'VERSION': '1.1.0', STYLES: '', LAYERS: 'quanlau:quanlau', }})}); Đây khai báo layer có GeoServer, kiểu layer sử dụng Image kiểu source ImageWMS Trong OpenLayer sk có kiểu layer là: 28  ol.layer.Tile : hiển thị đồ dạng đồ nền, xác định cấp độ zoom phụ thuộc vào tỷ lệ đồ  ol.layer.Image: Hiển thị đồ dạng ảnh với mức độ zoom độ phân giải tùy ý  ol.layer.Vector: đưa layer dạng vector url: ‘'http://localhost:8080/geoserver/quanlau/wms'; link đến service Geoserver LAYERS: ‘quanlau’ tên Layer Geoserver Ngồi cịn số tùy chọn khác format ảnh, chọn style ( để rỗng chọn mặc định) var map = new ol.Map({ target: 'map', layers: [ Roads,natural,railways,buidling,quanlau,landuse ], view: new ol.View({ projection: projection }) }); map.getView().fitExtent(bounds, map.getSize()); Đây đối tượng chúng ta, map hiển thị lên đồ gồm thành phần sau:  target: ID thẻ div sk đưa map lên, ‘map’  layers: layer khai báo bên trên, layer cách dấu ,  view: quy định cách thức hiển thị đồ 29 map.getView().fit(bounds, map.getSize()); để zoom full extent vào vùng quy định biến bounds (chú ý tùy phiên OpenLayer mà hàm fit khơng chạy được, thay fit fitExtent() ) 3.4.2.Chức bật tắt layer Mặc định sk hiển thị layer lên nên sk để thuộc tính checked từ đầu Trong hàm $(“document”).ready(function(){…}); sk thêm code bắt kiện checkbox check sau: $("#chkRoads").change(function () { if($("#chkRoads").is(":checked")) { Roads.setVisible(true); } else { Roads.setVisible(false); } }); quanlau layer khai báo bên Hàm setVisible(var) xác định layer hiển thị hay ko Chú ý tùy phiên Openlayer tên hàm khác nhau, bạn check đây: http://openlayers.org/en/v3.15.1/apidoc/ Tiếp theo sk thêm thẻ img để hiển thị legend lớp Để lấy legend GeoServer cung cấp cho ta công cụ GetLegendGraphic Đại loại bạn trỏ đến đường link sau GeoServer sk trả cho bạn ảnh giải 30 Chi tiết thuộc tính bạn xem thêm đây: GetLegendGraphic Đơn giản bạn cần thay link đến GeoServer, thay tên layer vào xong code đây: 3.4.3.Hiển thị thông tin đối tượng Ở sk tìm hiểu cách lấy thông tin đối tượng đồ cách kick chuột vào đối tượng Đầu tiên thêm thẻ div để hiển thị thông tin lên trang sau: Sau thêm kiện click vào đồ sau: map.on('singleclick', function (evt) { var view = map.getView(); var viewResolution = view.getResolution(); var lau = quanlau.getSource(); var url = lau.getGetFeatureInfoUrl( evt.coordinate, viewResolution, view.getProjection(), { 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': }); if (url) { $.ajax({ type: "POST", url: url, contentType: "application/json; charset=utf-8", 31 dataType: 'json', success: function (n) { var content = ""; for (var i = 0; i < n.features.length; i++) { var feature = n.features[i]; var featureAttr = feature.properties; content += "Tên quán lẩu:" + featureA ttr["tenquan"] + "" } content += ""; $("#info").html(content); }});}}); Đối tượng request lưu theo chuẩn GeoJSON, chuẩn mở dựa JSON để chia sẻ qua mạng cách nhanh chóng gọn nhẹ Để Highlight đối tượng thực chất sk add thêm feature lên đồ để tùy chỉnh style cho đối tượng Chúng ta sk sử dụng loại đối tượng OpenLayer ol.layer.Vector Chúng ta thêm style cho đối tượng Highlight layer vector sau: 32 Thêm đoạn code sau vào đoạn code hiển thị thơng tin đối tượng tìm kiếm: Chúng ta thêm sau đoạn code $(“#info”).html(content); new ol.format.GeoJSON()).readFeatures(n): n biến data trả sau request từ JQuery Toàn biến n theo chuẩn GeoJSON nên đưa vào đối tượng GeoJSON OpenLayer Tiếp theo đưa vào source layer vector tạo 33