MapConductorMapLibre का सेटअप
Web पर MapConductor से MapLibre का उपयोग करने की प्रक्रिया है। इसके लिए कुंजी की आवश्यकता नहीं है, और आप इसे सबसे तेज़ी से शुरू कर सकते हैं। maplibre-gl पैकेज के साथ बंडल किया गया है।
शुरू करने से पहले
इंस्टॉल करें
maplibre-gl पैकेज के साथ शामिल है, इसलिए इसे अलग से इंस्टॉल करने की आवश्यकता नहीं है।
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maplibreVite के प्री-बंडलिंग से बाहर निकालें
Vite का उपयोग करते समय प्रदाता को optimizeDeps.exclude में जोड़ें। maplibre-gl v6 वर्कर को URL से लोड करता है, इसलिए यदि यह पहले से बंडल कर दिया जाता है, तो वर्कर फ़ाइल .vite/deps के नीचे आउटपुट नहीं होगी और लोड करना विफल हो जाएगा।
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});स्टाइलशीट लोड करें
ऐप के एंट्री पॉइंट पर इसे एक बार लोड करें। यदि आप भूल जाते हैं, तो मानचित्र की स्थिति और नियंत्रण की दृश्यता बिगड़ जाएगी।
import '@mapconductor/react-for-maplibre/style.css';
स्टाइल तय करें
MapLibre में कोई कुंजी नहीं है, लेकिन आपको टाइल का स्रोत स्वयं तय करना होगा। डिफ़ॉल्ट DemoTiles केवल कार्यक्षमता की पुष्टि के लिए हैं।
जाँच
आपको क्या दिखना चाहिए
टोक्यो को केंद्र में रखकर मानचित्र प्रदर्शित होता है और एक मार्कर स्थापित होता है, तब पूर्ण हो जाता है।
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import '@mapconductor/react-for-maplibre/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useMapLibreViewState({
id: 'maplibre-map',
mapDesignType: MapLibreDesign.DemoTiles,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapLibreMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</MapLibreMapView2D>
);
}स्टेट ऑब्जेक्ट
useMapLibreViewState द्वारा प्राप्त पैरामीटर हैं। MapLibreMapView 3D में है, MapLibreMapView2D 2D में है, और दोनों एक ही स्थिति साझा करते हैं।
useMapLibreViewState({
id?: string;
mapDesignType?: MapLibreMapDesignType; // default MapLibreDesign.OsmBright
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})
// View props, on top of the shared MapViewBaseProps
{
maxZoom?: number;
minZoom?: number;
projection?: 'mercator' | 'globe'; // a component prop, not part of state
containerStyle?: React.CSSProperties;
markerTilingOptions?: MarkerTilingOptions;
onError?: (error: Error) => void;
}मैप डिज़ाइन
MapLibreDesign स्टाइल JSON के URL को लपेटने वाला एक स्थिरांक है।
समस्या निवारण
स्टाइल बदलने पर मानचित्र एक पल के लिए गायब हो जाता है
- mapDesignType का परिवर्तन setStyle के बजाय मानचित्र का पुनर्निर्माण करता है। स्टाइल बदलना सस्ता नहीं है। कृपया बार-बार बदलने वाले UI से बचें।
मानचित्र की स्थिति या नियंत्रण बिगड़ जाते हैं
- जांचें कि क्या style.css लोड हो रहा है।
विकास के दौरान ही मानचित्र दोहराकर प्रारंभ होता है
- React StrictMode प्रभाव को दो बार निष्पादित करता है। प्रत्येक प्रदाता इसका पता लगाता है और एक को निपटाने के लिए डिज़ाइन किया गया है, इसलिए StrictMode हटाने की आवश्यकता नहीं है।
आगे
projection="globe" गुजारने से ग्लोब डिस्प्ले होता है। यह व्यू के props में है, और स्टेट ऑब्जेक्ट में शामिल नहीं है।