Phần 12. Trực quan hóa dữ liệu vị trí

0
1333

Video dưới đây giới thiệu tổng quan về dịch vụ Azure Maps với IoT- nội dung sẽ được trình bày trong bài viết này.

Bài viết trước đã giới thiệu cách lấy dữ liệu GPS từ các cảm biến để lưu vào đám mây trong bộ lưu trữ sử dụng serverless code. Dưới đây sẽ hướng dẫn cách trực quan hóa dữ liệu đó trên bản đồ Azure; trình bày cách tạo bản đồ trên trang web; cách định dạng dữ liệu GeoJSON và sử dụng định dạng này để vẽ tất cả các điểm GPS đã thu được trên bản đồ.

Các nội dung chính trong bài viết:

1. Khái niệm trực quan hóa dữ liệu.

2. Khái niệm dịch vụ bản đồ

3. Cách tạo tài nguyên Bản đồ Azure

4. Cách hiển thị bản đồ trên trang web

5. Cách định dạng GeoJSON

6. Cách vẽ dữ liệu GPS trên Bản đồ bằng GeoJSON

Trong bài viết có đề cập đến HTML và JavaScript. Tìm hiểu thêm về phát triển web bằng HTML và JavaScript tại Web development for beginners.

1. Khái niệm trực quan hóa dữ liệu.

Trực quan hóa dữ liệu là cách biểu thị dữ liệu sao cho người dùng dể hiểu hơn. Trực quan hóa dữ liệu thường được kết hợp với biểu đồ và đồ thị để biểu thị dữ liệu bằng hình ảnh giúp người dùng không chỉ hiểu hơn về dữ liệu mà còn giúp họ trong việc đưa ra những quyết định.

Ví dụ: trong project về trang trại, người dùng có được các thiết lập về độ ẩm của đất. Bảng dữ liệu về độ ẩm của đất được ghi lại mỗi giờ cho ngày 01/6/2021 có thể như sau:

NgàyDữ liệu đọc đượcNgàyDữ liệu đọc được
01/06/2021 00:0025701/06/2021 12:00420
01/06/2021 01:0026801/06/2021 13:00408
01/06/2021 02:0029501/06/2021 14:00431
01/06/2021 03:0030501/06/2021 15:00462
01/06/2021 04:0032501/06/2021 16:00432
01/06/2021 05:0035901/06/2021 17:00402
01/06/2021 06:0039801/06/2021 18:00387
01/06/2021 07:0041001/06/2021 19:00360
01/06/2021 08:0042901/06/2021 20:00358
01/06/2021 09:0045101/06/2021 21:00354
01/06/2021 10:0046001/06/2021 22:00356
01/06/2021 11:0045201/06/2021 23:00362

Các thông tin trong bảng là các con số không có bất kỳ ý nghĩa nào, do đó người dùng rất khó hiểu được dữ liệu này. Bước đầu tiên để trực quan hóa dữ liệu là biểu thị dữ liệu đó dưới dạng biểu đồ:

Thêm thông tin cho biểu đồ trên bằng cách thêm đường 450, tương ứng với độ ẩm của đất khi bắt đầu bật hệ thống tưới nước tự động.

Nhìn vào biểu đồ này dễ dàng thấy được không chỉ độ ẩm của đất mà còn thấy được các điểm tương ứng khi bật hệ thống tưới nước.

Ngoài biểu đồ, có rất nhiều cách khác để trực quan hóa dữ liệu. Các thiết bị IoT theo dõi thời tiết có các ứng dụng web hoặc ứng dụng dành cho thiết bị di động để trực quan hóa điều kiện thời tiết sử dụng các biểu tượng như biểu tượng đám mây cho những ngày nhiều mây, biểu tượng đám mây mưa cho những ngày mưa, v.v.

Hình ảnh trực quan tốt nhất giúp người dùng đưa ra quyết định nhanh chóng. Ví dụ, dựa vào dữ liệu hiển thị từ đồng hồ đo của các máy móc công nghiệp thì rất khó để xử lý dữ liệu, nhưng nếu có tín hiệu đèn đỏ nhấp nháy cảnh báo khi xảy ra sự cố sẽ giúp người dùng dễ dàng đưa ra quyết định hơn.

Cách trực quan hóa dữ liệu GPS rõ ràng nhất là vẽ dữ liệu trên bản đồ. Ví dụ, một bản đồ hiển thị thông tin các xe tải giao hàng giúp công nhân của nhà máy biết khi nào xe tải đến. Nếu bản đồ cung cấp nhiều thông tin hơn như hình ảnh của các xe tải tại vị trí hiện tại và thông tin nội dung về các xe đó thì các công nhân có thể lập kế hoạch cho phù hợp, như khi thấy một chiếc xe tải đông lạnh gần đó, họ biết để chuẩn bị không gian trong tủ lạnh.

2. Khái niệm dịch vụ bản đồ

Bản đồ là một nội dung thú vị, có rất nhiều loại bản đồ để lựa chọn như Bing Maps, Leaflet, Open Street Maps, and Google Maps. Bài viết này sẽ tìm hiểu về Bản đồ Azure và cách chúng hiển thị dữ liệu GPS.

Azure Maps là “tập hợp các dịch vụ không gian địa lý và SDKs sử dụng dữ liệu lập bản đồ mới để cung cấp ngữ cảnh địa lý cho các ứng dụng web và thiết bị di động.” Các nhà phát triển được cung cấp các công cụ để tạo bản đồ đẹp, có thể tương tác giúp đề xuất các tuyến đường giao thông, cung cấp thông tin về các sự cố giao thông, điều hướng trong nhà, khả năng tìm kiếm, thông tin độ cao, dịch vụ thời tiết…

Thử nghiệm với một số mẫu mã ánh xạ

Có thể chọn cách hiển thị bản đồ dưới dạng canvas trống, ô xếp, hình ảnh vệ tinh, hình ảnh vệ tinh với các con đường được xếp chồng lên nhau, nhiều loại bản đồ thang độ xám khác nhau, bản đồ có tô mờ để hiển thị độ cao, bản đồ chế độ xem ban đêm và bản đồ có độ tương phản cao. Người dùng cập nhật thông tin theo thời gian thực trên bản đồ bằng cách tích hợp chúng với Azure Event Grid. Người dùng cũng có thể kiểm soát hành vi và giao diện bản đồ bằng cách bật các điều khiển khác nhau cho phép bản đồ phản ứng với các sự kiện như chụm, kéo và nhấp. Để kiểm soát giao diện bản đồ, người dùng có thể thêm các lớp gồm bong bóng, đường, đa giác, bản đồ nhiệt, v.v. Tùy vào lựa chọn SDK mà người dùng có thể triển khai kiểu bản đồ mong muốn.

Có thể truy cập các API của Azure Maps sử dụng REST API, Web SDK hoặc nếu đang xây dựng một ứng dụng dành cho thiết bị di động, Android SDK.

Bài viết sẽ sử dụng Web SDK để vẽ bản đồ và hiển thị đường dẫn vị trí GPS của cảm biến

3. Cách tạo tài nguyên Bản đồ Azure

Bước đầu tiên là tạo một tài khoản Azure Maps.

* Cách tạo tài nguyên Bản đồ Azure

Chạy lệnh sau từ Terminal hoặc Command Prompt để tạo tài nguyên Azure Maps trong nhóm tài nguyên cảm biến gps:

az maps account create --name gps-sensor \
                       --resource-group gps-sensor \
                       --accept-tos \
                       --sku S1

Thao tác này tạo tài nguyên Bản đồ Azure, gọi là cảm biến gps. Cấp đang được sử dụng là S1, là cấp trả phí bao gồm một loạt các tính năng với lượng lớn các cuộc gọi miễn phí.

Xem chi phí sử dụng Azure Maps tại trang Azure Maps pricing.

Sử dụng lệnh sau để lấy khóa API cho tài nguyên bản đồ:

az maps account keys list --name gps-sensor \
                          --resource-group gps-sensor \
                          --output table

Sao chép giá trị PrimaryKey.

4. Cách hiển thị bản đồ trên trang web

Bước tiếp theo là hiển thị bản đồ trên trang web. Ở đây chỉ sử dụng một tệp html cho ứng dụng web nhỏ. Lưu ý: trong môi trường sản xuất hoặc nhóm, ứng dụng web rất có thể sẽ có nhiều bộ phận chuyển động hơn.

* Cách hiển thị bản đồ trên trang web

1. Tạo một File có tên index.html trong một thư mục trên máy tính cục bộ. Thêm đánh dấu HTML để giữ một bản đồ:

<html>
<head>
    <style>
        #myMap {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body onload="init()">
    <div id="myMap"></div>
</body>
</html>

Bản đồ sẽ tải trong myMap div. Một vài kiểu cho phép kéo dài chiều rộng và chiều cao của trang. div là một phần của trang web có thể được đặt tên và tạo kiểu.

2. Sau khi mở <head>, thêm style sheet kiểu bên ngoài để kiểm soát hiển thị bản đồ và tập lệnh bên ngoài từ SDK Web nhằm quản lý hành vi:

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

Style sheet kiểu này chứa các cài đặt về giao diện của bản đồ và File tập lệnh chứa mã để tải bản đồ. Việc thêm mã này tương tự như bao gồm các tệp tiêu đề C ++ hoặc nhập các mô-đun Python.

3. Sau đó thêm một đoạn lệnh sau để khởi chạy bản đồ:

<script type='text/javascript'>
    function init() {
        var map = new atlas.Map('myMap', {
            center: [-122.26473, 47.73444],
            zoom: 12,
            authOptions: {
                authType: "subscriptionKey",
                subscriptionKey: "<subscription_key>",

            }
        });
    }
</script>

Thay thế <subscription_key> bằng khóa API cho tài khoản Azure Maps.

Khi đó sẽ tải được bản đồ, nên tập trung vào khu vực Seattle trên trang index.html trong trình duyệt web.

Thử nghiệm với các thông số thu phóng và trung tâm để thay đổi cách hiển thị bản đồ của bạn. Có thể thêm các tọa độ khác nhau tương ứng với kinh độ và vĩ độ của dữ liệu để căn giữa bản đồ.

Cài đặt máy chủ http giúp dễ dàng làm việc với các ứng dụng web cục bộ hơn. Cài đặt node.jsnpm trước khi sử dụng công cụ này. Sau đó, có thể điều hướng đến vị trí của File index.html và nhập http-server. Ứng dụng web sẽ mở trên máy chủ web cục bộ http://127.0.0.1:8080/.

5. Cách định dạng GeoJSON

Xem định dạng GeoJSON mà Azure Maps yêu cầu, sau khi đã có ứng dụng web với bản đồ hiển thị, cần trích xuất dữ liệu GPS từ tài khoản lưu trữ và hiển thị nó trong một lớp điểm đánh dấu trên bản đồ.

GeoJSON là một đặc tả JSON tiêu chuẩn mở với định dạng đặc biệt được thiết kế để xử lý dữ liệu địa lý cụ thể. Tìm hiểu GeoJSON bằng cách kiểm tra dữ liệu mẫu bằng geojson.io, đây cũng là một công cụ hữu ích để gỡ lỗi các tệp GeoJSON.

Dữ liệu GeoJSON có mẫu tương tự như sau:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.10237979888916,
          57.164918677004714
        ]
      }
    }
  ]
}

Lưu ý cách lồng dữ liệu vào nhau dưới dạng một Feature trong FeatureCollection. Trong object đó, có thể tìm thấy geometry với coordinates để tìm ra vĩ độ và kinh độ.

Khi xây dựng geoJSON, chú ý thứ tự của vĩ độ và kinh độ trong đối tượng. GeoJSON cần dữ liệu theo thứ tự lon, lat của điểm chứ không phải lat, lon.

Geometry có nhiều loại khác nhau, như một điểm đơn lẻ hoặc một đa giác. Trong ví dụ này là một điểm có hai tọa độ: kinh độ và vĩ độ.

Azure Maps hỗ trợ GeoJSON tiêu chuẩn mở rộng với một số tính năng nâng cao bao gồm khả năng vẽ vòng tròn và các hình học khác.

6. Cách vẽ dữ liệu GPS trên Bản đồ bằng GeoJSON

Sử dụng dữ liệu từ bộ nhớ đã xây dựng trong bài viết trước, dữ liệu được lưu trữ dưới dạng một số File trong bộ nhớ blob, vì vậy cần truy xuất các File và phân tích cú pháp để Azure Maps có thể sử dụng dữ liệu.

* Cách định cấu hình bộ nhớ để truy cập từ một trang web

Trước khi thực hiện cuộc gọi đến bộ nhớ để tìm nạp dữ liệu, để tránh xảy ra lỗi trong bảng điều khiển trình duyệt, cần đặt quyền cho CORS trên bộ nhớ này để các ứng dụng web bên ngoài đọc dữ liệu của nó.

CORS là viết tắt của “Cross-Origin Resource Sharing” và thường cần được đặt rõ ràng trong Azure vì lý do bảo mật. Nó ngăn các trang web không mong muốn truy cập dữ liệu.

  1. Chạy lệnh sau để bật CORS:
az storage cors add --methods GET \
                    --origins "*" \
                    --services b \
                    --account-name <storage_name> \
                    --account-key <key1>

Thay thế <storage_name> bằng tên tài khoản lưu trữ. Thay thế <key1> bằng khóa tài khoản cho tài khoản lưu trữ.

Lệnh này cho phép bất kỳ trang web nào (ký tự “*” có nghĩa là bất kỳ) thực hiện yêu cầu GET, tức là lấy dữ liệu từ tài khoản lưu trữ. “–Services b” nghĩa là chỉ áp dụng cài đặt này cho các blob.

* Cách tải dữ liệu GPS từ bộ nhớ

1. Thay thế toàn bộ nội dung của hàm init bằng đoạn code sau:

fetch("https://<storage_name>.blob.core.windows.net/gps-data/?restype=container&comp=list")
    .then(response => response.text())
    .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
    .then(xml => {
        let blobList = Array.from(xml.querySelectorAll("Url"));
            blobList.forEach(async blobUrl => {
                loadJSON(blobUrl.innerHTML)                
    });
})
.then( response => {
    map = new atlas.Map('myMap', {
        center: [-122.26473, 47.73444],
        zoom: 14,
        authOptions: {
            authType: "subscriptionKey",
            subscriptionKey: "<subscription_key>",

        }
    });
    map.events.add('ready', function () {
        var source = new atlas.source.DataSource();
        map.sources.add(source);
        map.layers.add(new atlas.layer.BubbleLayer(source));
        source.add(features);
    })
})

Thay thế <storage_name> bằng tên tài khoản lưu trữ. Thay thế <subscription_key> bằng khóa API cho tài khoản Azure Maps.

Đầu tiên, mã tìm nạp dữ liệu GPS từ vùng chứa blob bằng cách sử dụng điểm cuối URL được tạo bằng tên tài khoản lưu trữ. URL này truy xuất từ gps-data, cho biết loại tài nguyên là một vùng chứa (restype = container) và liệt kê thông tin về tất cả các blob. Danh sách này không trả về chính các blob, nhưng sẽ trả về một URL cho mỗi blob để tải dữ liệu về blob.

Có thể đặt URL này vào trình duyệt để xem chi tiết tất cả các blob trong vùng chứa. Mỗi mục sẽ có một thuộc tính Url mà người dùng cũng có thể tải trong trình duyệt của mình để xem nội dung của blob.

Mã này tải từng blob, gọi một hàm loadJSON, sau đó nó tạo quyền điều khiển bản đồ và thêm mã vào ready event. Sự kiện này được gọi khi bản đồ được hiển thị trên trang web.

Sự kiện đã sẵn sàng tạo ra nguồn dữ liệu Azure Maps – vùng chứa dữ liệu GeoJSON sẽ được phổ biến sau này. Nguồn dữ liệu này sau đó được sử dụng để tạo một lớp bong bóng- là tập hợp các vòng tròn trên bản đồ tập trung vào mỗi điểm trong GeoJSON.

2. Thêm hàm loadJSON vào khối tập lệnh, bên dưới hàm init:

var map, features;

function loadJSON(file) {
    var xhr = new XMLHttpRequest();
    features = [];
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                gps = JSON.parse(xhr.responseText)
                features.push(
                    new atlas.data.Feature(new atlas.data.Point([parseFloat(gps.gps.lon), parseFloat(gps.gps.lat)]))
                )
            }
        }
    };
    xhr.open("GET", file, true);
    xhr.send();
}    

Hàm này được gọi bởi quy trình tìm nạp để phân tích cú pháp thông qua dữ liệu JSON và chuyển đổi nó để được đọc dưới dạng tọa độ kinh độ và vĩ độ như geoJSON. Sau khi được phân tích cú pháp, dữ liệu được đặt như một phần của geoJSON Feature. Bản đồ sẽ được khởi tạo và các bong bóng nhỏ sẽ xuất hiện xung quanh đường dẫn mà dữ liệu đang vẽ:

3. Tải trang HTML trong trình duyệt để tải bản đồ, sau đó tải tất cả dữ liệu GPS từ bộ lưu trữ và vẽ biểu đồ trên bản đồ.

Biên dịch: Bắc Đặng

Để cập nhật tin tức công nghệ mới nhất và các sản phẩm của công ty AIoT JSC, vui lòng truy cập link: http://aiots.vn hoặc linhkienaiot.com

0 0 Phiếu bầu
Article Rating
Subscribe
Notify of
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả các bình luận