เอกสาร / การตั้งค่า / React / Cesium

การตั้งค่า Cesium

ขั้นตอนการใช้ Cesium บนเว็บผ่าน MapConductor เลือกสิ่งนี้เมื่อต้องการแสดงผลลูกโลกจริงใน 3D จำเป็นต้องมีการตั้งค่าเพื่อรวมสินทรัพย์แบบคงที่ของ cesium ไว้ในการบิลด์

PACKAGE

react-for-cesium

API KEY

ไม่จำเป็น

CSS

จำเป็น

3D CAMERA

ของจริง

ดูเดโมแผนที่ร้านค้า · React ↗

ก่อนเริ่ม

Node.js 18 ขึ้นไป

การตั้งค่าบิลด์ที่สามารถให้บริการสินทรัพย์แบบคงที่ได้ (เช่น 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

Cesium โหลดไฟล์แบบคงที่ เช่น Workers, Assets, Widgets และ ThirdParty ขณะรันไทม์ คุณต้องคัดลอกสิ่งเหล่านี้ไปยังเส้นทางการให้บริการ และแจ้งตำแหน่งให้ Cesium ทราบผ่าน `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 คือค่าคงที่ที่ห่อหุ้ม ImageryProvider ของ Cesium

CesiumDesign

Notes

Default

ไทล์ OpenStreetMap พร้อมแสดงที่มา

None

ไม่มีเลเยอร์ภาพ

การแก้ปัญหา

เกิดข้อผิดพลาด 404 สำหรับ Worker หรือสินทรัพย์ในคอนโซล

ตรวจสอบการคัดลอกสินทรัพย์แบบคงที่และการตั้งค่า `CESIUM_BASE_URL` Cesium จะดึงข้อมูลเหล่านี้ขณะรันไทม์

บันเดิลมีขนาดใหญ่

cesium เป็นไลบรารีขนาดใหญ่ โปรดแยกหน้าจอที่ต้องการการแสดงผล 3D ออกมาเป็น dynamic import

แผนที่ถูกเริ่มต้นสองครั้งระหว่างการพัฒนา

React StrictMode จะรัน effect สองครั้ง เนื่องจากผู้ให้บริการแต่ละรายตรวจพบสิ่งนี้และทำลายอันใดอันหนึ่ง คุณจึงไม่จำเป็นต้องปิด StrictMode

เนื่องจาก Cesium มีกล้อง 3D จริง การเอียงและทิศทางจึงสะท้อนโดยตรง พฤติกรรมแตกต่างจาก 3D เสมือนของ Leaflet หรือ OpenLayers