Hướng dẫn sử dụng và khai thác bản đồ 2D/3D

<link rel="stylesheet" href="http://MAY-CHU:3650/maplibre-gl.css">
<script src="http://MAY-CHU:3650/maplibre-gl.js"></script>
<div id="map" style="height:480px"></div>
<script>
  const map = new maplibregl.Map({
    container: 'map',
    style: 'http://MAY-CHU:3650/api/maps/xanh-la-toi/style.json',
    center: [105.7816, 21.0436],   // [kinh độ, vĩ độ]
    zoom: 14
  });
  map.addControl(new maplibregl.NavigationControl({ visualizePitch: true }));
</script>

map.on('style.load', () => {
  // chèn dưới lớp nhãn đầu tiên để chữ không bị khối nhà che
  const firstLabel = map.getStyle().layers.find(l => l.type === 'symbol')?.id;
  // tên nguồn vector của style đang dùng
  const nen = Object.keys(map.getStyle().sources).find(k => map.getStyle().sources[k].type === 'vector');
  map.addLayer({
    id: 'building-3d', type: 'fill-extrusion',
    source: nen, 'source-layer': 'building', minzoom: 13,
    filter: ['!=', ['get', 'hide_3d'], true],
    paint: {
      'fill-extrusion-color': '#2b3644',
      'fill-extrusion-height': ['coalesce', ['get', 'render_height'], 5],
      'fill-extrusion-base': ['coalesce', ['get', 'render_min_height'], 0],
      'fill-extrusion-opacity': 0.85
    }
  }, firstLabel);
  map.easeTo({ pitch: 60, bearing: -20, zoom: 15.5 });
});

map.addSource('dem', {
  type: 'raster-dem', tiles: ['http://MAY-CHU:3650/data/terrain/{z}/{x}/{y}.png'],
  maxzoom: 12,   // zoom phủ kín cả nước; khai cao hơn thì nơi thiếu tile nhà 3D bị bay lơ lửng
  encoding: 'terrarium', tileSize: 256
});
map.setTerrain({ source: 'dem', exaggeration: 1.4 });

// độ cao (mét) tại một điểm: /data/terrain/elevation/{zoom}/{kinh độ}/{vĩ độ}
const r = await fetch('http://MAY-CHU:3650/data/terrain/elevation/11/103.7751/22.3033');
console.log((await r.json()).elevation);

const q = encodeURIComponent('Bệnh viện Bạch Mai');
const places = await (await fetch(
  `http://MAY-CHU:3650/geocode/search?q=${q}&format=jsonv2&limit=5&accept-language=vi`)).json();
// → [{ display_name, lat, lon, boundingbox, category, type }, …]

const here = await (await fetch(
  'http://MAY-CHU:3650/geocode/reverse?lat=21.0288&lon=105.8525&format=jsonv2&accept-language=vi')).json();
// → { display_name, address: { road, suburb, city, … } }

const route = await (await fetch('http://MAY-CHU:3650/route/route', {
  method: 'POST',
  body: JSON.stringify({
    locations: [{ lat: 21.0436, lon: 105.7816 }, { lat: 21.0288, lon: 105.8525 }],
    costing: 'motor_scooter',          // auto | motor_scooter | motorcycle | bicycle | pedestrian | truck
    units: 'kilometers', language: 'vi-VN'
  })
})).json();
// route.trip.summary → { length (km), time (giây) }; route.trip.legs[0].shape là polyline độ chính xác 6

const iso = await (await fetch('http://MAY-CHU:3650/route/isochrone', {
  method: 'POST',
  body: JSON.stringify({
    locations: [{ lat: 21.0436, lon: 105.7816 }], costing: 'auto',
    contours: [{ time: 5 }, { time: 10 }, { time: 15 }], polygons: true
  })
})).json();                             // GeoJSON, đưa thẳng vào map.addSource

// 1. Đơn vị nào tới hiện trường nhanh nhất: n nguồn → 1 đích, kết quả theo thứ tự nguồn
const m = await (await fetch('http://MAY-CHU:3650/route/sources_to_targets', {
  method: 'POST',
  body: JSON.stringify({
    sources: donVi.map(d => ({ lat: d.lat, lon: d.lon })),     // các trạm, xe đang rảnh
    targets: [{ lat: 21.0288, lon: 105.8525 }],                // hiện trường
    costing: 'auto'
  })
})).json();
const xepHang = m.sources_to_targets.map((h, i) => ({ ...donVi[i], giay: h[0].time, km: h[0].distance }))
                 .sort((a, b) => a.giay - b.giay);            // xepHang[0] là đơn vị tới nhanh nhất

// 2. Nắn vết GPS của xe vào đường (map matching) rồi vẽ lại tuyến đã đi
const tr = await (await fetch('http://MAY-CHU:3650/route/trace_route', {
  method: 'POST',
  body: JSON.stringify({ shape: vetGps, costing: 'auto', shape_match: 'map_snap' }) // vetGps: [{lat, lon, time}]
})).json();                              // tr.trip.legs[0].shape: polyline độ chính xác 6, bám lòng đường

// 3. Mặt cắt độ cao dọc tuyến, mỗi 50 m một mẫu
const h = await (await fetch('http://MAY-CHU:3650/route/height', {
  method: 'POST',
  body: JSON.stringify({ encoded_polyline: route.trip.legs[0].shape, resample_distance: 50 })
})).json();                              // h.height: [m, m, …] cùng thứ tự với h.shape

// vector tile: mỗi bảng một nguồn, tên lớp trong tile = tên bảng
map.addSource('khu-vuc', { type: 'vector', tiles: ['http://MAY-CHU:3650/tiles/khu_vuc/{z}/{x}/{y}'], maxzoom: 16 });
map.addLayer({ id: 'khu-vuc', type: 'line', source: 'khu-vuc', 'source-layer': 'khu_vuc',
               paint: { 'line-color': '#0ea5e9', 'line-width': 2 } });

// GeoJSON có lọc: camera đang hoạt động
map.addSource('thiet-bi', { type: 'geojson', cluster: true,
  data: "http://MAY-CHU:3650/features/collections/ioc.thiet_bi/items.json?limit=5000&filter=loai='camera' AND trang_thai='hoat_dong'" });

// truy vấn không gian: thiết bị trong bán kính 100 m
const near = await (await fetch(
  'http://MAY-CHU:3650/features/functions/thiet_bi_quanh/items.json?lon=105.7816&lat=21.0436&ban_kinh_m=100')).json();

map.addSprite('bt', 'http://MAY-CHU:3650/styles/xanh-la-sang-3d/sprite');
map.addLayer({ id: 'benh-vien', type: 'symbol', source: 'diem',
               layout: { 'icon-image': 'bt:poi-hospital', 'icon-allow-overlap': true } });

L.tileLayer('http://MAY-CHU:3650/styles/xanh-la-sang/{z}/{x}/{y}.png', { maxZoom: 20 }).addTo(map);

// Android (Kotlin) — trong Activity, layout có <org.maplibre.android.maps.MapView android:id="@+id/mapView" …/>
MapLibre.getInstance(this)
setContentView(R.layout.activity_main)
mapView = findViewById(R.id.mapView)
mapView.onCreate(savedInstanceState)
mapView.getMapAsync { map ->
  map.setStyle("http://MAY-CHU:3650/api/maps/xanh-la-sang/style.json")
  map.cameraPosition = CameraPosition.Builder()
    .target(LatLng(21.0436, 105.7816))   // (vĩ độ, kinh độ) — ngược thứ tự với bản web
    .zoom(14.0).build()
}
// nhớ chuyển tiếp onStart/onResume/onPause/onStop/onDestroy/onLowMemory của Activity cho mapView

// iOS (Swift)
import MapLibre

let mapView = MLNMapView(frame: view.bounds,
  styleURL: URL(string: "http://MAY-CHU:3650/api/maps/xanh-la-sang/style.json"))
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(CLLocationCoordinate2D(latitude: 21.0436, longitude: 105.7816), zoomLevel: 14, animated: false)
view.addSubview(mapView)

// Flutter (Dart)
MapLibreMap(
  styleString: 'http://MAY-CHU:3650/api/maps/xanh-la-sang/style.json',
  initialCameraPosition: const CameraPosition(target: LatLng(21.0436, 105.7816), zoom: 14),
)

// React Native — tên thuộc tính style khác nhau giữa các bản (mapStyle hoặc styleURL), xem tài liệu bản đang dùng
<MapView style={{ flex: 1 }} mapStyle="http://MAY-CHU:3650/api/maps/xanh-la-sang/style.json">
  <Camera centerCoordinate={[105.7816, 21.0436]} zoomLevel={14} />   {/* [kinh độ, vĩ độ] */}
</MapView>