Thật là một thư viện tốt để hiển thị nhiều bản đồ nhỏ trên một trang web

10

Tôi muốn tạo một hình ảnh trực quan trên web tương tự như sau: http://namemapper.babynamewizard.com/namemapper/

Có thư viện nào tốt để làm việc này không? Là OpenLayers đủ nhẹ để xử lý nhiều bản đồ cùng một lúc?

visualisation javascript html

— Jay Askren
nguồn

8

Trên thực tế, bạn không cần OpenLayers - hoặc bất kỳ thư viện nào khác - cho các bản đồ nhỏ (như các bản đồ trên đầu ví dụ của bạn). Chúng hoàn toàn tĩnh (không lia / phóng to / v.v.) và do đó có thể là những hình ảnh đơn giản hiển thị phản hồi của máy chủ bản đồ bạn chọn.

— underdark
nguồn

7

OpenLayers có thể được sử dụng cho nhiều bản đồ tĩnh; Trước đây tôi đã tạo ra tới 200 bản đồ trên một trang mà không bị phạt hiệu suất lớn, miễn là chúng là những bản đồ đơn giản. Nhiều trang web đã sử dụng các bản đồ OpenLayers nhỏ, tĩnh để tạo các bản đồ đơn giản, bởi vì sau đó họ có thể sử dụng cùng một nhóm hình ảnh mà họ sử dụng cho nhiều bản đồ khác trên trang web của mình.

Khi sử dụng OpenLayers như thế này, tôi khuyên bạn nên sử dụng một số lớp và điều khiển giới hạn, cũng như các tùy chọn như "đệm: 0" để giới hạn số lượng gạch được tải. Mục tiêu của bạn là giảm thiểu số lượng phần tử DOM mà OpenLayers tạo ra, vì đó sẽ là nút cổ chai hiệu năng chính cho việc tải trang hoặc ứng dụng của bạn.

Đối với các ứng dụng mà bạn không lưu trước bộ đệm tất cả dữ liệu của bạn hoặc không hoạt động với dữ liệu vectơ, sử dụng một yêu cầu hình ảnh duy nhất cho một máy chủ bản đồ thuộc loại nào đó có thể là lựa chọn tốt hơn. Nếu bạn đang làm việc với dữ liệu được xếp chồng hoặc muốn sử dụng dữ liệu vectơ được hiển thị bởi máy khách, OpenLayers là một lựa chọn hợp lý để giải quyết trường hợp sử dụng.

— Christopher Schmidt
nguồn

4

HTML có thể được sử dụng để tạo các bản đồ tĩnh đơn giản mà không cần bất kỳ nội dung phía máy chủ nào như WMS hoặc các thư viện phía máy khách như OpenLayers. Sử dụng hình ảnh raster của khu vực bản đồ kết hợp với bản đồ và khu vực thẻ của HMTL , khu vực cuối cùng có hình dạng thuộc tính được đặt thành 'poly'. Bạn sẽ phải cung cấp cho các bản đồ của đường viền tương ứng với góc trên cùng bên trái của đối tượng bản đồ. Bên cạnh đó, các sự kiện như onmouseover hoặc onclick được hỗ trợ.

Bản đồ HTML (w3schools.com)
Bản đồ hình ảnh phía khách hàng: các yếu tố MAP và DIỆN (Khuyến nghị của W3C)

EDITED ON 2010-09-26 01:25 CET: Có thể tìm thấy một ví dụ về bản đồ hình ảnh HTML tại ' iCITA: Ví dụ về Bản đồ hình ảnh '

— dariapra
nguồn