@bigemap/cesium

Cesium plugin supporting Bigemap server..

Features

• Provides integration with Bigemap server for imagery and terrain data.
• Includes utilities for working with Cesium and Bigemap resources.

Installation

Install the package using npm:

npm install @bigemap/cesium

Peer Dependencies

This package requires the following peer dependency:

• @cesium/engine >= 16

Usage

importing the Plugin

import {
  BigemapConfig
  BigemapImageryProvider,
  BigemapTerrainProvider,
} from '@bigemap/cesium';
import { ImageryLayer, Viewer } from 'cesium';

// Set the Bigemap server URL
BigemapConfig.URL = 'http://bigemap-server-url';

// Initialize the Cesium Viewer
try {
  const viewer = new Viewer('cesiumContainer', {
    baseLayer: ImageryLayer.fromProviderAsync(
      BigemapImageryProvider.fromId('bigemap.dc-satellite')
    ),
    terrainProvider: await BigemapTerrainProvider.fromId('terrain-data-id'),
    baseLayerPicker: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    geocoder: false
  });
} catch (error) {
  console.log(error);
}

Using with React

import {
  BigemapConfig,
  BigemapImageryProvider,
  BigemapTerrainProvider
} from '@bigemap/cesium';
import { ImageryLayer, Viewer, viewerCesiumInspectorMixin } from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { useEffect, useRef } from 'react';

export default function CesiumViewer() {
  const cesiumContainer = useRef(null);
  let viewer: Viewer | null = null;

  useEffect(() => {
    let isMounted = true;
    const initViewer = async () => {
      if (!cesiumContainer.current) return;

      BigemapConfig.URL = 'http://bigemap-server-url';

      const terrainProvider =
        await BigemapTerrainProvider.fromId('terrain-data-id');

      if (!isMounted) return;

      // Initialize the Cesium Viewer
      viewer = new Viewer(cesiumContainer.current, {
        baseLayer: ImageryLayer.fromProviderAsync(
          BigemapImageryProvider.fromId('imagery-layer-id')
        ),
        terrainProvider,

        // Other options
        baseLayerPicker: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        geocoder: false
      });
    };

    initViewer();

    return () => {
      isMounted = false;
      if (viewer && !viewer.isDestroyed()) viewer.destroy();
    };
  }, []);

  return (
    <div
      ref={cesiumContainer}
      style={{
        width: '100%',
        height: '100vh',
        position: 'absolute',
        top: 0,
        left: 0
      }}
    />
  );
}

Assets

Define CESIUM_BASE_URL first, copy assets into target directory.

copy: [
  // Copy cesium's assets
  {
    from: '../../node_modules/cesium/Build/Cesium/Workers',
    to: `${CESIUM_BASE_URL}/Workers`,
  },
  {
    from: '../../node_modules/cesium/Build/Cesium/ThirdParty',
    to: `${CESIUM_BASE_URL}/ThirdParty`
  },
  {
    from: '../../node_modules/cesium/Build/Cesium/Assets',
    to: `${CESIUM_BASE_URL}/Assets`
  },
  {
    from: '../../node_modules/cesium/Build/Cesium/Widgets',
    to: `${CESIUM_BASE_URL}/Widgets`
  },

  // Copy @bigemap/cesium's assets
  {
    from: '../../node_modules/@bigemap/cesium/dist/Workers',
    to: `${CESIUM_BASE_URL}/Workers`
  }
]