दस्तावेज़ / सेटअप / React / Cesium

Cesium का सेटअप

MapConductor से Web पर Cesium का उपयोग करने की प्रक्रिया है। इसे तब चुनें जब आप एक वास्तविक ग्लोब के रूप में 3D प्रदर्शन चाहते हैं। बिल्ड में `cesium` की स्थैतिक संपत्तियों (static assets) को शामिल करने की सेटिंग आवश्यक है।

PACKAGE

react-for-cesium

API KEY

आवश्यक नहीं

CSS

आवश्यक

3D CAMERA

वास्तविक

डेमो देखेंस्टोर मैप · React ↗

शुरू करने से पहले

Node.js 18 या उससे ऊपर

स्थैतिक संपत्तियों (static assets) को परोसने में सक्षम बिल्ड सेटिंग (जैसे Vite)

STEP 01

इंस्टॉल करें

cesium पैकेज में शामिल है।

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-cesium

STEP 02

स्टाइलशीट लोड करें

ऐप के एंट्री-पॉइंट पर केवल एक बार लोड करें। यदि आप भूल जाते हैं, तो मैप की स्थिति या नियंत्रण का स्वरूप बिगड़ जाएगा।

main.tsxTypeScript

import '@mapconductor/react-for-cesium/style.css';

STEP 03

Cesium की स्थैतिक संपत्तियों (static assets) को परोसें

Cesium Workers, Assets, Widgets, और ThirdParty जैसी स्थैतिक फ़ाइलों को रनटाइम पर लोड करता है। आपको इन्हें परोसने के पथ (distribution path) पर कॉपी करना होगा और `CESIUM_BASE_URL` के माध्यम से उस स्थान की जानकारी देनी होगी। सैंपल ऐप (`examples/basic/vite.config.ts`) इस सेटिंग का एक उदाहरण है।

vite.config.tsTypeScript

// Copy node_modules/cesium/Build/Cesium/{Workers,Assets,Widgets,ThirdParty}
// into your output directory, then tell Cesium where they live:
define: {
  CESIUM_BASE_URL: JSON.stringify('/cesiumStatic/'),
}

जाँच

आपको क्या दिखना चाहिए

यदि ग्लोब दिखाई देता है, तो पूर्ण हो गया।

CesiumMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { CesiumDesign, CesiumMapView, useCesiumMapViewState } from '@mapconductor/react-for-cesium';
import '@mapconductor/react-for-cesium/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function CesiumMap() {
  const state = useCesiumMapViewState({
    mapDesignType: CesiumDesign.Default,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

  return (
    <CesiumMapView state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </CesiumMapView>
  );
}

मैप डिज़ाइन

CesiumDesign, Cesium के ImageryProvider को लपेटे हुए एक स्थिरांक (constant) है।

CesiumDesign

Notes

Default

OpenStreetMap टाइल। एट्रिब्यूशन सहित

None

छवि परत (image layer) नहीं

समस्या निवारण

कंसोल पर Worker या एसेट के लिए 404 आ रहा है

स्थैतिक संपत्तियों (static assets) की कॉपी और `CESIUM_BASE_URL` की सेटिंग की जांच करें। Cesium उन्हें रनटाइम पर प्राप्त करने के लिए जाता है।

बंडल बड़ा है

cesium एक बड़ी लाइब्रेरी है। केवल उन स्क्रीन को जिनमें 3D प्रदर्शन की आवश्यकता हो, उन्हें डायनामिक इंपोर्ट में अलग करें।

केवल विकास के समय मैप दो बार प्रारंभ होता है

React StrictMode effect को दो बार निष्पादित करता है। प्रत्येक प्रदाता (provider) इसका पता लगाकर एक को नष्ट कर देता है, इसलिए StrictMode को हटाने की आवश्यकता नहीं है।

आगे

Cesium के पास एक वास्तविक 3D कैमरा है, इसलिए `tilt` और `bearing` सीधे प्रतिबिंबित होते हैं। यह Leaflet या OpenLayers के छद्म 3D (pseudo-3D) से व्यवहार में भिन्न है।