OSRM Map SDK

SDK JavaScript để tính toán tuyến đường sử dụng OSRM (Open Source Routing Machine) kết hợp với web component bản đồ tương tác.

Cài đặt

npm install @namancam9/osrm-map

Hoặc dùng CDN:

<script src="https://unpkg.com/@namancam9/osrm-map/dist/osrm-map.min.js"></script>

Bắt đầu nhanh

1. Web Component Bản đồ (Đơn giản nhất)

<my-map
  from-lat="21.0285"
  from-lng="105.8542"
  to-lat="20.9959"
  to-lng="105.8660"
  style="width: 100%; height: 500px;"
></my-map>

<script src="https://unpkg.com/@namancam9/osrm-map/dist/osrm-map.min.js"></script>

Danh sách thuộc tính (Attributes)

| Thuộc tính | Mô tả | Bắt buộc | Mặc định | |------------|-------|----------|----------| | from-lat | Vĩ độ điểm xuất phát | Có | — | | from-lng | Kinh độ điểm xuất phát | Có | — | | to-lat | Vĩ độ điểm đến | Có | — | | to-lng | Kinh độ điểm đến | Có | — | | osrm-url | URL máy chủ OSRM | Không | — | | show-info | Hiển thị bảng thông tin ("true" / "false") | Không | "true" | | route-color | Màu đường tuyến (mã hex) | Không | "#3b82f6" | | route-weight | Độ dày đường tuyến (px) | Không | "5" | | zoom | Mức zoom ban đầu của bản đồ | Không | "6" |

2. JavaScript API

import { OsrmService } from '@namancam9/osrm-map';

const osrm = new OsrmService();

const result = await osrm.calculateRoute(
  21.0285, 105.8542,  // điểm xuất phát (lat, lng)
  20.9959, 105.8660   // điểm đến (lat, lng)
);

console.log(result.distanceKm);      // Khoảng cách (km)
console.log(result.durationMinutes); // Thời gian di chuyển (phút)
console.log(result.geometry);        // Tọa độ tuyến đường dạng GeoJSON
console.log(result.steps);           // Hướng dẫn từng bước

Tài liệu API

Tùy chọn khởi tạo OsrmService

| Tùy chọn | Kiểu | Mô tả | |----------|------|-------| | baseUrl | string | URL máy chủ OSRM | | timeoutMs | number | Thời gian timeout (ms), mặc định: 30000 |

Các phương thức

| Phương thức | Mô tả | Trả về | |-------------|-------|--------| | calculateRoute(fromLat, fromLng, toLat, toLng) | Tính tuyến đường giữa 2 điểm | Promise<RouteResult> | | isHealthy() | Kiểm tra máy chủ OSRM có hoạt động không | Promise<boolean> |

Kết quả RouteResult

| Thuộc tính | Kiểu | Mô tả | |------------|------|-------| | distanceKm | number | Khoảng cách (km) | | durationMinutes | number | Thời gian di chuyển sau khi nhân hệ số | | rawDurationMinutes | number | Thời gian gốc từ OSRM (chưa nhân hệ số) | | factor | number | Hệ số thời gian (1.15x – 1.9x tuỳ khoảng cách) | | geometry | GeoJSON | Tọa độ tuyến đường | | steps | Array | Danh sách hướng dẫn rẽ từng bước |

Hệ số thời gian

Hệ số này bù đắp cho sự khác biệt giữa tốc độ lý thuyết và thực tế (đèn đỏ, tắc đường, v.v.):

| Khoảng cách | Hệ số | |-------------|-------| | < 30 km | 1.9x | | 30 – 100 km | 1.4x | | ≥ 100 km | 1.15x |

Tùy chỉnh giao diện (CSS)

Bảng thông tin tuyến đường có các class với prefix namancam9_ để bạn tự override CSS:

| Class | Phần tử | |-------|---------| | namancam9_info | Khung bảng thông tin | | namancam9_info-title | Tiêu đề "Route Info" | | namancam9_info-grid | Lưới khoảng cách / thời gian | | namancam9_info-label | Nhãn bên trái | | namancam9_info-value | Giá trị bên phải | | namancam9_info-steps | Khung danh sách bước | | namancam9_info-steps-title | Tiêu đề "Steps (N)" | | namancam9_info-steps-list | Danh sách cuộn các bước | | namancam9_info-step | Từng dòng bước | | namancam9_info-error | Thông báo lỗi | | namancam9_info-code | Thẻ <code> |

Ví dụ tùy chỉnh giao diện tối:

.namancam9_info {
  background: #1e293b;
  color: #e2e8f0;
}
.namancam9_info-title {
  color: #60a5fa;
}
.namancam9_info-label {
  color: #94a3b8;
}

Sử dụng nâng cao

Lắng nghe sự kiện tuyến đường

const map = document.querySelector('my-map');

map.addEventListener('route-calculated', (event) => {
  const route = event.detail;
  console.log(`Tuyến đường: ${route.distanceKm} km, ${route.durationMinutes} phút`);
});

Cập nhật tuyến đường bằng JavaScript

const map = document.querySelector('my-map');
map.setRoute(21.0285, 105.8542, 20.9959, 105.8660);

Ẩn bảng thông tin

<my-map show-info="false" ...></my-map>

Tùy chỉnh màu và độ dày đường tuyến

<my-map route-color="#ef4444" route-weight="3" ...></my-map>

Ví dụ đầy đủ

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Demo Tuyến Đường</title>
  <style>
    .namancam9_info { background: #1e293b; color: #e2e8f0; }
    .namancam9_info-title { color: #60a5fa; }
  </style>
</head>
<body>
  <h1>Tính Tuyến Đường</h1>

  <my-map
    id="map"
    from-lat="21.0285"
    from-lng="105.8542"
    to-lat="20.9959"
    to-lng="105.8660"
    route-color="#3b82f6"
    route-weight="5"
    zoom="6"
    show-info="true"
    style="width: 100%; height: 500px;"
  ></my-map>

  <script src="https://unpkg.com/@namancam9/osrm-map/dist/osrm-map.min.js"></script>
  <script>
    document.getElementById('map').addEventListener('route-calculated', (e) => {
      console.log('Khoảng cách:', e.detail.distanceKm, 'km');
      console.log('Thời gian:', e.detail.durationMinutes, 'phút');
    });
  </script>
</body>
</html>

Giấy phép

ISC