Bản đồ 3D
thời gian thực
cho React

Real-time 3D cartography for React.

Một engine Three.js mệnh lệnh mà React gắn vào rồi để yên cho nó chạy. MapEngine nắm giữ camera, các tile và các lớp, nên vòng lặp dựng hình không bao giờ phải chờ một lần render lại.

Mở bản demo React Đọc tài liệu

npm i @pasquelin/map3d three react react-dom

Phiên bản: 0.6.0
Phụ thuộc ngang hàng: react 19 · three ≥ 0.160
Bản dựng: ESM + CJS + .d.ts
Giấy phép: PolyForm Noncommercial

Demo trực tiếp

Dùng thử ngay trên trình duyệt

Không cần cài đặt, không cần khoá. Các bản demo bên dưới được dựng từ kho này sau mỗi lần push và phục vụ thẳng từ GitHub Pages.

Bản demo React: trình vẽ, chọn theo khung và danh sách marker trực tiếp

react Bảng điều hành Một bản đồ 3D với cảnh báo gom cụm theo mức nghiêm trọng và tải lại khi di chuyển, các đối tượng động được camera bám theo, các vùng, trình vẽ đầy đủ, công tắc sáng/tối và một giao diện neon thay thế. Được xuất bản mà không kèm token Cesium Ion, nên mở ra với bản đồ nền tự lưu trữ — mọi thứ còn lại vẫn chạy. Muốn có địa cầu ảnh thực, hãy sao chép kho, đặt VITE_CESIUM_ION_TOKEN và chuyển providers.tiles3d.provider sang external. Mở bản demo

Thư viện ảnh

Từ quỹ đạo xuống vỉa hè

Một thư viện lo trọn cả hành trình đi xuống: địa cầu trên quỹ đạo, gom cụm theo vùng, đường chân trời mái nhà, tên phố dưới chân.

12 700 km Từ địa cầu sang bản đồ phẳng dự phòng ellipsoid, gom cụm thông minh
9 km Marker và cụm các nút DOM tái sử dụng, chia theo hạng mục
3 km Đường chân trời dù nghiêng thế nào, marker vẫn giữ nguyên kích thước trên màn hình
900 m Lưới toạ độ bám sát mặt đất, độ dày nét trên màn hình không đổi
1,7 m Chế độ người đi bộ tầm mắt, trọng lực, va chạm

Tính năng

Những gì có sẵn

Mọi bề mặt — thanh công cụ, các nút điều khiển, tìm kiếm, lưới toạ độ, gom cụm — đều được gắn bên trong <Map> và điều khiển bằng cấu hình. Bạn chỉ thêm dữ liệu.

Đang vận hành

Bộ công cụ, lúc làm việc

Mỗi ảnh chụp bên dưới đều lấy từ chính bản demo bạn có thể mở ở trên — không có ảnh dựng.

Vẽ và chọntay cầm đổi kích thước và xoay, bảng chọn trực tiếp, hoàn tác và làm lại
Bảng ký hiệu MIL-STD-2525Dbạn, địch, trung lập, chưa rõ — SDK tải khi cần
Danh mục và nguồn dữ liệubật một nguồn, 252 điểm đổ về và các cụm sắp xếp lại
Giao diện sángmột thiết lập — toàn bộ giao diện đi theo, kể cả bản đồ

Bắt đầu nhanh

Một bản đồ có gom cụm trong hơn chục dòng

import { Map, markersLayer, type MarkerData } from '@pasquelin/map3d'

type Alert = { title: string }

const alerts: MarkerData<Alert>[] = [
  { id: 1, type: 'critical', position: { lat: 48.8566, lng: 2.3522 }, title: 'Intrusion', data: { title: 'Intrusion' } },
  { id: 2, type: 'info', position: { lat: 48.8606, lng: 2.3376 }, title: 'Patrol', data: { title: 'Patrol' } },
]

export function App() {
  return (
    <div style={{ height: '100vh' }}>
      <Map
        center={{ lat: 48.8566, lng: 2.3522 }}
        zoom={13}
        layers={[markersLayer<Alert>({ points: alerts, cluster: { enabled: true } })]}
      />
    </div>
  )
}

Các plugin tuỳ chọn — IGN Géoplateforme, Windy, sơ đồ mặt bằng trong nhà — nằm ở một kho riêng, và bạn có thể tự viết bằng API plugin.

Bản đồ 3Dthời gian thựccho React

Bản đồ 3D
thời gian thực
cho React