दृश्य क्षेत्र | MapLibre

कोड उदाहरण

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, type VisibleRegion } from '@mapconductor/js-sdk-core';
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 [region, setRegion] = useState<VisibleRegion | null>(null);


// (3) मैप और उसके ओवरले रेंडर करें


<MapLibreMapView2D
  state={mapViewState}
  onCameraMove={camera => setRegion(camera.visibleRegion)}
/>


<VisibleRegionValues region={region} />

कोड कैसे काम करता है

कैमरा इवेंट से प्रोवाइडर-निरपेक्ष दृश्य क्षेत्र पढ़ें — उसकी सीमा और चारों कोनों के निर्देशांक सहित।

हर onCameraMove इवेंट एक camera लाता है, जिसका visibleRegion React स्टेट में VisibleRegion मान के रूप में सहेजा जाता है।

फिर VisibleRegionValues उस क्षेत्र की सीमा और चारों कोने छापता है — सामान्यीकृत, ताकि किसी भी प्रोवाइडर पर वही अंक दिखें।

MapConductor React SDK Samples

दृश्य क्षेत्र | MapLibre | MapConductor React SDK

कोड उदाहरण

कोड कैसे काम करता है