⚡ vite-plugin-xgis-cesium

Easily set up a xgis-cesium & cesium project in Vite.

xgis-cesium

History

• v0.0.6 小修改：去掉“turf.min.js文件拷贝和脚本引入”的动作，适应xgis-cesium 0.4.2版;
• v0.0.5 小修改：去掉“打包后删除public/assets下js文件”的动作，否则影响下次打包;
• v0.0.4 配套支持xgis-cesium 0.3.0以后版本的webworker使用;
• v0.0.3 解决build打包时缺CESIUM_BASE_URL环境变量输出和拷贝turf.min.js失败;

Install

npm i xgis-cesium vite-plugin-xgis-cesium vite -D

Usage

add this plugin to vite.config.js

import { defineConfig } from 'vite';
import xgisCesiumPlugin from 'vite-plugin-xgis-cesium';
export default defineConfig({
  plugins: [xgisCesiumPlugin()]
});

xgis-cesium-demo

<div id="cesiumContainer"></div>

import { Cesium, XViewer } from 'xgis-cesium';
import 'xgis-cesium/dist/index.css';

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.4;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(102, 5, 115, 70);
//(116.05, 36.2548, 116.493, 36.4362);//
//初始化地球
function initCesiumViewer() {

  try {
    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, // 是否显示双屏
      sceneMode:Cesium.SceneMode.SCENE3D,
      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
        },
        // requestWebgl1: false,
      },
      requestRenderMode: false,//优化性能，需要主动触发更新   
      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());
    //取消版权图表
    var childList = viewer.creditContainer.childNodes;
    if (childList && childList.length > 1) {
      for (let i = 1; i < childList.length; i++) {
        viewer.creditContainer.removeChild(childList[i]);
      }
    }
   // 开启帧率
    viewer.scene.debugShowFramesPerSecond = true;
    // 深度监测
    viewer.scene.globe.depthTestAgainstTerrain = true;
    //调整视图亮度，参考https://blog.csdn.net/qq_24641385/article/details/107224811
    let stages = viewer.scene.postProcessStages;
    viewer.scene.brightness =  viewer.scene.brightness || stages.add(Cesium.PostProcessStageLibrary.createBrightnessStage());
    viewer.scene.brightness.enabled = true;
    viewer.scene.brightness.uniforms.brightness = 1.2;

    //默认单张图片，作为底图
    viewer.setBasicLayer('ARCGIS_IMG');
    return viewer;
  }
  catch (error) {
    // Global.Message.err('Cesium Viewer初始化失败！');
    // Global.Logger().error('Cesium Viewer初始化失败', error);
  }
  return undefined;
}

initCesiumViewer() ;

Cesium

Install

npm i cesium vite-plugin-xgis-cesium vite -D

Usage

add this plugin to vite.config.js

import { defineConfig } from 'vite';
import { cesiumPlugin } from 'vite-plugin-xgis-cesium';
export default defineConfig({
  plugins: [cesiumPlugin()]
});

Demo

Cesium

<div id="cesiumContainer"></div>

import { Viewer } from 'cesium';

const viewer = new Viewer('cesiumContainer');

License

MIT