Hi các bạn,
Nay chúng ta đi hơi sâu 1 chút vào cái structure của Map mà chúng ta hay xài nhé. Cụ thể là OpenStreetMap, Google Map,…
Bài này mang tính nghiên cứu và tìm hiểu cho bik là nhiều nhé 😀
1/ Tile là gì?
Để hiểu đơn giản trong cuộc sống, hãy nhìn xuống dưới đất nếu nhà/văn phòng/cty bạn có sàn gạch thì tile là 1 miếng gạch sàn đó. Từ đó nhiều mảnh nó ghép lại sẽ thành 1 cái nền nhà đẹp đẽ cho bạn.
Map Engine nó cũng hoạt động như vậy. Khi các bạn ở 1 vị trí ở map, zoom lên zoom xuống thì nó sẽ lấy những cái tọa độ (XYZ) tiles xung quanh màn hình bạn xem và ghép lại thành 1 cái map.
Ví dụ theo hình:
Theo hình này, 1 tile là 1 mảnh đó các bạn, và nhiều tiles sẽ ghép lại thành 1 cái map tại vị trí mà bạn đang xem.
Và hiện nay, ta có 2 loại Tile là thế giới đang sử dụng cho map, đó là:
- Raster
- Vector
Cùng nhau tìm hiểu thêm về 2 cái này nhé
2/ Raster Tile là gì?
Raster Tile là 1 loại tile dưới dạng hình ảnh, thường có định dạng là .png hoặc .jpg.
Đối với nguyên bản OpenStreetMap thì họ phải render ra những tile này để phục vụ người dùng. Ngoài ra thì cũng có render-on-demand, có nghĩa là khi cái tile ở tọa độ XYZ đó chưa có thì server sẽ fải render cái hình đó. Quá trình render nhanh hay chậm sẽ tùy thuộc vào:
- Cấu hình server – rất quan trọng cho việc render cũng như performance tuning cho cái DB khi bạn xài SSD.
- Map DB – 1 phần, nhưng phần lớn các indexes đã dc tạo đầy đủ.
3/ Vector Tile là gì?
Vector Tile là cái tile dưới dạng vector, đa phần sẽ có ext là .pbf . Map Client sẽ dùng WebGL engine để render ra cái map cho người dùng thấy.
Đa số mọi vector tile đều fải render sẵn trước khi sử dụng và tất cả các vector file sẽ được nén vào 1 file có định dạng là .mbtiles (về cơ bản nó là SQLite cải tiến).
Google Map và một số provider như MapBox cũng đã và đang xài cách này từ rất lâu 😀
Một single Vector Tile nó có thể chứa rất là nhiều thông tin, vậy nên nó có thể react tận 250~500kb cho 1 single file, thậm chí là vài megabytes 😀
Render-on-demand? Có nhưng setup khá phức tạp.
4/ So sánh giữa Raster Map Tile và Vector Map Tile
Điểm mạnh của Raster Tile:
- Nhẹ (vì là tấm hình thoy, mọi thông tin đã dc render vào hết), đa phần là 1 tấm jpg 256×256 rất nhẹ, load nhanh.
- Thích hợp với toàn bộ platform (web, mobile)
- Nhiều Map Client hỗ trợ.
- Dễ cache trên CDN
Điểm yếu của Raster Tile:
- Không có dynamically styling được. Mỗi lần có new style, bạn phải xóa tất cả map tiles đã render và render lại từ đầu.
- Không tương tác được với các POIs trên map.
- Muốn Map có Language-Specific, fải tự render ra 1 version song song nữa => Tốn Storage và Thời Gian
- 1 lần mà zoom in nhiều level 1 lúc sẽ dẫn tới tình trạng vỡ hình cũ => xấu.
====
Điểm mạnh của Vector Tile:
- Dynamically Styling Map được, và không cần fải render lại bất cứ thứ gì. Chỉ đơn giản là apply config và show ra 😀
- Vì toàn bộ thông tin nằm trong Tile nên specific language rất dễ, cũng apply config vào client là xong.
- Zoom In kiểu gì cũng ko vỡ, đẹp đẽ và mượt
Điểm yếu của Vector Tile:
- Khá nặng về phần data, khi load đợi có khi hơi lâu
- Browser/Map Client fải render dc vector tile, với web thì browser cần fải support WebGL
====
Cả 2 đều có 2 điểm yếu là:
- Structure để cache trên CDN khá là khó và cũng cần khá nhiều storage vì số lượng Tiles lên đến vài chục tỷ ở Zoom 18 (tối đa zoom 22, nhưng 18 là deep lắm rồi).
- Render ra cần rất là nhiều resources (phần cứng).
- Mỗi lần update map theo OSM db thì fải render lại (1 phần đã update)
5/ Kết luận
Vậy nên, với 2 loại Tile này. Khi bạn biết dc điểm mạnh/yếu và nhu cầu của bạn => bạn sẽ chọn dc 1 Map Tile thích hợp nhất để sử dụng và serving your own map tiles 😀
Cám ơn các bạn đã quan tâm theo dõi. Về điểm mạnh điểm yếu mình vẫn sẽ update thêm, giờ chỉ nhớ nhiu đó 😀
