1. Mục đích
Từ xa xưa người ta đã biết sử dụng bản đồ
dùng để tìm đường, đánh dấu, dùng để đánh trận, các bản đồ đó được lưu ở dạng vỏ
cây, khắc lên các tấm đá, giấy… Sau này công nghệ đã phát triển thì người ta bắt
đầu tạo ra các bản đồ dạng số để giúp hỗ trợ tốt hơn trong quá trình sử dụng và
sao lưu, chỉnh sửa…Với công nghệ càng ngày càng phát triển thì việc phát triển
Internet trong mọi ngành đòi hỏi trong ngành trắc địa cũng phải sử dụng và ứng
dụng nó. Vì vậy việc tạo ra các WebGIS là rất cần thiết để đưa các dữ liệu ở dạng
Desktop lên trên web.
Bản đồ trên Desktop
2. Các lớp đối tượng cần hiển thị
Đối với bản đồ về giao thông thì bao gồm các
lớp dữ liệu sau và với các trường thuộc tính như sau:
Ø Các
lớp dữ liệu nền:
ü Lớp
dữ liệu vùng biên (hn_vungbien) đây là lớp dữ liệu các tỉnh lân cận với thành
phố Hà Nội.
Các trường thuộc
tính bao gồm:
STT
|
Tên
trường
|
Độ
dài
|
Loại
trường
|
Ghi
chú
|
1
|
ID
|
10
|
String
|
Mã bảng
|
2
|
PROCODE02
|
10
|
String
|
Mã
Tỉnh năm 2002
|
3
|
PRONAME
|
50
|
String
|
Tên Tỉnh
|
4
|
NOTE
|
100
|
String
|
Ghi chú
|
Các tỉnh lân cận TP.Hà Nội
ü Lớp
dữ liệu hành chính Huyện (hn_hc_tinh): Đây là lớp dữ liệu hành chính TP.Hà Nội
Các trường thuộc
tính thì như bảng của lớp dữ liệu hn_vungbien ở trên
Lớp dữ liệu hành chính TP.Hà Nội
ü Lớp
dữ liệu hành chính huyện (hn_hc_huyen): Đây là lớp dữ liệu hành chính huyện thuộc
TP.Hà Nội
Các trường thuộc
tính bao gồm:
STT
|
Tên
trường
|
Độ
dài
|
Loại
trường
|
Ghi
chú
|
1
|
ID
|
10
|
String
|
Mã bảng
|
2
|
DISTCODE02
|
10
|
String
|
Mã
Huyện năm 2002
|
3
|
PROCODE02
|
10
|
String
|
Mã Tỉnh năm 2002
|
4
|
DISTNAME
|
50
|
String
|
Tên Huyện
|
5
|
PRONAME
|
50
|
String
|
Tên Tỉnh, TP
|
6
|
NOTE
|
100
|
String
|
Ghi chú
|
Lớp dữ liệu hành chính huyện TP.Hà Nội
ü Lớp
dữ liệu thủy hệ (hn_thuyhe_polygon): Đây là lớp dữ liệu sông hồ trong TP.Hà Nội
Các trường thuộc
tính bao gồm:
STT
|
Tên
trường
|
Độ
dài
|
Loại
trường
|
Ghi
chú
|
1
|
ID
|
10
|
String
|
Mã bảng
|
2
|
MA_LOAI
|
10
|
String
|
Loại thủy hệ
|
3
|
TEN_VIE
|
50
|
String
|
Tên sông Việt nam
|
4
|
TEN_ENG
|
50
|
String
|
Tên sông Tiếng anh
|
Lớp dữ liệu thủy hệ
Ø Các
lớp dữ liệu chuyên đề:
ü Lớp
dữ liệu đường giao thông (hn_giaothong): Đây là lớp dữ liệu đường giao thông
trong TP.Hà Nội.
Các trường thuộc
tính bao gồm:
STT
|
Tên
trường
|
Độ
dài
|
Loại
trường
|
Ghi
chú
|
1
|
ID
|
10
|
String
|
Mã bảng
|
2
|
MA_LOAI
|
10
|
String
|
Loại đường
|
3
|
TEN_VIE
|
50
|
String
|
Tên đường Việt nam
|
4
|
TEN_ENG
|
50
|
String
|
Tên đường Tiếng anh
|
5
|
TEN_LOAI
|
50
|
String
|
Tên loại đường
|
6
|
CAP_QUANLY
|
50
|
String
|
Cấp quản lý
|
Lớp dữ liệu giao thông
ü Lớp
dữ liệu địa danh (hn_diadanh): Đây là lớp dữ liệu các cơ quan, trụ sở nhà hàng…
được đánh dấu trên bản đồ.
Các trường thuộc
tính bao gồm:
STT
|
Tên
trường
|
Độ
dài
|
Loại
trường
|
Ghi
chú
|
1
|
ID
|
10
|
String
|
Mã bảng
|
2
|
NAME
|
100
|
String
|
Tên địa danh
|
3
|
DIACHI
|
100
|
String
|
Địa chỉ
|
4
|
DIENTHOAI
|
20
|
String
|
Số điện thoại
|
5
|
TENGIAODIC
|
50
|
String
|
Tên giao dịch
|
6
|
TENQUAN
|
50
|
String
|
Tên quận
|
Lớp dữ liệu địa danh
3. Xây dựng WebGIS
3.1 Tạo Project chứa OpenLayer và đẩy dữ liệu shapfile vào PostGIS
Vào thư mục “C:\ms4w\apps” để tạo một dự án với
tên là “giaothong”. Copy thư mục OpenLayer mà ta đã tiến hành giải nén vào
thư mục project.
Tạo ra các thư mục sau để lưu các trang code
phục vụ cho thiết lập trang web.
Các thư mục trong project
Thư mục config lưu các tệp cấu hình
Mapserver, thư mục js chứa các trang mã lệnh Javascript, thư mục php chứa các
trang mã php, thư mục view chứa ảnh và các trang mã css, trang index.php là
trang mà ta sẽ gọi đến đầu tiên khi chạy.
Đẩy dữ liệu vào trong PostGIS, ta đẩy dữ liệu
tượng tự như phần giới thiệu ở trên (ta tạo ra một Database với tên là
“giaothong”)
Databases “giaothong”
Các bảng dữ liệu trong Database “giaothong”
3.2 Thiết kế giao diện Web và tạo file config.map
Giao diện chính của Web
Giao diện chính của web
Tạo file config.map lấy dữ liệu từ PostGIS
Trong thư mục config ta tạo ra các tệp sau:
Thư mục config
Thư mục chứa tệp fonts (chứa các font), tệp
images chứa các ảnh, tệp layer chứa các file config của layer, tệp symbols (chứa
định nghĩa symbols), file config.map là file cấu hình chính.
Nội dung của tệp config.map như sau:
MAP
NAME giaothong
IMAGECOLOR 255 255 255
SIZE 900 500
SYMBOLSET "symbols/symbols.sym"
FONTSET "fonts/msfontset.txt"
IMAGETYPE PNG24 ## use AGG to for
anti-aliassing
OUTPUTFORMAT
NAME
'AGG'
DRIVER
AGG/PNG
MIMETYPE
"image/png"
IMAGEMODE
RGB
EXTENSION
"png"
END # outputformat
PROJECTION
"init=epsg:4326"
#latlon on WGS84
END
EXTENT 105.25 20.55 106.09 21.41 # lon/lat
extents of giaothong
UNITS meters
WEB
IMAGEPATH
"/tmp/ms_tmp/"
IMAGEURL
"/ms_tmp/"
METADATA
"map"
"C:/ms4w/apps/giaothong/config//config.map"
"ows_schemas_location"
"http://schemas.opengeospatial.net"
"ows_title"
"Sample WMS"
"ows_onlineresource"
"http://giaothong/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&"
"wms_srs"
"EPSG:4326 " #latlon
"wms_feature_info_mime_type"
"text/plain"
"wms_server_version"
"1.1.1"
"wms_formatlist"
"image/png,image/gif,image/jpeg"
"wms_format"
"image/png"
END
#metadata
END #web
INCLUDE "layer/hn_hc_huyen.map"
INCLUDE "layer/hn_hc_tinh.map"
INCLUDE "layer/hn_giaothong.map"
INCLUDE "layer/hn_vungbien.map"
INCLUDE
"layer/hn_thuyhe_polygon.map"
INCLUDE "layer/hn_diadanh.map"
END #MAP
Tiếp theo ta viết lệnh trong các file
hn_hc_huyen.map, hn_hc_tinh.map
hn_hc_huyen.map:
LAYER
NAME
"hn_hc_huyen"
TYPE
POLYGON
STATUS
ON
CONNECTIONTYPE
postgis
LABELITEM
"DISTNAME"
CONNECTION
"user=postgres password=123456 dbname=giaothong host=localhost
port=5432"
DATA
"the_geom from hn_hc_huyen"
TOLERANCE
8
TOLERANCEUNITS
pixels
PROJECTION
"init=epsg:4326"
END
UNITS
meters
CLASS
NAME
"hn_hc_huyen_active"
EXPRESSION
(0)
STYLE
COLOR
255 255 208
#tao
ra duong bien cua vung
OUTLINECOLOR
38 98 206
WIDTH
3
SYMBOL
0
END
END
CLASS
NAME
"hn_hc_huyen_normal"
STYLE
OUTLINECOLOR
110 110 110
#tao
mau cho vung
COLOR
247 222 195
END
LABEL
POSITION cc
FORCE true
ALIGN center
ANGLE
auto
#Mau cho text nhan
COLOR 255 85 0
TYPE truetype
ENCODING "UTF-8"
FONT tahoma
SIZE 12
MAXSIZE 9
#SIZE small
END
END
METADATA
"fullname" "Vùng Tinh"
"LOP" "nen"
"FIELD_NAME" ""
"FIELD_DISPLAY" ""
END
END #layer
Tượng tự ta viết
cho các file layer.map khác, các bạn có thể tham khảo ở trong project của chúng
tôi.
3.3 Các chức năng của WebGIS
Tạo trang Ind
<!-- css tạo ra thanh menu -->
<link rel="stylesheet"
href="view/css/menu.css" type="text/css"/>
<!--css tạo
ra kiểu cho các chức năng ở thanh toolbar -->
<link rel="stylesheet" href="view/css/panle.css"
type="text/css"/>
<!-- Javascript tạo ra sự kiện kích vào menu
-->
<script src="js/jquery.js"
type="text/javascript"></script>
<!-- Javascript tạo ra sự kiện kích vào menu
-->
<script src="js/menu/menu.js"
type="text/javascript"></script>
<!-- Javascript thực hiện các chức năng viết trong
OpenLayer -->
<script
src="OpenLayers/lib/OpenLayers.js"
type="text/javascript"></script>
<!-- Javascript viết gọi các lớp Layer và chức năng
trong bản đồ -->
<script src="js/jsopenlayer.js"
type="text/javascript"></script>
Đến phần body cần gọi hàm sau: <body onLoad="init()" >
Nội dung các dòng lệnh trong các file css và
Javascript trên các bạn có thể tham khảo ở project đi kèm theo.
Sau đây xin giới thiệu về tệp Javascript quan trọng nhất
của ứng dụng đó là jsopenlayer.js, chứa các hàm và dòng lệnh chính cho ứng dụng
WebGIS này:
var map;
function init(){
//Thêm
lớp này để hiển thị thanh công cụ EditingToolbar
vlayer
= new OpenLayers.Layer.Vector( "Địa danh tạm thời" );
map
= new OpenLayers.Map("myMapHolder", {
controls: [
new
OpenLayers.Control.PanZoom(),
new
OpenLayers.Control.EditingToolbar(vlayer)
]
});
//Khai
báo lớp dữ liệu
var
baseMap1 = new OpenLayers.Layer.WMS("Hành chính Huyện",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_hc_huyen"});
var
baseMap2 = new OpenLayers.Layer.WMS("Hành chính Tỉnh",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_hc_tinh"});//, transparent: "true", format:
"image/png"} );//Nếu bỏ phần này thì như lớp cơ sở
var
giaothong = new OpenLayers.Layer.WMS("Giao thông",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_giaothong", transparent: "true", format:
"image/png"}, {visibility: false} );
var
vungbien = new OpenLayers.Layer.WMS("Vùng biên",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_vungbien", transparent: "true", format:
"image/png"}, {visibility: false});
var
thuyhe = new OpenLayers.Layer.WMS("Thủy hệ",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_thuyhe_polygon", transparent: "true", format:
"image/png"}, {visibility: false});//visibility:false(tắt lớp khi bắt
đầu load trang
var
diadanh = new OpenLayers.Layer.WMS("Địa danh",
"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/giaothong/config/config.map&",
{layers:
"hn_diadanh", transparent: "true", format:
"image/png"}, {visibility: false});
//Thông
báo thêm các lớp dữ liệu vào WebGIS
map.addLayers([baseMap1,
baseMap2, vungbien, giaothong, thuyhe, diadanh, vlayer]);
//Quản lý ZoomExtend
//map.zoomToMaxExtent();
//Thay
dòng code map.zoomToMaxExtent() bằng
var
bounds = new OpenLayers.Bounds(105.25, 20.55, 106.09, 21.41);
map.zoomToExtent(bounds);//dùng
để Zoom Extent đối tượng khi load
//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());//dùng để tạo quản lý các lớp
//Tạo ra thanh Zoom Pan dài
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)
map.addControl(new
OpenLayers.Control.MousePosition());
//Thước Tỷ lệ
map.addControl(new
OpenLayers.Control.ScaleLine());
//Thiết lập điểm giữa bản đồ là
(105.67,20.99) và mức độ Zoom là 9
map.setCenter(new
OpenLayers.LonLat(105.67,20.99), 9);
}
Kết quả khi chạy:
Kết quả khi chạy trang web với dòng code trên
Tạo thanh Control Panle:
//Control Panle(thanh cong cu)
zo = new
OpenLayers.Control.PanZoom({title:""})
zb = new
OpenLayers.Control.ZoomBox({title:"Zoom box"});
var panel = new
OpenLayers.Control.Panel({defaultControl: zo});
panel.addControls([
new
OpenLayers.Control.MouseDefaults({title:'Pan'}),
zb,
new
OpenLayers.Control.ZoomOut({title:"Zoom Out"}),
new
OpenLayers.Control.ZoomIn({title:"Zoom In"}),
new
OpenLayers.Control.ZoomToMaxExtent({title:"Zoom Extent"})
]);
//Khai báo biên nav là kiểu lịch sử điều hướng
nav = new
OpenLayers.Control.NavigationHistory();
//Thêm biến nav vào bản đồ
map.addControl(nav);
//Thêm công cụ lịch sử điều hướng trước và
sau
panel.addControls([nav.next,
nav.previous]);
//Add panel vào bản đồ
map.addControl(panel);
//Kết thúc Control Panle
Kết quả:
Thanh Control Panle
Tạo công cụ đo đạc( đo chiều dài
và đo diện tích).
Tạo ra menu như sau (trong trang Index.html)
<div id="hienthi_3"
style="display:none;">
<input
type="radio" name="type" value="none"
id="noneToggle" onClick="toggleControl(this);"
checked="checked" />
<label
for="noneToggle">Không dùng</label>
<input
type="radio" name="type" value="line"
id="lineToggle" onClick="toggleControl(this);" />
<label
for="lineToggle">Đo K/Cách</label>
<input
type="radio" name="type" value="polygon"
id="polygonToggle" onClick="toggleControl(this);" />
<label
for="polygonToggle">Đo D/Tích</label>
</div>
Kết quả :
Viết sự kiện Javascript sau trong trang jsopenlayer.js
var measureControls;
function init(){
….
// Thiết lập Style
var sketchSymbolizers = {
"Point": {
pointRadius:
4,
graphicName:
"square",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor:
"#666666",
strokeDashstyle:
"dash"
},
"Polygon": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor:
"#666666",
fillColor: "white",
fillOpacity: 0.3
}
};
//Gán Style định nghĩa trên
var style = new OpenLayers.Style();
style.addRules([new
OpenLayers.Rule({symbolizer: sketchSymbolizers})]);
//Đo khoảng cách và diện tích
var styleMap = new
OpenLayers.StyleMap({"default": style});
//Giá trị lấy để đo khoảng cách
measureControls = {
line: new
OpenLayers.Control.Measure (OpenLayers.Handler.Path, {persist: true,
handlerOptions:
{layerOptions: {styleMap: styleMap}}
}
),
polygon: new
OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
persist: true,
handlerOptions:
{layerOptions: {styleMap: styleMap}
}
}
)
};
var control;
for(var key in measureControls) {
control = measureControls[key];
control.events.on({
"measure":
handleMeasurements,
"measurepartial":
handleMeasurements
});
map.addControl(control);
}
}
//Hàm hỗ trợ công cụ đo
function handleMeasurements(event) {
var geometry = event.geometry;
var units = event.units;
var order = event.order;
var measure = event.measure;
var element = document.getElementById('output');
var out = "";
if(order == 1) {
//out += "measure: " +
measure.toFixed(3) + " " + units;
alert("Ket qua:"+
measure.toFixed(3) + " " + units);
} else {
//out += "measure: " + measure.toFixed(3)
+ " " + units + "<sup>2</" + "sup>";
alert("measure: " +
measure.toFixed(3) + " " + units + "2");
}
element.innerHTML = out;
}
function toggleControl(element) {
for(key in measureControls) {
var control = measureControls[key];
if(element.value == key &&
element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function toggleGeodesic(element) {
for(key in measureControls) {
var control = measureControls[key];
control.geodesic = element.checked;
}
}
//Kết
thúc Hàm hỗ trợ công cụ đo
Kết quả:
Đo khoảng cách
Đo diện tích
Các chức năng cập nhật tìm kiếm
đang hoàn thiện
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