การเคลื่อนกล้อง | MapLibre

ตัวอย่างโค้ด

import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Markers } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) สร้างแผนที่


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) เตรียมข้อมูลและสถานะการโต้ตอบ
const destination = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 13,
});
const destinations = [createMarkerState({ id: 'tokyo', position: destination.position })];


// (3) เรนเดอร์แผนที่และโอเวอร์เลย์


<button onClick={() => mapViewState.moveCameraTo(destination, 1000)}>
  Fly to destination
</button>


<MapLibreMapView2D state={mapViewState}>
  <Markers states={destinations} />
</MapLibreMapView2D>

โค้ดนี้ทำงานอย่างไร

เคลื่อนกล้องไปยังจุดหมายด้วยแอนิเมชันหนึ่งวินาที โดยใช้ API เดียวกันกับผู้ให้บริการทุกเจ้า

จุดหมายคือ MapCameraPosition ที่กำหนดทั้งพิกัดและระดับซูม และอาร์เรย์ destinations วางมาร์กเกอร์ไว้ตรงนั้นเพื่อให้เห็นเป้าหมาย

ปุ่มนี้เรียก mapViewState.moveCameraTo(destination, 1000) และแอนิเมชัน 1000 มิลลิวินาทีทำงานเหมือนกันไม่ว่าผู้ให้บริการรายใดจะเรนเดอร์แผนที่

MapConductor React SDK Samples

การเคลื่อนกล้อง | MapLibre | MapConductor React SDK

ตัวอย่างโค้ด

โค้ดนี้ทำงานอย่างไร