intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Ứng dụng Ajax xây dựng Website hiển thị thông tin động của các phương tiện di chuyển có gắn thiết bị GPS lên bản đồ nền từ Google Map

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:6

91
lượt xem
13
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài viết Ứng dụng Ajax xây dựng Website hiển thị thông tin động của các phương tiện di chuyển có gắn thiết bị GPS lên bản đồ nền từ Google Map giới thiệu một giải pháp phần mềm cụ thể mà nhóm tác giả đã xây dựng và triển khai thử nghiệm thành công trong quá trình hợp tác với công ty để khai thác hiệu quả thiết bị phần cứng nói trên.

Chủ đề:
Lưu

Nội dung Text: Ứng dụng Ajax xây dựng Website hiển thị thông tin động của các phương tiện di chuyển có gắn thiết bị GPS lên bản đồ nền từ Google Map

T¹p chÝ KTKT Má - §Þa chÊt, sè 43/7-2013, tr. 94-99<br /> <br /> ỨNG DỤNG AJAX XÂY DỰNG WEBSITE HIỂN THỊ THÔNG TIN ĐỘNG<br /> CỦA CÁC PHƯƠNG TIỆN DI CHUYỂN CÓ GẮN THIẾT BỊ GPS<br /> LÊN BẢN ĐỒ NỀN TỪ GOOGLE MAP<br /> ĐẶNG VĂN NAM, CẢNH CHÍ THANH, Trường Đại học Mỏ - Địa chất<br /> Tóm tắt: Hệ thống định vị toàn cầu và các ứng dụng của nó đã và đang trở nên quan trọng với tất<br /> các lĩnh vực của đời sống con người. Chính vì vậy việc nghiên cứu cũng như khai thác ứng dụng từ<br /> nó đang là một trong những lĩnh vực rất được quan tâm. Tháng 10/2009 Chính phủ ra nghị định<br /> 91/2009/NĐ-CP về kinh doanh và điều kiện kinh doanh vận tải bằng xe ô tô, trong đó quy định tất cả<br /> các phương tiện phải lắp đặt thiết bị giám sát hành trình. Công ty TNHH Thiết bị và Công nghệ tự<br /> động Tân Á Châu là đơn vị tiên phong trong lĩnh vực sản xuất thiết bị định vị. Hiện tại công ty đã<br /> cho ra mắt sản phẩm Ibee, là thiết bị định vị được gắn lên ôtô để quản lý và theo dõi lộ trình di<br /> chuyển của các phương tiện. Tuy nhiên, để sử dụng được phần cứng thì yêu cầu đặt ra là cần phải<br /> có một hệ thống phần mềm đi cùng. Bài báo này sẽ giới thiệu một giải pháp phần mềm cụ thể mà<br /> nhóm tác giả đã xây dựng và triển khai thử nghiệm thành công trong quá trình hợp tác với công ty<br /> để khai thác hiệu quả thiết bị phần cứng nói trên.<br /> <br /> 1. Mở đầu<br /> Hệ thống định vị toàn cầu (GPS) và các ứng<br /> dụng của nó đã không còn xa lạ với chúng ta.<br /> Ban đầu mục đích của GPS là phục vụ trong<br /> quân đội, nhưng từ những năm 1980, Chính phủ<br /> Hoa Kỳ đã cho phép tất cả mọi người không<br /> phân biệt quốc tịch có thể sử dụng và hoàn toàn<br /> không phải trả phí [2]. Từ đó đến nay các thiết<br /> bị định vị ứng dụng GPS phục vụ cuộc sống<br /> ngày càng phổ biến đáp ứng nhiều mục đích<br /> khác nhau như các thiết bị định vị cá nhân, thiết<br /> bị hỗ trợ giao thông, theo dõi trẻ, theo dõi vật<br /> nuôi, các thiết bị ứng dụng trong trắc địa, bản<br /> đồ, hàng hải, hàng không… Tại Việt Nam,<br /> những năm gần đây các thiết bị định vị GPS<br /> <br /> cũng đã tương đối phổ biến. Tuy nhiên, các<br /> thiết bị này chủ yếu được nhập từ nước ngoài<br /> như Trung Quốc, Nhật Bản…<br /> Trong những năm qua, Công ty TNHH<br /> Thiết bị và Công nghệ tự động Tân Á Châu là<br /> một trong những đơn vị tiên phong trong việc<br /> nghiên cứu các ứng dụng của hệ thống định vị<br /> GPS cho nhu cầu dân sinh. Một trong số những<br /> kết quả nổi bật mà công ty đã đạt được đó là<br /> vào cuối năm 2009, tại khu công nghệ cao Láng<br /> Hòa Lạc, Công ty đã nghiên cứu thành công và<br /> cho ra mắt thiết bị định vị vệ tinh GPS với tên<br /> gọi “Hộp đen thông minh cho các phương tiện<br /> di chuyển – Ibee (Intelligent Blackbox<br /> Everywhere Everytime)”.<br /> <br /> Hình 1. Mô hình hoạt động của phần cứng và vị trí của website trong hệ thống<br /> 94<br /> <br /> Khi thiết bị được gắn vào ôtô, trong quá<br /> trình ôtô di chuyển nó sẽ thu tín hiệu GPS từ vệ<br /> tinh sau đó tổng hợp các thông tin của tín hiệu<br /> GPS thu được kết hợp với các thông số ghi<br /> nhận từ các cảm biến và tiến hành mã hoá các<br /> thông số này tạo thành một chuỗi dữ liệu tại<br /> từng thời điểm theo khoảng thời gian thiết lập<br /> (5s, 10s,…).<br /> - Dữ liệu của vệ tinh bao gồm các thông số:<br /> Kinh độ, vĩ độ, vận tốc di chuyển của ô tô, góc<br /> quay của phương tiện, thời điểm phát tín hiệu<br /> của vệ tinh (giờ - phút - giây), ngày phát tín<br /> hiệu (ngày - tháng - năm)<br /> - Dữ liệu của thiết bị bao gồm các thông số:<br /> Trạng thái quạt, trạng thái khoá xe, trạng thái<br /> thẻ nhớ, trạng thái khẩn cấp, cảm biết nhiệt độ,<br /> cổng hồng ngoại, điều kiển role…<br /> Dữ liệu tổng hợp từ các thiết bị sẽ được gửi<br /> về Máy chủ thông qua các trạm phát sóng BTS<br /> bằng phương thức kết nối GPRS. Máy chủ sẽ có<br /> nhiệm vụ thu nhận, giải mã dữ liệu và lưu trữ<br /> lại các thông tin này. Mô hình hoạt động của<br /> phần cứng và hệ thống website được minh họa<br /> trong hình 1.<br /> Bài toán đặt ra ở đây là trên cơ sở các số<br /> liệu mà thiết bị gửi về cần phải có một phần<br /> mềm chuyên dụng để xử lý các dữ liệu đó và<br /> chuyển đổi thành các đối tượng hiển thị lên trên<br /> bản đồ cho người dùng theo dõi tình trạng hiện<br /> tại của phương tiện và phục vụ cho việc quản lý<br /> các phương tiện này một cách hiệu quả. Để phát<br /> triển ứng dụng, một trong những kỹ thuật được<br /> sử dụng đó là Ajax. Kỹ thuật này sẽ thực hiện<br /> việc xử lý một thao tác quan trọng của hệ thống<br /> đó là tự động cập nhật trạng thái mới nhất của<br /> các phương tiện thông qua việc tải đối tượng xe<br /> và hiển thị lên bản đồ. Đồng thời kỹ thuật này<br /> <br /> cũng giải quyết một vấn đề thường gặp đối với<br /> các website thao tác với bản đồ đó là tốc độ tải<br /> trang. Việc chia nhỏ dữ liệu và chỉ hiển thị<br /> những phần thay đổi cần thiết giúp cho tăng tốc<br /> độ của website lên đáng kể. Các phần dưới đây<br /> sẽ trình bày về Ajax và việc triển khai Ajax vào<br /> hệ thống website để giải quyết các vấn đề nêu<br /> trên.<br /> 2. Ứng dụng Ajax vào bài toán<br /> 2.1. Khởi tạo đối tượng Ajax<br /> Ajax là từ viết tắt của Asynchronous<br /> JavaScript and XML (JavaScript và XML<br /> không đồng bộ), là bộ công cụ cho phép tăng<br /> tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu<br /> và chỉ hiển thị những gì cần thiết, thay vì tải lại<br /> toàn bộ trang web. Ajax là công nghệ kết hợp<br /> hai tính năng mạnh của JavaScript được các nhà<br /> phát triền đánh giá rất cao. Trên thực tế Ajax là<br /> tập hợp các công nghệ, trong đó mỗi công nghệ<br /> cung cấp một hệ thống cơ sở nền tảng cho thiết<br /> kế và phát triển ứng dụng web. Ajax bao gồm :<br /> - Thể hiện trang web theo tiêu chuẩn<br /> XHTML và CSS.<br /> - Nâng cao tính năng động và tương tác<br /> bằng DOM.<br /> - Trao đổi và xử lý dữ liệu bằng XML và<br /> XSLT.<br /> - Truy cập dữ liệu theo kiểu bất đồng bộ<br /> (Asynchronous) bằng XMLHttpResquest.<br /> - Sử dụng JavaScript để liên kết các thành<br /> phần trên lại với nhau.<br /> Trong các thành phần ở trên, điểm mấu chốt<br /> của Ajax nằm ở đối tượng XMLHttpRequest<br /> [1]. Để có thể sử dụng được XMLHttpRequest<br /> ta cần phải khai báo đối tượng này qua hàm<br /> GetXmlHttpObject dưới đây:<br /> <br /> function GetXmlHttpObject(){<br /> var Ajax=null;<br /> try{Ajax=new XMLHttpRequest();}<br /> catch (e)<br /> {<br /> Try {Ajax=new ActiveXObject("Msxml2.XMLHTTP");}<br /> catch (e){Ajax = new ActiveXObject("Microsoft.XMLHTTP");}<br /> }<br /> return Ajax;}[1]<br /> <br /> 95<br /> <br /> Khi đối tượng XMLHttpRequest đã được<br /> khai báo thì chúng ta đã có thể sử dụng đối<br /> tượng này cho ứng dụng web của mình. Trong<br /> hình 2 minh họa mô hình ứng dụng web truyền<br /> thống và ứng dụng web khi sử dụng kỹ thuật<br /> Ajax.<br /> <br /> được sử dụng để tải dữ liệu mới của các thiết bị<br /> và hiển thị vị trí cùng các thông tin mới đó lên<br /> website mà không phải tải lại các thành phần<br /> không liên quan.<br /> Cơ chế hoạt động của Ajax trong website<br /> được minh họa như sơ đồ hình 3. Cứ mỗi một<br /> khoảng thời gian được thiết lập (timeset) hệ<br /> thống sẽ tự động kết nối tới máy chủ (server) và<br /> đọc các thông tin trong tập tin dữ liệu XML (chi<br /> tiết về tập tin dữ liệu này được trình bày ở phần<br /> dưới).<br /> <br /> Hình 2. Mô hình ứng dụng web truyền thống và<br /> có sử dụng Ajax<br /> 2.2. Tích hợp Ajax vào website<br /> Một trong những vấn đề mà hệ thống<br /> website phải thực hiện đó là quá trình hiển thị<br /> các đối tượng xe lên bản đồ nền. Do là hiển thị<br /> thông tin động, tức là ngay khi thiết bị gửi<br /> thông tin về máy chủ thì hệ thống phải xử lý và<br /> hiển thị vị trí, thông tin hiện thời của phương<br /> tiện đó. Chính vì thế hệ thống sẽ liên tục tải dữ<br /> liệu mới của các đối tượng xe và hiển thị chúng<br /> trên bản đồ. Như vậy, chỉ có vị trí và thông tin<br /> của các đối tượng xe là thay đổi theo thời gian<br /> và liên tục còn các thành phần khác của website<br /> thì không cần thiết. Do vậy, nếu sử dụng kỹ<br /> thuật bình thường thì mỗi lần hiển thị thông tin<br /> mới lại phải tải lại toàn bộ trang web bao gồm<br /> cả đối tượng xe, bản đồ và các thành phần khác.<br /> Dẫn đến hệ thống phải xử lý rất nhiều và không<br /> khả thi. Một sự lựa chọn tối ưu trong trường<br /> hợp này đó là sử dụng Ajax. Kỹ thuật Ajax sẽ<br /> <br /> Hình 3. Cơ chế hoạt động của Ajax<br /> trong Website<br /> Nhờ sử dụng kỹ thuật Ajax nên hệ thống<br /> chỉ tác dụng lên các đối tượng xe còn các thành<br /> phần khác không thay đổi, có nghĩa là không<br /> cần phải nạp lại toàn bộ trang web khi hiển thị<br /> trạng thái mới của xe. Trong ứng dụng hàm<br /> loadXMLcar_googlemap() sẽ thực hiện việc<br /> này.<br /> <br /> function loadXMLcar_googlemap(filename){<br /> url=filename+'.xml';<br /> xmlhttp=null;<br /> xmlhttp=GetXmlHttpObject();<br /> if (xmlhttp!=null){<br /> xmlhttp.onreadystatechange=onResponse_googlemap;<br /> xmlhttp.open("GET",url,true);<br /> xmlhttp.send(null);}<br /> else{<br /> alert("Your browser does not support XMLHTTP.");}<br /> timeset=setTimeout("loadXMLcar_googlemap()",5000);<br /> }<br /> <br /> 96<br /> <br /> Tệp dữ liệu XML được truyền vào thông<br /> qua biến filename. Trong đó cần quan tâm<br /> tới thời gian ấn định (timeset) để hệ thống<br /> tự động tải lại thông tin của đối tượng xe<br /> được thiết lập thông qua hàm setTimeout(),<br /> trong hàm xây dựng ở trên thời gian thiết<br /> lập là 5 giây. Mỗi một xe gắn thiết bị được<br /> xây dựng thành một đối tượng CarObject,<br /> như vậy cứ sau khoảng thời gian thiết lập hệ<br /> thống lại tự động gọi lại hàm<br /> loadXMLcar_googlemap() và lấy các thông<br /> tin mới nhất của các đối tượng này để cập<br /> nhật lại các thông số và hiển thị vị trí mới<br /> trên bản đồ.<br /> <br /> Như đã trình bày trong phần 1, sau khi dữ<br /> liệu được tổng hợp và gửi về máy chủ, Máy chủ<br /> sẽ phân tách và lưu trữ dữ liệu vào các bảng.<br /> Máy chủ sử dụng hệ quản trị cơ sở dữ liệu SQL<br /> Server 2008. Ngoài việc lưu trữ dữ liệu trong<br /> các bảng, hệ thống website còn sử dụng một tệp<br /> dữ liệu XML. Tệp dữ liệu này sẽ lưu trữ thông<br /> tin của các thiết bị ở thời điểm sau cùng. Tệp dữ<br /> liệu này được sử dụng trong việc hiển thị thông<br /> tin hiện thời của xe. Khi dữ liệu của thiết bị gửi<br /> về máy chủ, các dữ liệu này sẽ được lưu trữ<br /> trong các bảng tương ứng và đồng thời sẽ cập<br /> nhật các dữ liệu mới của các đối tượng xe vào<br /> trong tệp XML. Cấu trúc của tệp XML như sau:<br /> <br /> <br /> <br /> 1 % Mã xác định người dùng<br /> NASIA00000 % Mã thiết bị định vị<br /> 0 % Số xe<br /> 1 % Mã xác định công ty<br /> 0 % Thông số xác định trạng thái cửa<br /> 0 % Thông số xác định xe có khách hay không<br /> 100 % Thông số xác định xăng<br /> 100 % Thông số xác định dầu<br /> 105.79975 % Thông số xác định tọa độ X của xe<br /> 20.9939333333333 % Thông số xác định tọa độ Y của xe<br /> 50 % Thông số xác định tốc độ xe<br /> 50 %Thông số xác định nhiệt độ xe<br /> 112 % Thông số xác định hướng di chuyển của xe<br /> 3 % Thông số xác định trạng thái xe<br /> 12/22/2009 10:01:06 AM % Thông số thời gian<br /> <br /> ………………….. .. ..<br /> <br /> <br /> 3. Thiết kế và xây dựng website<br /> <br /> Hình 4. Giao diện chính của Website<br /> 97<br /> <br /> Căn cứ vào các yêu cầu chung của việc<br /> thiết kế website kết hợp với khảo sát phân tích<br /> bài toán, hệ thống website được xây dựng có<br /> giao diện như hình 4. Tất cả các đối tượng xe sẽ<br /> được hiển thị lên trên bản đồ thông qua biểu<br /> tượng là hình các ô tô. Mỗi hình ô tô khác nhau<br /> thể hiện một trạng thái của xe như: xe đang<br /> dừng, đang chạy, xe mất liên lạc… Khi muốn<br /> biết thông tin chi tiết của đối tượng xe nào<br /> người dùng chỉ cần kích lên xe tương ứng, một<br /> bảng tổng hợp các thông số hiện thời của xe sẽ<br /> hiện lên.<br /> <br /> Website được xây dựng ngoài tính năng<br /> hiển thị được các đối tượng xe lên trên bản đồ<br /> nền, đồng thời vị trí và thông tin của xe liên tục<br /> được cập nhật. Hệ thống cũng cho phép xem lại<br /> lộ trình của xe đã di chuyển trong quá khứ, mô<br /> phỏng lại quá trình di chuyển một cách trực<br /> quan (minh họa hình 5). Ngoài ra còn cho phép<br /> thực hiện các chức năng như theo dõi xe, tìm<br /> kiếm định vị xe và các chức năng tổng hợp báo<br /> cáo thống kê.<br /> <br /> Hình 5. Chức năng xem lại lộ trình di chuyển của xe tại một số thời điểm bất kỳ<br /> 98<br /> <br />
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2