1. Thiết lập ứng dụng đầu tiên
Để tạo ra một ứng dụng đầu tiên thì các bạn cần
có dữ liệu và file cofig.map đã được giới thiệu ở phần Mapserver.
Tạo một trang .html vào một thư mục bất kỳ(chỉ
cần lưu ý khi chỉ đường dẫn liên kết tới file OpenLayers.js ở thư mục “lib”).
Ở đây tạo ra một trang vidu.html chứa trong
thư mục OpenLayer mà ta mới tải về và giải nén ra.
Mở trang này bằng các công cụ như Notepad,
Notepad++ …copy dòng lệnh sau:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Đường dẫn tới file
OpenLayers.js -->
<script src="../lib/OpenLayers.js"></script>
<!-- Đoạn
javascript chính để gọi các chức năng trong OpenLayer -->
<script
type="text/javascript">
function init(){
//Khai báo một biến mới là dạng
OpenLayer.Map
map = new
OpenLayers.Map("myMapHolder");
/*Khai báo biến là dạng lớp bản đồ,
đây là lớp cơ sở. Lấy thông tin lớp từ file config.map của Thái Lan được giới
thiệu ở phần Mapserver*/
baseMap = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/thailand/config.map&",
{layers: "forest"});
//Thêm lớp cơ sở vào bản đồ
map.addLayers([baseMap]);
//Quản lý ZoomExtend
map.zoomToMaxExtent();
}
</script>
</head>
<!-- Gọi hàm init ngay khi load trang -->
<body onload="init()">
<div width="100%" height="100%"
id="myMapHolder" />
</body>
</html>
Kết quả ứng đầu tiên
2. Các thiết lập mở rộng
Phần ứng dụng trên là cơ bản nhất, chỉ có một
lớp đối tượng. Giờ ta thêm lớp đối tượng thì ta khai báo như sau:
Cú
pháp:
myNewLayer = OpenLayers.Layer.layerType( nameOfLayer, URLtoWMS,
{listOfOptions} );
§ myNewLayer: là tên lớp mới
§ nameOfLayer: là biến tham chiếu cho tên của layer(khai báo trong
file config.map).
§ URLtoWMS là đường dẫn đến dich vụ WMS (đối với MapServer và
Openlayers thì đường dẫn đến MapServer là CGIPATH + NETPATH) ví dụ: http:
//localhost/ cgi-bin / mapserv.exe?map = C:/ms4w/apps/thailand/ config.map&
§ {listOption} là một mảng chứa các tên lớp được yêu cầu và các tham số
của chúng.
Ví dụ:
var railroad = new OpenLayers.Layer.WMS("Thailand
Giờ ta đã có 2 lớp đối tượng chính vì vậy cần thong báo để thêm lớp
đối tượng mới vừa được thêm vào bản đồ, ta thay như sau:
Thay đoạn code:
map.addLayer([baseMap])
Bằng:
map.addLayers([baseMap,
railroad]);
Kết quả đã có thêm lớp railroad
Quản lý các lớp. Đến lúc này ta đã có hơn 1
layer, để quản lý layer nào sẽ được hiện thị trên bản đồ ta có câu lệnh:
map.addControl(new
OpenLayers.Control.LayerSwitcher());
Tạo ra thanh Zoom
Pan có kích thước để kéo.
map.addControl(new
OpenLayers.Control.PanZoomBar());
Tạo ra một cửa sổ view toàn bộ bản đồ
map.addControl(new
OpenLayers.Control.OverviewMap());
Hiển thị cặp tọa độ (Lat,Long) hoặc (X,Y)
map.addControl(new
OpenLayers.Control.MousePosition());
Thước Tỷ lệ
map.addControl(new
OpenLayers.Control.ScaleLine());
Và còn rất nhiều
chức năng khác các bạn có thể tham khảo ở file OpenLayers.js
Hãy like nếu bài viết có ích →
Kết bạn với gisgpsrs trên Facebook
để nhận bài viết mới nóng hổi
Không có nhận xét nào:
Đăng nhận xét