Nguyên nhân gây ra sự khác biệt về hiệu suất MapBox GL JS

Question

Câu hỏi này dành cho người hiểu nội bộ của MapBox GL JS.

Tôi đang sử dụng MapBox GL JS để hiển thị bản đồ địa lý có tối đa 40.000 đa giác, mỗi đa giác được tô màu dựa trên "chủ sở hữu" của đa giác đó. Thường có nhiều đa giác cho mỗi chủ sở hữu và "chủ sở hữu" của mỗi đa giác có thể thay đổi theo thời gian. Số lượng chủ sở hữu có thể thay đổi từ một đến khoảng 1.000. Tôi gặp vấn đề về hiệu năng (thay đổi tùy thuộc vào cách tôi tiếp cận nó), vì vậy tôi đã thử một vài chiến lược khác nhau.

1. Sử dụng kiểu định hướng dữ liệu cho "tô màu", nơi tôi có một nguồn duy nhất và một lớp duy nhất. Tôi đã thử cả id đa giác và id "chủ sở hữu" làm danh mục cho kiểu định hướng dữ liệu.
2. Sử dụng các lớp được lọc, nơi tôi có một nguồn duy nhất và một lớp riêng biệt cho từng "chủ sở hữu". Một lần nữa, tôi đã thử cả id đa giác và id "chủ sở hữu" làm tiêu chí để lọc.
3. Sử dụng nguồn và lớp riêng biệt cho từng "chủ sở hữu".

Tùy chọn ba có tốc độ bản vẽ tốt nhất. Các lớp được hiển thị rất nhanh khi tôi phóng to và xoay. Nhưng tôi phải gọi setData bất cứ khi nào tôi thay đổi chủ sở hữu của một lớp và setData rò rỉ bộ nhớ để cuối cùng tôi kết thúc với trang bị treo. Vấn đề này, 2607, đã bị đóng vì không thể thực hiện được, vì vậy tôi không mong đợi một giải pháp cho vấn đề này.

Tùy chọn một và hai vẽ không sao với thu phóng ban đầu, nhưng khi tôi phóng to chúng rất chậm để vẽ lại các ô. Tôi đang bị mắc kẹt khi nhìn vào những mảnh gạch nhỏ, lởm chởm cho đến khi việc dựng hình bắt kịp sau 20-30 giây. Lưu ý rằng nếu tôi sử dụng id "chủ sở hữu" thay vì id "đa giác", tôi vẫn cần gọi setData khi thay đổi "chủ sở hữu" sẽ dẫn đến rò rỉ bộ nhớ. Nếu tôi sử dụng id đa giác, tôi chỉ cần cập nhật bộ lọc lớp hoặc danh mục màu tô khi "chủ sở hữu" thay đổi. Tuy nhiên, tôi không nhận được sự khác biệt đáng kể về hiệu suất nếu tôi sử dụng id "đa giác" vì vậy tôi nghĩ điều đó không sao.

Vì vậy, câu hỏi của tôi là lý do tại sao tùy chọn ba nhanh hơn rất nhiều để hiển thị khi tôi phóng to? Liệu nó có liên quan đến số lượng công nhân được giao cho bản vẽ không? Trong các tùy chọn một và hai, có một nguồn duy nhất để điều đó có nghĩa là bản vẽ chỉ sử dụng một công nhân đơn lẻ? Trong khi đó trong tùy chọn ba, có một nguồn riêng biệt cho mỗi "chủ sở hữu" vì vậy tôi có nhiều công nhân làm bản vẽ?

Answer 1

Tôi nghĩ rằng bạn sẽ yêu cầu nhiều kỹ thuật khác nhau để giải quyết vấn đề chi tiết về vấn đề chi tiết (LOD). Tôi đã thực hiện công việc tương tự liên quan đến việc vẽ nhiều khu vực của một quốc gia để chỉ ra các Quận khác nhau trong một Bang và bạn phải mở rộng dữ liệu cho phù hợp với chế độ xem.

Điều đầu tiên tôi khuyên bạn nên tạo nhiều cấp chi tiết khác nhau cho Vùng của bạn. Một lần quét đầu tiên có thể được thực hiện tự động bằng cách loại bỏ các đỉnh Vùng được căn chỉnh (nói theo địa lý) trong một vài độ của một đường thẳng với các điểm lân cận của chúng. Hãy nghĩ về điều này khi loại bỏ nhiều điểm nhỏ không thêm chi tiết vào một ranh giới Vùng khi chúng nằm trên một đường thẳng. Vì đây có thể là bước tự động (và thậm chí được lưu trước), bạn có thể tạo các mức chi tiết khác nhau dựa trên mức thu phóng.

Đề xuất thứ hai là chọn lọc không gian xem. Nghĩa là, nếu một vùng không nằm trong khung nhìn, đừng trả lại nó! Nếu bạn cố gắng làm điều này đỉnh hoàn hảo bạn sẽ kết thúc với cùng một vấn đề CPU như trước vì vậy tôi muốn khuyên bạn nên tạo một khu vực bounding-box (nếu bạn đang sử dụng trục-align xem chỉ, một gợi ý đề xuất vì nó là dễ nhất dung dịch).

Nếu bạn cần các vùng không liên kết trục, chỉ cần tạo một vòng tròn bao quanh (với bán kính dựa trên đỉnh biên ở khoảng cách lớn nhất từ ​​vùng địa lý của khu vực).

Tôi cho rằng những khó khăn khác nhau của bạn là một dẫn xuất của vấn đề phức tạp về cảnh. Giải quyết điều đó và bạn sẽ có một hệ thống hiệu quả hơn để làm việc cùng.

Chúc may mắn!

Answer 2

Tôi khuyên bạn nên thực hiện data-join bằng cách sử dụng kiểu phân đoạn theo dữ liệu phân loại. Điều này cho phép bạn tách các cập nhật thuộc tính dữ liệu của mình khỏi hình của bạn.

Khám phá https://www.mapbox.com/mapbox-gl-js/example/data-join/ để biết ví dụ về cách tham gia dữ liệu JSON trong trình duyệt với hình khối vectơ vectơ. Điều này sẽ mở rộng lên tới hơn 100 nghìn tính năng.