[Xây dựng WebGIS #7] – Ứng dụng WebGIS với Openlayer

Ở bài này chúng ta sẽ tìm hiểu cách đưa bản đồ lên web với chức năng hiển thị bản đồ của chúng ta đã biên tập ở bài trước.

Chúng ta cần thêm thư viện JavaScript Openlayer. Chúng ta có thể tải tại: http://openlayers.org/download/ hoặc có thể lấy trực tiếp link đến file js không cần tải về.

Trong bài mình sử dụng cả JQuery vì thế các bạn phải tải thêm cả JQuery nữa.

Đầu tiên các bạn tạo 1 folder để chứa web của mình, tạo 1 file html để bắt đầu code

Chúng ta sẽ cần add những thứ sau trong thẻ head của HTML:

<link rel="stylesheet" href="http://openlayers.org/en/v3.15.1/css/ol.css" type="text/css">

<script src="https://openlayers.org/en/v3.15.1/build/ol.js" type="text/javascript"></script>

<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>

Trong Body chúng ta thêm 1 thẻ DIV

<div id=”map” class=”map”></div>

 

 

Quay lại thẻ Head, chúng ta thêm code javascript sau:

<script type=”text/javascript”>
$(“#document”).ready(function () {
var format = ‘image/png’;

var bounds = [587376.125, 2263541.25,
589508.8125, 2266077];
var ThuaDat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: ‘http://localhost:8080/geoserver/ThaiBinh/wms’,
params: {
‘FORMAT’: format,
‘VERSION’: ‘1.1.1’,
STYLES: ”,
LAYERS: ‘ThaiBinh:TD12457’,
}
})
});
var projection = new ol.proj.Projection({
code: ‘EPSG:3405’,
units: ‘m’,
axisOrientation: ‘neu’
});
var map = new ol.Map({
target: ‘map’,
layers: [
ThuaDat
],
view: new ol.View({
projection: projection
})
});
//map.getView().fitExtent(bounds, map.getSize());
map.getView().fit(bounds, map.getSize());
});

</script>

&nbsp;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Mình sẽ giải thích kỹ hơn 1 chút

var bounds = [587376.125, 2263541.25,
589508.8125, 2266077];

 

 

là để xác định extent của bản đồ chúng ta muốn hiển thị

var ThuaDat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: ‘http://localhost:8080/geoserver/ThaiBinh/wms’,
params: {
‘FORMAT’: format,
‘VERSION’: ‘1.1.1’,
STYLES: ”,
LAYERS: ‘ThaiBinh:TD12457’,
}
})
});

 

 

 

 

 

 

 

Đây là khai báo layer chúng ta đã có trong GeoServer, kiểu layer chúng ta sử dụng ở đây là Image và kiểu source là ImageWMS. Trong OpenLayer chúng ta sẽ có 3 kiểu layer là:

• ol.layer.Tile : hiển thị bản đồ dạng bản đồ nền, chúng ta có thể xác định được cấp độ zoom phụ thuộc vào tỷ lệ bản đồ
• ol.layer.Image: Hiển thị bản đồ dạng ảnh với mức độ zoom và độ phân giải tùy ý.
• ol.layer.Vector: đưa ra layer dưới dạng vector

url: ‘http://localhost:8080/geoserver/ThaiBinh/wms&#8217; là link đến service của Geoserver. LAYERS: ‘ThaiBinh:TD12457’ là tên Layer trong Geoserver. Ngoài ra còn một số tùy chọn khác như format ảnh, chọn style ( nếu để rỗng thì là chọn mặc định)..

var projection = new ol.proj.Projection({
code: ‘EPSG:3405’,
units: ‘m’,
axisOrientation: ‘neu’
});

 

 

 

Tùy chọn hệ quy chiếu bản đồ. Vì bản đồ của chúng ta đang để ở hệ quy chiếu VN 2000 UTM múi 48N nên code sẽ là 3405

var map = new ol.Map({
target: ‘map’,
layers: [
ThuaDat
],
view: new ol.View({
projection: projection
})
});
//map.getView().fitExtent(bounds, map.getSize());
map.getView().fit(bounds, map.getSize());
});

 

 

 

 

 

 

 

Đây là đối tượng chính của chúng ta, là một map hiển thị lên bản đồ gồm các thành phần chính sau:

• target: ID của thẻ div chúng ta sẽ đưa map lên, ở đây là ‘map’
• layers: layer chúng ta khai báo bên trên, mỗi layer cách nhau dấu ,
• view: quy định cách thức hiển thị của bản đồ

map.getView().fit(bounds, map.getSize()); để chúng ta zoom full extent vào vùng chúng ta quy định trong biến bounds. (chú ý tùy phiên bản OpenLayer mà hàm fit có thể không chạy được, chúng ta có thể thay fit bằng fitExtent() )

$(“#document”).ready(function (){

//code go here

})

 

 

 

Đây là 1 hàm của JQuery tương đương với body onload. Chúng ta sẽ sử dụng các hàm của JQuery tương tác với DOM cho nhanh. Các bạn nào quan tâm đến JQuery có thể vào trang http://learn.jquery.com/ để tìm hiểu thêm hoặc tra google có rất nhiều hướng dẫn trên mạng.

Tiếp theo chúng ta thêm 1 ít style như sau:

<style>
.map {
height: 100%;
width: 100%;
}
</style>

 

 

 

 

Tổng hợp code của chúng ta sẽ như sau:

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head >
<title>Openlayers test</title>
<link rel=”stylesheet” href=”http://openlayers.org/en/v3.15.1/css/ol.css” type=”text/css”>
<script src=”http://openlayers.org/en/v3.15.1/build/ol.js” type=”text/javascript”></script>
<script src=”https://code.jquery.com/jquery-1.12.3.min.js” type=”text/javascript”></script>
<style>
.map {
height: 100%;
width: 100%;
}
</style>

<script type=”text/javascript”>
$(“#document”).ready(function () {
var format = ‘image/png’;

var bounds = [587376.125, 2263541.25,
589508.8125, 2266077];
var ThuaDat = new ol.layer.Image({
source: new ol.source.ImageWMS({
ratio: 1,
url: ‘http://localhost:8080/geoserver/ThaiBinh/wms’,
params: {
‘FORMAT’: format,
‘VERSION’: ‘1.1.1’,
STYLES: ”,
LAYERS: ‘ThaiBinh:TD12457’,
}
})
});
var projection = new ol.proj.Projection({
code: ‘EPSG:3405’,
units: ‘m’,
axisOrientation: ‘neu’
});
var map = new ol.Map({
target: ‘map’,
layers: [
ThuaDat
],
view: new ol.View({
projection: projection
})
});
//map.getView().fitExtent(bounds, map.getSize());
map.getView().fit(bounds, map.getSize());
});

</script>
</head>
<body>

<div id=”map” class=”map”></div>

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Các bạn thử thay link đến service bản đồ của mình và thử kết quả nhé. Có vấn đề gì hãy comment bên dưới

Tác giả: Đỗ Xuân Cường

Nguồn bài viết: cuongdx313.wordpress.com