7. Bố cục của luận văn
3.1.1.Các bƣớc thực hiện cài đặt chƣơng trình
3.1. CÀI ĐẶT CHƢƠNG TRÌNH
3.1.1.Các bƣớc thực hiện cài đặt chƣơng trình
Do hiện tại hệ thống sử dụng trực tiếp nguồn dữ liệu từ một máy chủ cố định (Data server), nên hệ thống sẽ bỏ qua Data Exchange center (Cleaning House). Vậy nên GIS server sẽ truy vấn và lấy dữ liệu trực tiếp từ Data server thay vì phải qua trung gian Data Exchange center. Sau đây là các bƣớc xử lý để xây dựng chƣơng trình.
Hình 3.1. Các bước thực hiện xây dựng chương trình[10]
Phần Presentation tier (Client side): Sử dụng Spring MVC để xây dựng website, ngƣời dùng sẽ tƣơng tác với giao diện web để gửi yêu cầu thông qua các phƣơng thức HTTP request, response đến Web server.
Phần Logical tier (Server side): Web server (Tomcat 7) và GIS server (GeoServer).
Phần Data tier (Database): Sử dụng PostgreSQL và POSTGIS. Các bƣớc xử lý:
- Client gởi yêu cầu ngƣời dùng thông qua giao thức HTTP đến Web Server.
- Web Server nhận yêu cầu của ngƣời dùng gởi đến từ phía client, xử lý và chuyển tiếp yêu cầu đến ứng dụng trên GIS server.
- GIS server (Geoserver) nhận yêu cầu dữ liệu và tìm kiếm vị trí của những dữ liệu này sau đó gởi yêu cầu dữ liệu đến server chứa dữ liệu (GIS database server) tƣơng ứng cần tìm.
- GIS database server (PostgreSQL) tiến hành truy vấn lấy ra dữ liệu cần thiết và trả dữ liệu về cho GIS server.
- GIS server sắp xếp dữ liệu lại theo logic của yêu cầu dữ liệu, sau đó đƣa chúng đến các hàm cần sử dụng, xử lý chúng tại đây và kết quả đƣợc trả về cho Web Server.
- Web Server nhận về kết quả xử lý, thêm vào các ngữ cảnh web để có thể hiển thị đƣợc trên trình duyệt và cuối cùng gởi trả kết quả về cho trình duyệt dƣới dạng các trang web.
3.1.2. Qui trình hiển thị bản đồ trong Geoserver lên giao diện WebGis
a. Các thành phần dữ liệu trong quy trình hiển thị bản đồ lên GeoServer
Workspaces
Workspace là một không gian làm việc, giống nhƣ một thƣ mục chứa các nhóm lớp có tính chất giống nhau.
Stores
Nơi chứa nguồn dữ liệu GIS để hiển thị lên bản đồ.GeoServer hỗ trợ chúng ta khá nhiều loại data bao gồm cả các nguồn dữ liệu Vector và Raster.
Layers
Lớp dữ liệu hiển thị trên bản đồ. Khi chúng ta nhập các thông số cho store của chúng ta thành công GeoServer sẽ tự động load các layer và đƣa chúng ta sang trang layer, chúng ta có thể chọn public để public luôn layer cần thiết. Ở đây chúng ta cần khai báo các thông số hệ tọa độ trong GeoServer cho giống với hệ tọa độ trong cơ sở dữ liệu, kiểu dữ liệu, các thuộc tính đƣợc hiển thị lên bản đồ...
Layer Groups
Chúng ta có thể tạo các group để nhóm các layers lại với nhau để hiển thị cùng nhau trên 1 bản đồ. Layer Groups cho phép chúng ta chồng các layer lên nhau theo thứ tự đƣợc sắp xếp trên cùng một bản đồ.
Layer Preview
Chúng ta có thể xem qua các bản đồ từ các layers và các layer groups hiển thị trên GeoServer trong mục layer preview này.
Styles
Về cơ bản, bản chất dữ liệu không gian không phải là thành phần trực quan, sinh động. Để nhìn thấy dữ liệu thì nó cần phải đƣợc định dạng kiểu dáng (Style). Điều này có nghĩa là phải chỉ định màu sắc, độ rộng và các thuộc tính trực quan khác cho nó. Trong GeoServer, việc định kiểu này đƣợc thực hiện bằng cách sử dụng một ngôn ngữ đƣợc gọi là Styled Layer Descriptor (SLD). SLD là một ngôn ngữ dựa trên XML. [11]
Dữ liệu mà GeoServer có thể hỗ trợ thƣờng là các hình dạng: Điểm (Points), đƣờng (Lines) và đa giác (Polygons). Đƣờng là dạng đơn giản nhất, chúng chỉ có một đƣờng để định dạng kiểu (Thuộc tính đƣợc biết nhƣ “Stroke”). Đa giác, có một đƣờng và một vùng bên trong (Nhƣ thuộc tính “Fill”), cả hai có thể đƣợc định dạng khác nhau. Điểm, có cả đƣờng viền và vùng bên trong. Để lấp đầy vùng thì màu sắc có thể đƣợc quy định; cho nét, màu và độ dày cũng có thể đƣợc chỉ định.
Dƣới đây là một ví dụ đơn giản minh họa cho việc định dạng kiểu dáng cho một lớp dữ liệu có kiểu Line:
<?xml version="1.0" encoding="ISO-8859-1"?> <StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <NamedLayer> <Name>default_line</Name> <UserStyle> <Title>Default Line</Title>
<Abstract>A sample style that draws a line</Abstract> <FeatureTypeStyle>
<Rule>
<Name>rule1</Name> <Title>Blue Line</Title> (adsbygoogle = window.adsbygoogle || []).push({});
<Abstract>A solid blue line with a 1 pixel width</Abstract> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#0000FF</CssParameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle> </UserStyle> </NamedLayer> </StyledLayerDescriptor>
Trong tài liệu SLD trên cần quan tâm các thẻ sau:
Thẻ “PointSymbolizer” đƣợc sử dụng để bắt đầu định kiểu dáng cho dữ liệu dạng điểm.
Thẻ “WellKnowName” cho biết việc sử dụng các hình dạng đƣợc hỗ trợ sẵn để định kiểu cho dữ liệu, trong trƣờng hợp này là hình sao (star) sẽ đại diện cho một điểm. Ngồi ra, cịn có nhiều hình dạng khác nhƣ hình vng (square), hình trịn (circle), hình tam giác (triangle),…
Thẻ “Fill” và “Size” dùng để tô màu và chỉ định kích thƣớc cho điểm. Bộ lọc trongStyles cho phép xác định những đối tƣợng thỏa mãn một tập các điều kiện đƣợc chỉ định trƣớc, điều này làm tăng tính linh động trong việc định dạng kiểu dáng cho dữ liệu khơng gian. Một ví dụ sử dụng bộ lọc trong tài liệu sau dùng để định dạng màu nền và độ rộng của những đƣờng đi có thuộc tính loại đƣờng (loai_duong)là tỉnh lộ (tinh lo).
<FeatureTypeStyle> <Rule> <Title>Tinh lo</Title> <ogc:Filter> <ogc:PropertyIsEqualTo> <ogc:PropertyName>loai_duong</ogc:PropertyName> <ogc:Literal>tinh lo</ogc:Literal> </ogc:PropertyIsEqualTo> </ogc:Filter> <LineSymbolizer> <Stroke> <CssParameter name="stroke">#FFFA51</CssParameter> <CssParameter name="stroke-width">13</CssParameter> </Stroke> </LineSymbolizer> </Rule> </FeatureTypeStyle>
b. Cách tổ chức các lớp dữ liệu (layers) chồng lớp trên Geoserver Lớp dữ liệu “thiethaichitiet” Lớp dữ liệu “diaphanxa” Lớp dữ liệu “diaphanhuyen” Lớp dữ liệu “thiethaitongquat” Chồng lớp Chồng lớp Chồng lớp
Hình 3.3. Cách tổ chức các lớp dữ liệu chồng lớp trên Geoserver Bảng 3.1. Mô tả các lớp dữ liệu (layers) trên Geoserver
Tên layer Mô tả Kiểu Hệ qui
chiếu
diaphantinh Lớp hiển thị bản đồ tỉnh. Dữ liệu cho layer này đƣợc xuất ra từ dữ liệu của bảng "diaphantinh" trong cơ sở dữ liệu.
Polygon EPSG:4326
diaphanhuyen Lớp hiển thị bản đồ tỉnh phân vùng theo huyện. Dữ liệu cho layer này đƣợc xuất ra từ dữ liệu của bảng "diaphanhuyen" trong cơ sở dữ liệu.
Polygon EPSG:4326
diaphanxa Lớp hiển thị bản đồ huyện phân vùng theo xã. Dữ liệu cho layer này đƣợc xuất ra từ dữ liệu của bảng "diaphanhxa" trong cơ sở dữ liệu.
Tên layer Mô tả Kiểu Hệ qui chiếu
thiethaichitiet Lớp hiển thị địa điểm thiệt hại chi tiết xảy ra. Dữ liệu cho layer này đƣợc xuất bằng cách tham chiếu các bảng trong cơ sở dữ liệu.
Point EPSG:4326
thiethaitongquat Lớp hiển thị địa điểm thiệt hại
tổng quát xảy ra. Dữ liệu cho layer này đƣợc xuất bằng cách tham chiếu các bảng trong cơ sở dữ liệu.
Point EPSG:4326
c. Kết quả hiển thị các lớp dữ liệu trên Geoserver
Sử dụng công cụ GeoServer để hiện thị các lớp (Layer) của bản đồ từng địa phận huyện, xã trên nền GIS.
Hình 3.4. Kết quả hiển thị layer "diaphanhuyen"
d. Hiển thị bản đồ từ các lớp dữ liệu trong GEOSERVER
Các khái niệm cơ bản trong OpenLayers 3
- Lớp ol.Map: Là thành phần cốt lõi của OpenLayers 3 là bản đồ. Các bản đồ trong OpenLayers đƣợc đại diện bởi lớp Map, là nơi để lƣu giữ các thông tin về hệ quy chiếu, đơn vị, vùng bao (box) … của bản đồ. Mỗi đối tƣợng bản đồ đại diện bản đồ riêng lẻ trên trang web. Các thuộc tính của Map có thể đƣợc định nghĩa tại thời điểm khởi tạo Map hoặc sử dụng các phƣơng thức setter. Nếu ta thiết lập thuộc tính target là “map”, thì tồn tại một thành phần div với id là “map” là nơi để chứa bản đồ này trong trang html.
<div id="map" style="width: 100%, height: 400px"> </div> <script>
var map = new ol.Map({target: 'map'}); </script>
- Lớp ol.View: Lớp này chứa các thuộc tính để định dạng bản đồ nhƣ chọn điểm giữa bản đồ, mức độ zoom... (adsbygoogle = window.adsbygoogle || []).push({});
map.setView(new ol.View({ center: [0, 0],
zoom: 2 }));
- Lớp ol.source.Source
Để có đƣợc dữ liệu từ xa cho một lớp, OpenLayers 3 sử dụng lớp con ol.source.Source. Có các gói dịch vụ bản đồ miễn phí và thƣơng mại nhƣ OpenStreetMap hoặc Bing, cho nguồn OGC nhƣ WMS hoặc WMTS, và cho dữ liệu vector trong các định dạng nhƣ GeoJSON hoặc KML.
var osmSource = new ol.source.OSM();
Lớp ol.layer.Layer: Một Layer là một đại diện trực quan của dữ liệu từ một nguồn nào đó. Bên trong bản đồ, dữ liệu đƣợc hiển thị thông qua các „Layer‟. Một „Layer‟ là một nguồn dữ liệu, nó cho biết OpenLayers nên yêu
cầu và hiển thị dữ liệu nhƣ thế nào. Trong một „Map‟ có thể chứa một hoặc nhiều „Layer‟ chồng lên nhau. Dữ liệu trong một „Layer‟ có thể là dạng raster hoặc Vector. Đối với nguồn OGC, mỗi Layer sẽ giao tiếp và lấy dữ liệu từ một tầng dữ liệu trong Geoserver để hiển thị lên bản đồ trên giao diện WebGis.
var osmLayer = new ol.layer.Tile({source: osmSource}); map.addLayer(osmLayer);
Khởi tạo một bản đồ từ nguồn dữ liệu địa phận tỉnh trên Geoserver lên giao diện web sử dụng OpenLayers 3
var wmsSource = new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/luanvan/wms',
params: {'LAYERS': 'luanvan:diaphantinh', 'TILED': true}, serverType: 'geoserver'
});
var layer1 = new ol.layer.Image({
source: wmsSource });
var layers = [ new ol.layer.Tile({
source: new ol.source.OSM() }),
layer1,];
var view = new ol.View({
center: ol.proj.transform([108.206229, 16.047079], 'EPSG:4326', 'EPSG:3857'), zoom: 6,
maxZoom: 13, minZoom: 6});
var map = new ol.Map({
target: 'map', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }).extend([ new ol.control.ZoomSlider(), new ol.control.Rotate(), new ol.control.OverviewMap(), new ol.control.ScaleLine(), new ol.control.FullScreen(), new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326' }) ]), interactions: ol.interaction.defaults().extend([ new ol.interaction.Select({ condition: ol.events.condition.mouseMove }) ]), view: view });
Cách hiển thị các tầng dữ liệu khác nhau bằng cách chồng lớp lên WebGis
var layer1 = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/luanvan/wms',
params: {'LAYERS': luanvan:diaphanhuyen', 'TILED': true}, serverType: 'geoserver'
}) });
var layer2 = new ol.layer.Image({ (adsbygoogle = window.adsbygoogle || []).push({});
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/luanvan/wms',
params: {'LAYERS': luanvan:diaphanxa', 'TILED': true}, serverType: 'geoserver'
}) });
var layer3 = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/luanvan/wms',
params: {'LAYERS': luanvan:thientaichitiet', 'TILED': true}, serverType: 'geoserver'
}) });
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM() }),
layer1, layer2, layer3];
var view = new ol.View({
center: ol.proj.transform([108.206229, 16.047079], 'EPSG:4326',
'EPSG:3857'),
zoom: 6, maxZoom: 13, minZoom: 6
});
var map = new ol.Map({
layers: layers, target: 'map', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }).extend([ new ol.control.ZoomSlider(), new ol.control.Rotate(), new ol.control.OverviewMap(), new ol.control.ScaleLine(), new ol.control.FullScreen(), new ol.control.MousePosition({ coordinateFormat: ol.coordinate.createStringXY(4), projection: 'EPSG:4326' }) ]), interactions: ol.interaction.defaults().extend([ new ol.interaction.Select({ condition: ol.events.condition.mouseMove }) ]), view: view });