MapConductor React SDK Samples

Codebeispiel

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) Die Karte erzeugen


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


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


// (2) Daten und Interaktionszustand vorbereiten
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) Die Karte und ihre Overlays rendern


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

Wie der Code funktioniert

Einen Kreis zeichnen und seinen Radius durch Ziehen des Rand-Markers ändern; die Radiuslinie liegt über dem Kreis.

Der Randpunkt ist React-State, den Spherical.computeOffset vorbelegt, Spherical.computeDistanceBetween(center, edge) leitet radiusMeters ab, und useMemo baut den CircleState neu, sobald sich dieser Radius ändert.

Das Ziehen des Rand-Markers ruft resizeCircle auf, um edge zu verschieben, während die auf zIndex 1 gezeichnete Polyline die Radiuslinie über der Füllung hält und der Kreis entsprechend mitwächst.