[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://ift.tt/2uhLkE8 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://ift.tt/2uQjmMB" type="text/css">
<script src="http://ift.tt/2uhwcq7" type="text/javascript"></script>
<script src="http://ift.tt/1N7dbW6" 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://ift.tt/wVPrrK để 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://ift.tt/lH0Osb">
<head >
<title>Openlayers test</title>
<link rel="stylesheet" href="http://ift.tt/2uQjmMB" type="text/css">
<script src="http://ift.tt/2uhwcq7" type="text/javascript"></script>
<script src="http://ift.tt/1N7dbW6" 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

Đọc nguyên bài viết tại :
[Xây dựng WebGIS #7] – Ứng dụng WebGIS với Openlayer

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

DownLoad ảnh vệ tinh Landsat 8

Hình ảnh
Để bắt đầu với phần mềm Envi ta cần phải có dữ liệu vệ tinh để tiến hành xử lí. Như vậy, ta có thể Download ở đâu ???? Hiện nay, có rất nhiều website chia sẻ dữ liệu vệ tinh miễn phí như: +Website của cục khảo thí địa chất Hoa Kỳ (USGS): https://earthexplorer.usgs.gov/ +Website chia sẻ dữ liệu MODIS của UWG: https://ladsweb.modaps.eosdis.nasa.gov/ +Website chia sẻ dữ liệu Sentinel của ESA: https://scihub.copernicus.eu/ …………… Nếu muốn tìm hiểu sâu các bạn có thể truy cập vào một trong những web bên trên để có thể kiếm thêm thông tin về dữ liệu mà các bạn muốn sử dụng phục vụ nghiên cứu. Để làm ví dụ cơ bản ta sẽ sử dụng bộ dữ liệu ảnh quang Landsat 8 để tiến hành download (USGS) Đặc điểm ảnh Landsat 8: Là bộ dữ liệu mới nhất của Vệ tinh Landsat, với độ phân giải trung bình (30x30m) đã được tiền xử lí sơ bộ, mỗi tệp ảnh Landsat 8 được down về được đăng kí tọa độ WGS84 và hiệu chỉnh yếu tố địa hình rất thuận tiện để sử dụng. +Bắt đầu tải ảnh với (USGS), cần thực hiện đăng ký một
Đọc thêm

CẮt ảnh theo ranh giới (Sử dụng File ranh giới dạng *shp)

Hình ảnh
Công tác cắt ảnh này giúp loại bỏ những thông tin thừa ra khỏi khu vực nghiên cứu của bạn, Hiện nay trên youtube cũng có hướng dẫn về phần này rất nhiều. Tuy nhiên để cho các bạn hiểu hơn về quy trình cắt ảnh, mời cái bạn xem bài viết sau.   Đầu tiên: để cắt được ảnh ta cần vùng ranh giới dưới dạng *.shp.  Vì lí do các bài trước được viết dựa trên dữ liệu ảnh của khu vực TPHCM, cho nên mình sẽ lấy ranh giới TPHCM dưới dạng *.shp để thực hiện quá trình cắt ảnh. B1. Ranh giới dưới dạng *.shp khi mở bằng phần mềm ArcGis có dạng như sau B2. Mở Envi Classical 5.3, mở ảnh đã ghép sẵn chứa khu vực cần cắt. Trên thanh menu Chọn File/Open Vector File . Chọn đường dẫn vào Folder chứa thư mục *.shp của bạn. Rồi nhấn Open >>> Xem lại: Ghép ảnh vệ tinh B3. Hiển thị hộp thoại ta chọn Choose để chọn đường dẫn lưu file B4. Hiển thị ra hộp thoại chứa file *.evf ,  ta Click vô file vừa mới chuyển nhấn Load Selected/ Display 1#. Ta Click vô  File/Export Active Layer to ROIs
Đọc thêm

Bản đồ du lịch Việt Nam

Hình ảnh
Bản đồ du lịch Việt Nam thể hiện đầy đủ các tuyến điểm du lịch cần thiết với các thông tin bản đồ du lịch cho từng tỉnh/thành, khu vực riêng biệt. Đối với bản đồ du lịch tỉnh hiện được được cập nhật, hỗ trợ mới nên chưa thống nhất. Bản đồ du lịch tuyến điểm Việt Nam [caption id="attachment_1657" align="alignnone" width="2000"] Bản đồ du lịch Việt Nam dành cho dân phượt bụi[/caption] Bản đồ du lịch tuyến du lịch nổi tiếng Việt Nam [caption id="attachment_1658" align="aligncenter" width="1654"] Bàn đồ, sơ đồ tuyến điểm du lịch Việt Nam[/caption] Bản đồ du lịch Việt Nam (theo tỉnh/thành) Bản đồ du lịch Tây Bắc Vùng Tây Bắc  là vùng miền núi phía tây của  miền Bắc Việt Nam , có chung đường biên giới với Lào và Trung Quốc. Vùng này có khi được gọi là  Tây Bắc Bắc Bộ  và là một trong 3 tiểu vùng địa lý tự nhiên của Bắc Bộ Việt Nam (2 tiểu vùng kia là  Vùng Đông Bắc  và  Đồng bằng sông Hồng ). Về mặt hành chính, vùng Tây Bắ
Đọc thêm