vite-plugin-xgis-cesium/README.md

xgis-cesium library plugin for Vite

# ⚡ vite-plugin-xgis-cesium

[![npm](https://img.shields.io/npm/v/vite-plugin-xgis-cesium.svg)](https://www.npmjs.com/package/vite-plugin-xgis-cesium)
[![npm](https://img.shields.io/npm/dt/vite-plugin-xgis-cesium)](https://www.npmjs.com/package/vite-plugin-xgis-cesium)

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

[`xgis-cesium`]: https://www.npmjs.com/package/xgis-cesium
[`cesium`]: https://cesium.com/platform/cesiumjs/
[`vite`]: https://vitejs.dev/

## xgis-cesium
![xgis-cesium](https://img.shields.io/npm/v/xgis-cesium.svg?label=xgis-cesium) 

## History

- 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

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

### Usage

add this plugin to `vite.config.js`

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

### xgis-cesium-demo

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

```js
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

![cesium](https://img.shields.io/npm/v/cesium.svg?label=cesium) 

### Install

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

### Usage

add this plugin to `vite.config.js`

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

## Demo

### Cesium

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

```js
import { Viewer } from 'cesium';

const viewer = new Viewer('cesiumContainer');
```

## License

MIT