快速入门

框架安装

npm / yarn / pnpm

npm / yarn / pnpm 的方式安装，它能更好地和 vite 打包工具配合使用。

npm install xgis-cesium
npm install @cesium/engine
# yarn add xgis-cesium
# yarn add @cesium/engine
# pnpm add xgis-cesium
# pnpm add @cesium/engine

import * as Cesium from '@cesium/engine'
import {XViewer} from 'xgis-ceisum'
import 'xgis-cesium/dist/index.css'

使用方法

1、拷贝cesium资源，到public/cesium文件夹

• 手动拷贝 node_modules/@cesium/engine下资源

  • @cesium/engine/Build/Workers

  • @cesium/engine/Source/ThirdParty

  • @cesium/engine/Source/Assets

• 使用vite插件 rollup-plugin-copy

  • vite.config.ts里配置

// vite.config.ts
import { defineConfig } from 'vite'
import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [copy({
           targets: [
             //下面为cesium 三维资源的拷贝
             { src: './node_modules/@cesium/engine/Build/Workers', dest: 'public/cesium' }, 
             { src: './node_modules/@cesium/engine/Source/ThirdParty', dest: 'public/cesium' }, 
             { src: './node_modules/@cesium/engine/Source/Assets', dest: 'public/cesium' }, 
           ]
         })],
})

• 使用quasar.config.ts配置

import { existsSync } from 'fs';

if(!existsSync('public/cesium'))
      {
        defaultPlugins.push(     
         ['rollup-plugin-copy',{
           targets: [
             //下面为cesium 三维资源的拷贝
             { src: './node_modules/@cesium/engine/Build/Workers', dest: '/public/cesium' }, 
             { src: './node_modules/@cesium/engine/Source/ThirdParty', dest: '/public/cesium' }, 
             { src: './node_modules/@cesium/engine/Source/Assets', dest: '/public/cesium' }, 
           ]
         }]);
      }

2、使用XViewer初始化构建球

    import * as Cesium from '@cesium/engine';
    import { XViewer} from 'xgis-cesium';

//初始化地球
    function initCesiumViewer() {
      //@ts-ignore
      if(!window.CESIUM_BASE_URL)
      {
        //@ts-ignore
        window.CESIUM_BASE_URL='./cesium/';
      }
      try {
        //https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html#.ConstructorOptions
        const viewer = new XViewer('cesiumContainer', {
          animation: false, //是否创建动画小器件，左下角仪表
          baseLayerPicker: false, //是否显示图层选择器
          fullscreenButton: false, //是否显示全屏按钮
          geocoder: false, //是否显示geocoder小器件，右上角查询按钮
          homeButton: false, //是否显示home按钮
          infoBox: false, //是否显示信息框
          sceneModePicker: false, //是否显示3D/2D选择器
          selectionIndicator: false, //是否显示选取指示器组件 鼠标绿色框
          timeline: false, // 是否显示时间轴
          navigationHelpButton: false, // 是否显示右上角的帮助按钮
          vrButton: false, // 是否显示双屏
          scene3DOnly: true, // 如果设置为true,则所有几何图形以3d模式绘制以节约gpu资源
          fullscreenElement: document.body, //全屏时渲染的html元素
          navigationInstructionsInitiallyVisible: false,
          contextOptions: {
            // cesium状态下允许canvas转图片convertToImage
            webgl: {
              alpha: false,
              depth: false,
              stencil: true,
              antialias: true,
              premultipliedAlpha: true,
              preserveDrawingBuffer: true, //通过canvas.toDataURL()实现截图需要将该项设置为true
              failIfMajorPerformanceCaveat: false
            },
            //https://juejin.cn/post/7265042701065437220
            // requestWebgl1: false,
          },
          //https://cesium.com/learn/cesiumjs/ref-doc/CesiumWidget.html?classFilter=CesiumWidget
          //https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/
          requestRenderMode: true,//优化性能，需要主动触发更新   scene.requestRender();
          targetFrameRate: 60,
          orderIndependentTranslucency: true,
          automaticallyTrackDataSourceClocks: false,
          dataSources: undefined,
          terrainShadows: Cesium.ShadowMode.DISABLED,
          //是正确的
          baseLayer: false,
          // terrainProvider: await Cesium.createWorldTerrainAsync({
          //      requestVertexNormals: true,
          //      requestWaterMask: true,     // 动态水流
          // }),
          //默认地形-无地形
          terrainProvider: new Cesium.EllipsoidTerrainProvider(),
        });
        viewer.clock.currentTime = Cesium.JulianDate.fromDate(new Date());
        return viewer;
      }
      catch (error) {
        Global.Message.err('Cesium Viewer初始化失败！');
        Global.Logger().error('Cesium Viewer初始化失败', error);
      }
      return undefined;
    }

3、调用开发示例

      Global.CesiumViewer = initCesiumViewer();
      if (Global.CesiumViewer) {
        const xviewer = Global.CesiumViewer as XViewer;
      //   const terrain = TerrainFactory.createUrlTerrain({
      // url: 'http://data.marsgis.cn/terrain'
      // });
   
      //   //地形
      //   xviewer.setTerrain(terrain);
        //默认单张图片，作为底图
        xviewer.setBasicLayer('ARCGIS_IMG');
        // xviewer.flyToPosition(new Position(116.2698, 36.3475, 203,5.69,-26.2,360));
       
        // xviewer.Weather.rain.enable=true;
        // setTimeout(() => {
        //   xviewer.Weather.rain.destroy();
        //   xviewer.scene.requestRender();
        // }, 5000);
      }

4、三维应用示例

更多示例