Giaosucan's blog - Chia sẻ kiến thức theo cách bá đạo

Ticker

20/recent/ticker-posts

CESIUM – WebGL Map Engine – hướng đi mới về bản đồ 3D

Đã từ lâu, con người luôn muốn tìm hiểu về địa lý. Cũng vì thế, bản đồ ra đời. Từ tấm bản đồ sơ khai đầu tiên được vẽ trên đất sét ở Ai Cập hơn 4000 năm trước, cho đến nay, khi khoa học kĩ thuật phát triển, các kĩ sư Google đã phát minh ra Google Map, Google Street View, cho chúng ta có cái nhìn rõ ràng về địa lý thế giới
Related image
Google Map
Nói về công nghệ hỗ trợ trong hệ thống thông tin địa lý (GIS), ArcGIS là hệ thống GIS hàng đầu, cung cấp giải pháp toàn diện để quản lý, cập nhật phân tích thông tin địa lý.
Tuy nhiên, ArcGIS có chi phí bản quyền tương đối cao nên việc tiếp cận công nghệ 3D map bị hạn chế.
Bài viết này muốn giới thiệu đến một hướng tiếp cận mới trong việc phát triển ứng dụng bản đồ 3D. Đó là sử dụng CESIUM, một nền tảng open source, miễn phí.




Cesium là gì

Cesium là một bộ thư viên Javascript mã nguồn mở chuyên về 3D globes và bản đồ, được phát triển bởi Analytical GraphicsBentley System.
Cesium được xây dựng dựa trên nền tảng WebGL, một cross-platform, thư viện đồ họa 3D dành cho web, tương thích với nhiều trình duyệt máy tính. Đó là sản phẩm kết hợp giữa HTML5 và OpenGL ES2.0
Bạn có thể xem demo về Cesium ở đây
Do dựa trên nền tảng WebGL nên bạn chỉ cần trình duyệt hỗ trợ HTML5 và JS là đủ, thường là Chrome

Cesium APIs

Cesium cung cấp một bộ APIs đầy đủ để hỗ trợ developer phát triển ứng dụng bản đồ 3D bao gồm
Cesium APIs


Visualizing Spatial Data

Cesium cung cấp Entity API để vẽ spatial data như điểm, markers, đưởng thẳng, mô hình và hình ảnh... Những API này được chia thành 2 loại

  • Low-Level APIs liên quan đến xử lý đồ họa
  • High-Level APIs hay còn gọi là Entity API chuyên xử lý visualize data
Imagery Layers
Cung cấp APIs cho phép developer hiển thị từng layer khác nhau trên bản đồ, tương tự layers trong photoshops. Chẳng hạn như hiển thị layers thành phố, layers nhà cửa, layers công viên trên bản đồ
Ví dụ APIs addImageryProvider cho phép hiển thị một layer trên bản đồ
var layers = viewer.scene.imageryLayers;var blackMarble = layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({    url: '//cesiumjs.org/tilesets/imagery/blackmarble',    maximumLevel: 8,    credit: 'Black Marble imagery courtesy NASA Earth Observatory'}));
3D models
Cesium cung cấp bộ APIs cho phép developer tích hợp chức năng đọc và hiển thị các định dạng 3D models như glTF, Collada(.dae)
Ví dụ, sử dung api Cesium.Model.fromGltf để đọc file định dạng glTF để hiển thị ảnh 3D
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(    Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));var model = scene.primitives.add(Cesium.Model.fromGltf({    url: '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',    modelMatrix: modelMatrix,    scale: 200.0}));

Geometry

Sử dụng Cesium, developer có thể vẽ rất nhiều loại hình học khác nhau như đa giác, khối hộp
Ví dụ bạn muốn vẽ một blue box, có thể sử dụng entity API như sau
var viewer = new Cesium.Viewer('cesiumContainer');

var blueBox = viewer.entities.add({

   name: 'Blue box',
   position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
   box: {
       dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
       material: Cesium.Color.BLUE
   }
});


Cesium Case Study

Phần này sẽ giới thiệu đến các bạn giải pháp sử dụng Cesium cho một project cụ thể
Khách hàng muốn phát triển một hệ thống bao gồm Web application và Mobile Application với các tính năng sau

  • Cho phép đọc và hiển thị dữ liệu bản đồ 3D từ shapes file
  • Hiển thị 3D models như nhà cửa, công trình xây dựng
  • Chức năng CMS, cho phép user có thể thêm, xóa các layers
  • Multimedia (photos videos…)

Do yêu cầu của khách hàng, chỉ được sử dụng nền tảng miễn phí để giảm chi phí nên Cesium là giải pháp hợp lý.
Giải pháp được đưa ra như sau
Cesium architecture

  • Web Application sẽ sử dụng CesiumJS chạy trên NodeJS
  • Mobile App sử dụng Framework Cordova cho phép cross-platform, chạy trên Android và iOS
  • Web Service được phát triển bằng C# Web API chạy trên IIS server (có thể thay thế bằng PHP/MySQL chạy trên Linux server để tiết kiệm chi phí)
  • Cơ sở dữ liệu dùng NoSQL, môi trường MongoDB

Dữ liệu bản đồ được lưu trong Shapefiles. Một định dạng geospatial vectors khá thông dụng, được phát triển Esri. Định dạng shapefiles lưu thông tin bản đồ như điểm, đường, đa giác…
Do đó cần phải phát triển một module viết bằng javascript đọc những file này và output ra GeoJson data. Một dạng Json data nhưng chuyện dụng để lưu dữ liệu địa lý
Ví dụ về một cấu trúc GeoJson
{ "type": "FeatureCollection",
   "features": [
     { "type": "Feature",
       "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
       "properties": {"prop0": "value0"}
       },
     { "type": "Feature",
       "geometry": {
         "type": "LineString",
         "coordinates": [
           [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
           ]
         },
       "properties": {
         "prop0": "value0",
         "prop1": 0.0
         }
       },
     { "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
              [100.0, 1.0], [100.0, 0.0] ]
            ]
        },
        "properties": {
          "prop0": "value0",
          "prop1": {"this": "that"}
          }
        }
      ]
    }


Do cấu trúc của GeoJson rất phức tạp nên nếu sử dụng cơ sở dữ liệu quan hệ như Oracle, MySQL là không hợp lý do khó khăn trong việc lưu trữ và truy vấn dữ liệu. Nên giải pháp hợp lý nhất là sử dụng MongoDB, cơ sở dữ liệu NoSQL có tốc độ truy vấn và lưu trữ đơn giản và nhanh hơn hẳn.
Mỗi file shapes sẽ được đọc ra GeoJSon và được lưu vào database như một document, tập hợp nhiều file shapes có liên quan được lưu trong NoSQL database như một collection
(Document, Collection là một khái niệm của NoSQL tương tự như record, table của SQL quan hệ)
Dữ liệu được lưu trong DB như hình dưới


Việc lưu, save data sẽ được xử lý ở web service. Web app và mobile app sẽ call Restful API đến service để lấy dữ liệu
Dữ liệu trả về sẽ được hiển thị trên bản đồ dùng Cesium API
Ví dụ
var geojson = {    drawLayer: function (viewer, dataSourceName, geojson) {        var source = new Cesium.GeoJsonDataSource(dataSourceName);        viewer.dataSources.add(source);        source.load(geojson);        viewer.zoomTo(source);    },
Việc gọi Restful API được thực hiện bằng Ajax như thông thường
Ảnh dưới là minh họa dữ liệu được lấy từ MongoDB và hiển thị trên bản đồ
Demo cesium
Các thông tin trên bản đồ được hiển thị khi user click các điểm tương ứng
Demo cesium


Kết luận

Trên đây chỉ là giới thiệu một số chức năng cơ bản của Cesium và ứng dụng vào giải bài toán cụ thể. Thực tế Cesium còn hỗ trợ rất nhiều tính năng khác như Animation, Scene, 3D Graphics…Trong tương lai, Cesium thực sự là một giải pháp hợp lý với chi phí rẻ trong việc phát triển ứng dụng bản đồ 3D.

Đăng nhận xét

0 Nhận xét