MapConductor React SDK Samples

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

import { useMemo, useState } from 'react';
import {
  Spherical,
  createCircleState,
  createGeoPoint,
  createMapCameraPosition,
  type MarkerState,
} from '@mapconductor/js-sdk-core';
import { Circle, Marker, Polyline } 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 center = createGeoPoint({ latitude: 21.382314, longitude: -157.933097 });
const [edge, setEdge] = useState(() => Spherical.computeOffset({
  origin: center, distance: 1000, heading: 90,
}));
const radiusMeters = useMemo(
  () => Spherical.computeDistanceBetween(center, edge),
  [edge],
);
const circleState = useMemo(() => createCircleState({
  id: 'circle', center, radiusMeters,
  fillColor: 'rgba(37, 99, 235, 0.3)',
}), [radiusMeters]);
const resizeCircle = (markerState: MarkerState) => setEdge(markerState.position);


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


<MapLibreMapView2D state={mapViewState}>
  <Circle state={circleState} />
  <Polyline points={[center, edge]} zIndex={1} />
  <Marker position={center} />
  <Marker position={edge} draggable onDrag={resizeCircle} />
</MapLibreMapView2D>

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

วาดวงกลมและปรับรัศมีด้วยการลากมาร์กเกอร์ที่ขอบ โดยเส้นรัศมีถูกจัดให้อยู่เหนือวงกลม

จุดที่ขอบเป็นสถานะของ React ซึ่งตั้งค่าเริ่มต้นด้วย Spherical.computeOffset ส่วน Spherical.computeDistanceBetween(center, edge) ใช้หา radiusMeters และ useMemo จะสร้าง CircleState ใหม่ทุกครั้งที่รัศมีเปลี่ยน

การลากมาร์กเกอร์ที่ขอบเรียก resizeCircle เพื่อย้าย edge ขณะที่ Polyline ซึ่งวาดที่ zIndex 1 ทำให้เส้นรัศมีอยู่เหนือสีเติม และวงกลมก็ขยายตามไปด้วย