Skjölun / Uppsetning / React / Cesium

Uppsetning á Cesium

Hvernig nota má Cesium á vefnum gegnum MapConductor — kosturinn þegar þig langar í raunverulegan þrívíðan hnött. Það þarf að tengja kyrrstæðar skrár cesium inn í smíðina þína.

PACKAGE

react-for-cesium

API KEY

Enginn

CSS

Nauðsynlegt

3D CAMERA

Raunverulegt

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra

Smíðauppsetning sem getur borið fram kyrrstæðar skrár (Vite eða áþekkt)

STEP 01

Settu upp

cesium fylgir pakkanum.

terminalnpm

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

STEP 02

Fluttu inn stílblaðið

Fluttu hana inn einu sinni úr inngangsskrá forritsins. Gleymist það kemur umbrot kortsins og stýringar rangt út.

main.tsxTypeScript

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

STEP 03

Berðu fram kyrrstæðar skrár Cesium

Cesium hleður kyrrstæðum skrám á keyrslutíma — Workers, Assets, Widgets, ThirdParty. Afritaðu þær inn í það sem þú berð fram og bentu CESIUM_BASE_URL á þann stað. examples/basic/vite.config.ts er virkt dæmi um þessa tengingu.

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/'),
}

STAÐFESTA

Það sem þú ættir að sjá

Uppsetningunni er lokið þegar hnötturinn teiknast.

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>
  );
}

Kortahönnun

Hvert CesiumDesign vefur ImageryProvider úr Cesium.

CesiumDesign

Notes

Default

OpenStreetMap-flísar, heimild innifalin

None

Ekkert myndalag

Bilanaleit

Skjáskráin sýnir 404 fyrir verkamenn eða skrár

Athugaðu afritun kyrrstæðu skránna og CESIUM_BASE_URL — Cesium sækir þær á keyrslutíma.

Pakkinn er stór

cesium er stórt safn — fluttu aðeins þá skjái inn kvikt sem þurfa hnöttinn.

Kortið frumstillist tvisvar í þróun

React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.

Næst

Cesium hefur raunverulega þrívíða myndavél, svo halli og stefna taka gildi í alvöru — ólíkt eftirlíktu þrívíddinni í Leaflet og OpenLayers.