Bỏ qua

Tối ưu hóa hiệu suất TrackAsia: Mẹo cho các tập dữ liệu GeoJSON lớn

Hiệu suất là một khía cạnh quan trọng để cung cấp trải nghiệm mượt mà và phản hồi nhanh cho người dùng. Hướng dẫn này tập trung vào các kỹ thuật cải thiện hiệu suất của TrackAsia, đặc biệt khi làm việc với các tập dữ liệu lớn ở định dạng GeoJSON. Chúng tôi sẽ phân loại các chiến lược thành hai lĩnh vực chính:

  1. Tải dữ liệu
  2. Hiển thị dữ liệu

Tải dữ liệu

Làm nhỏ tệp

Khi làm việc với các tập dữ liệu GeoJSON lớn, một trong những cách hiệu quả nhất để cải thiện hiệu suất tải là giảm kích thước dữ liệu. Bạn có thể thực hiện các phương pháp sau với các gói như Turf hoặc các công cụ web như Reduce GeoJSON và Mapshaper.

Loại bỏ các thuộc tính không sử dụng

Các tệp GeoJSON thường chứa nhiều thuộc tính không cần thiết cho chức năng của bản đồ. Bằng cách loại bỏ các thuộc tính không sử dụng hoặc dư thừa, bạn có thể giảm đáng kể kích thước tệp, dẫn đến thời gian tải nhanh hơn.

Giảm độ chính xác của tọa độ

Tọa độ GeoJSON thường mặc định có độ chính xác cao, thường từ 15-17 chữ số thập phân, tương đương với quy mô nguyên tử. Đối với hầu hết các ứng dụng thực tế, bạn có thể giảm độ chính xác của tọa độ xuống khoảng 6 chữ số thập phân, tương đương với quy mô khoảng 1cm. Điều này giảm kích thước tệp mà không làm giảm tính khả dụng.

Đơn giản hóa hình học

Nếu GeoJSON của bạn chứa các hình học (không chỉ là điểm), hãy xem xét sử dụng các thuật toán khác nhau để đơn giản hóa hình học. Các công cụ như Mapshaper cung cấp giao diện thân thiện với người dùng cho nhiệm vụ này.

Nén

Nén dữ liệu GeoJSON bằng cách loại bỏ khoảng trắng không cần thiết có thể giảm thêm kích thước tệp, hỗ trợ truyền dữ liệu nhanh hơn.

Nén dữ liệu

Một cách tiếp cận khác là nén dữ liệu GeoJSON và gửi tệp đã nén đến trình duyệt của người dùng. Mặc dù điều này giới thiệu một sự đánh đổi nhỏ giữa xử lý và kích thước tệp, nhưng nó thường chấp nhận được, xét đến hiệu quả của JavaScript hiện đại.

Chia nhỏ dữ liệu

Nếu tập dữ liệu GeoJSON của bạn vẫn còn khá lớn sau khi giảm kích thước, hãy xem xét chia nó thành các phần nhỏ hơn, dễ quản lý hơn. Ngay cả 2 hoặc 3 phần cũng có thể hữu ích. Các tập dữ liệu đã chia nhỏ này có thể được thêm vào bản đồ như bình thường với addSource() và addLayer().

Kỹ thuật này đặc biệt hữu ích khi có các phần của tập dữ liệu có các thuộc tính khác nhau. Ví dụ, nếu bản đồ bắt đầu phóng to vào một khu vực địa lý, dữ liệu trong khu vực này có thể là một phần và phần còn lại có thể là một phần khác. Tương tự, nếu một phần của tập dữ liệu có cập nhật trực tiếp và phần còn lại chủ yếu là tĩnh, có thể hợp lý khi đặt hai phần này vào các phần riêng biệt.

Chia nhỏ dữ liệu có tác động lớn hơn trên trình duyệt máy tính để bàn so với trình duyệt di động.

Truyền dữ liệu

Áp dụng các kỹ thuật truyền dữ liệu có thể cải thiện hiệu suất tải. Thay vì tải toàn bộ tập dữ liệu cùng một lúc, truyền dữ liệu cho phép bạn tải các phần nhỏ hơn khi người dùng tương tác với bản đồ. Cách tiếp cận này giảm thiểu thời gian tải ban đầu và cung cấp trải nghiệm phản hồi nhanh hơn. Một mẫu cho truyền dữ liệu có thể được tìm thấy trong ví dụ Live Update Features.

Lưu GeoJSON tại URL

Để cải thiện hiệu suất trong TrackAsia, nên tải dữ liệu GeoJSON của bạn từ một URL dữ liệu thay vì nhúng trực tiếp vào mã JavaScript của bạn. Thực hành này giúp giảm chi phí bộ nhớ trên phía máy khách.

Vector Tiling

Xem xét chuyển đổi dữ liệu GeoJSON của bạn thành các vector tiles, được thiết kế đặc biệt để hiển thị hiệu quả. Một ví dụ có sẵn về cách thêm nguồn vector tile.

Tiling trên máy chủ

Đối với các tập dữ liệu lớn hơn, bạn có thể sử dụng một công cụ như Martin để chuyển đổi cơ sở dữ liệu thành các tiles trên phía máy chủ. Các tiles này sau đó có thể được hiển thị trực tiếp cho người dùng. Một demo của Martin cho thấy nó xử lý thoải mái một cơ sở dữ liệu 13GB. Tuy nhiên, cách tiếp cận này sẽ yêu cầu thiết lập nhiều hơn so với các cách khác.

Hiển thị dữ liệu

Sau khi dữ liệu được tải, để đảm bảo trải nghiệm người dùng mượt mà, điều cần thiết là tối ưu hóa cách bạn hiển thị dữ liệu trên bản đồ.

Cluster

Một cách tiếp cận đơn giản là hiển thị ít điểm hơn. Nếu chúng ta sử dụng một nguồn GeoJSON (tức là không phải vector tiles), chúng ta có thể sử dụng 'clustering' để nhóm các điểm gần nhau lại. Cách tiếp cận này giảm số lượng các đối tượng hiển thị trên bản đồ, cải thiện hiệu suất hiển thị và duy trì khả năng đọc của bản đồ.

Để làm điều này, khi chúng ta thêm dữ liệu, chúng ta có thể điều chỉnh các tùy chọn cluster. Ví dụ:

map.addSource('earthquakes', {
            type: 'geojson',
            data: 'https://docs.track-asia.com/assets/earthquakes.geojson',
            cluster: true,
            clusterMaxZoom: 14, // Mức zoom tối đa để cluster các điểm
            clusterRadius: 50 // Bán kính của mỗi cluster khi clustering các điểm (mặc định là 50)
        });

Bạn có thể xem một ví dụ đầy đủ tại đây: Tạo và tạo kiểu cluster.

Cho phép chồng lấp

Theo mặc định, Trackasia tính toán xem các đối tượng như điểm, văn bản hoặc biểu tượng có chồng lấp hay không. Điều này có thể tốn nhiều tài nguyên tính toán, đặc biệt khi có nhiều đối tượng. Thay đổi chế độ chồng lấp để tất cả các điểm được hiển thị và không kiểm tra chồng lấp có thể giảm đáng kể điều này.

Đơn giản hóa kiểu dáng

Các kiểu bản đồ phức tạp và tinh vi có thể làm chậm quá trình hiển thị, đặc biệt khi làm việc với các tập dữ liệu lớn. Đơn giản hóa các kiểu bản đồ của bạn bằng cách giảm số lượng lớp, biểu tượng và các tính năng phức tạp, và sử dụng các biểu tượng đơn giản hơn khi thích hợp.

Mức zoom

Tối ưu hóa các mức zoom của bạn đảm bảo rằng bản đồ tải hiệu quả và hiển thị mức độ chi tiết phù hợp ở các mức zoom khác nhau, góp phần vào trải nghiệm người dùng mượt mà.

Mức zoom tối đa

Để cải thiện hiệu suất bản đồ trong khi di chuyển và zoom, đặt tùy chọn maxZoom trên nguồn GeoJSON của bạn thành một giá trị thấp hơn mặc định là 22. Đối với hầu hết các nguồn điểm, giá trị maxZoom là 12 đạt được sự cân bằng tốt giữa độ chính xác và tốc độ.

Mức zoom tối thiểu

Điều chỉnh thuộc tính minZoom trên lớp tham chiếu nguồn GeoJSON của bạn thành một giá trị lớn hơn 0. Cài đặt này ngăn bản đồ cố gắng tải và hiển thị các tiles ở các mức zoom thấp, điều này thường không cần thiết vì không có đủ pixel màn hình để hiển thị mọi đối tượng của một tập dữ liệu lớn. Bằng cách điều chỉnh thuộc tính minZoom, bạn sẽ đạt được tốc độ tải bản đồ nhanh hơn và hiệu suất hiển thị được cải thiện.

Bạn có thể thực hiện cả hai như sau:

let map = new trackasiagl.Map({
  container: 'map',
  maxZoom: 12,
  minZoom: 5
});