cesium-alpha-earth 1.0.0

package/src/core/CesiumAlphaViewer/method/createViewer.ts

@@ -0,0 +1,53 @@
+import { Viewer, Math, Cartesian3 } from "cesium";
+import { ViewerOption } from "../type";
+
+let defaultOption: Viewer.ConstructorOptions = {
+  animation: false,
+  baseLayerPicker: false, // 右上角的图层选择按钮
+  fullscreenButton: false, // 全屏按钮
+  vrButton: false,
+  geocoder: false, // 搜索框
+  homeButton: false,
+  infoBox: false, // 信息框是否显示
+  sceneModePicker: false, // 模式切换按钮
+  selectionIndicator: false, // 选择指示器是否显示
+  timeline: false, // 时间轴
+  navigationHelpButton: false, // 导航帮助按钮是否显示
+  navigationInstructionsInitiallyVisible: false,
+};
+
+export function createViewer(
+  container: string | HTMLElement,
+  option?: ViewerOption
+) {
+  let viewer = new Viewer(container, {
+    ...defaultOption,
+    ...option?.control,
+    sceneMode: option?.scene?.sceneMode,
+    baseLayer: undefined,
+  });
+
+  if (option) {
+  }
+
+  if (option?.scene?.center) {
+    let centerPosition = Cartesian3.fromDegrees(
+      option?.scene.center?.lng,
+      option?.scene.center?.lat,
+      option?.scene.center?.alt
+    );
+    // 设置摄像机初始视角
+    viewer.camera.setView({
+      destination: centerPosition, // 经纬度 + 高度
+      orientation: {
+        heading: Math.toRadians(option?.scene?.center?.heading || 0), // 朝向角度
+        pitch: Math.toRadians(option?.scene?.center?.pitch || -90), // 俯仰角（负值向下）
+        roll: option?.scene?.center?.roll, // 滚动角度
+      },
+    });
+  }
+
+  viewer.creditDisplay.container.remove();
+
+  return viewer;
+}

package/src/core/CesiumAlphaViewer/method/goTo.ts

@@ -0,0 +1,108 @@
+import {
+  Cartesian3,
+  BoundingSphere,
+  Cesium3DTileset,
+  Viewer,
+  Cartographic,
+  Math,
+  HeadingPitchRange,
+} from "cesium";
+import { FlyToOptionType, FlyToTargetType } from "../type";
+
+export function goTo(
+  viewer: Viewer,
+  target:FlyToTargetType,
+  option?: FlyToOptionType
+) {
+  let defaultFlyToOption = {
+    distence: 3000,
+    pitch: -90,
+    heading: 0,
+    roll: 0.0,
+  };
+  const camera = viewer.camera;
+
+  if (option) {
+    if (option.distence) {
+      defaultFlyToOption.distence = option.distence;
+    }
+
+    if (option.pitch) {
+      defaultFlyToOption.pitch = option.pitch;
+    }
+
+    if (option.heading) {
+      defaultFlyToOption.heading = option.heading;
+    }
+
+    if (option.roll) {
+      defaultFlyToOption.roll = option.roll;
+    }
+  }
+
+  if (target instanceof Cartesian3) {
+    // 如果目标是 Cartesian3 坐标
+    camera.flyTo({
+      destination: setHeight(target, defaultFlyToOption.distence),
+      orientation: {
+        heading: Math.toRadians(defaultFlyToOption.heading),
+        pitch: Math.toRadians(defaultFlyToOption.pitch),
+        roll: defaultFlyToOption.roll,
+      },
+      duration: 3, // 飞行时长，单位：秒
+    });
+  } else if (target instanceof Cesium3DTileset) {
+    camera.flyTo({
+      destination: setHeight(
+        target.boundingSphere.center,
+        defaultFlyToOption.distence
+      ),
+      orientation: {
+        heading: Math.toRadians(defaultFlyToOption.heading),
+        pitch: Math.toRadians(defaultFlyToOption.pitch),
+        roll: defaultFlyToOption.roll,
+      },
+      duration: 3,
+    });
+  } else if (target instanceof BoundingSphere) {
+    // 如果目标是 BoundingSphere，直接飞向包围球
+    camera.flyToBoundingSphere(target, {
+      duration: 3,
+      offset: new HeadingPitchRange(
+        defaultFlyToOption.heading,
+        defaultFlyToOption.pitch,
+        defaultFlyToOption.distence
+      ),
+      complete: () => {
+        console.log("飞行结束");
+      },
+      cancel: () => {
+        console.log("飞行被取消");
+      },
+    });
+  } else if (target.longitude && target.latitude) {
+    const { longitude, latitude, height } = target;
+
+    const destination = Cartesian3.fromDegrees(longitude, latitude, height);
+
+    camera.flyTo({
+      destination: setHeight(destination,defaultFlyToOption.distence),
+      duration: 3,
+      orientation: {
+        heading: Math.toRadians(defaultFlyToOption.heading),
+        pitch: Math.toRadians(defaultFlyToOption.pitch),
+        roll: defaultFlyToOption.roll,
+      },
+    });
+  }
+}
+
+function setHeight(position: Cartesian3, height: number) {
+  let carposition = Cartographic.fromCartesian(position);
+  carposition.height += height;
+  return Cartesian3.fromRadians(
+    carposition.longitude,
+    carposition.latitude,
+    carposition.height
+  );
+}

package/src/core/CesiumAlphaViewer/method/load3DtilestModel.ts

@@ -0,0 +1,56 @@
+import { Cesium3DTileset, ShadowMode } from "cesium";
+import CesiumAlphaViewer from "..";
+import { ModelInfoOption } from "../type";
+export async function load3DtilestModel(earthViewer:CesiumAlphaViewer,model: ModelInfoOption[]) {
+  if (!earthViewer.viewer) {
+    return;
+  }
+  let tilestArr: Cesium3DTileset[] = [];
+  for (let item of model) {
+    // 加载模型
+    const tileset = await Cesium3DTileset.fromUrl(item.modelUrl, {
+      maximumScreenSpaceError: 32, // 增大屏幕空间误差
+      cullWithChildrenBounds: true, // 使用子边界裁剪
+      dynamicScreenSpaceError: false, // 禁用动态屏幕空间误差
+      skipLevelOfDetail: true, // 跳过LOD层级
+      baseScreenSpaceError: 512, // 基础屏幕空间误差
+      preloadWhenHidden: true, // 预加载隐藏瓦片
+      shadows: ShadowMode.DISABLED,
+      preloadFlightDestinations: true, // 预加载飞行目的地瓦片
+      preferLeaves: true, // 优先加载叶子节点
+      progressiveResolutionHeightFraction: 0.5, // 渐进式分辨率高度分数
+      dynamicScreenSpaceErrorDensity: 10, // 数值加大，能让周边加载变快 --- 用于调整动态屏幕空间误差的密度，类似于雾密度(默认0.00278)
+      dynamicScreenSpaceErrorFactor: 1, // 不知道起了什么作用没，反正放着吧先 --- 用于增加计算的动态屏幕空间误差的因素(默认4.0)
+      dynamicScreenSpaceErrorHeightFalloff: 0.25, // --- 密度开始下降的瓦片集高度的比率(默认0.25)
+      foveatedScreenSpaceError: true, // --- 优化选项。通过暂时提高屏幕边缘周围图块的屏幕空间错误，优先加载屏幕中心的图块。一旦Cesium3DTileset#foveatedConeSize加载确定的屏幕中心的所有图块，屏幕空间错误就会恢复正常。(默认true)
+      foveatedConeSize: 0.1, // --- 优化选项。当Cesium3DTileset#foveatedScreenSpaceError为 true 时使用来控制决定延迟哪些图块的锥体大小。立即加载此圆锥内的瓷砖。圆锥外的瓷砖可能会根据它们在圆锥外的距离及其屏幕空间误差而延迟。这是由Cesium3DTileset#foveatedInterpolationCallback和控制的Cesium3DTileset#foveatedMinimumScreenSpaceErrorRelaxation。将此设置为 0.0 意味着圆锥将是由相机位置及其视图方向形成的线。将此设置为 1.0 意味着锥体包含相机的整个视野,禁用效果(默认0.1)
+      foveatedMinimumScreenSpaceErrorRelaxation: 0.0, // --- 优化选项。当Cesium3DTileset#foveatedScreenSpaceError为 true 时使用以控制中央凹锥之外的图块的起始屏幕空间误差松弛。屏幕空间错误将从 tileset 值开始Cesium3DTileset#maximumScreenSpaceError根据提供的Cesium3DTileset#foveatedInterpolationCallback.(默认0.0)
+      cacheBytes: 10000000000,
+      backFaceCulling: false, // --- 是否剔除背面几何体。当为 true 时，背面剔除由 glTF 材质的 doubleSided 属性确定；如果为 false，则禁用背面剔除(默认true)
+      ...item.modelOption,
+    });
+
+    //贴地逻辑
+    // let boundingSphere = tileset.boundingSphere;
+    // let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+    // let claimPosition = this.viewer.scene.clampToHeight(boundingSphere.center)
+    // var heightOffset = 3000;
+    // var translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0, 0, heightOffset));
+    // tileset.modelMatrix = Cesium.Matrix4.multiply(tileset.modelMatrix, translation, new Cesium.Matrix4());
+
+    //@ts-ignore
+    tileset.name = item.modelName;
+    //@ts-ignore
+    tileset.url = item.modelUrl;
+    //@ts-ignore
+    tileset.uid = item.modelId || nanoid();
+
+    earthViewer.viewer?.scene.primitives.add(tileset);
+    
+    tilestArr.push(tileset);
+
+    earthViewer.modelDatasource.push(tileset);
+  }
+
+  return tilestArr;
+}

package/src/core/CesiumAlphaViewer/method/loadGeoJsonLayer.ts

@@ -0,0 +1,33 @@
+import { cloneDeep } from "lodash";
+import CesiumAlphaViewer from "..";
+import { LayerInfoOption } from "../type";
+import { GeoJsonLayer } from "@/core/CesiumAlphaGeoJsonLayer";
+
+export async function loadGeoJsonLayer(earthView:CesiumAlphaViewer,layerInfo:LayerInfoOption[]) {
+  let that = earthView;
+  let returnArr: any[] = [];
+  let promiseArray: Promise<any>[] = [];
+  for (let item of layerInfo) {
+    let option = cloneDeep(item.option);
+    let promise = GeoJsonLayer.load(item.url, option).then(
+      (layer: GeoJsonLayer) => {
+        earthView.layerDatasource.push(layer);
+        that.viewer?.scene.primitives.add(layer.primitiveCollection);
+        returnArr.push(layer);
+      }
+    );
+    promiseArray.push(promise);
+  }
+  await Promise.all(promiseArray);
+
+  earthView.viewer.scene.terrainProviderChanged.raiseEvent();
+
+  //排序
+  let sortArr = returnArr.sort((a: any, b: any) => {
+    return a.zIndex - b.zIndex;
+  });
+  sortArr.forEach((layer: GeoJsonLayer) => {
+    earthView.viewer?.scene.primitives.raiseToTop(layer.primitiveCollection);
+  });
+  return returnArr;
+}

package/src/core/CesiumAlphaViewer/type.ts

@@ -0,0 +1,141 @@
+import {
+  Cesium3DTileset,
+  SceneMode,
+  GeocoderService,
+  ProviderViewModel,
+  UrlTemplateImageryProvider,
+  Resource,
+  Cartesian3,
+  BoundingSphere,
+} from "cesium";
+import { GeoJsonLayerType } from "../CesiumAlphaGeoJsonLayer/type";
+
+export enum EarthMode {
+  SCENE3D = SceneMode.SCENE3D,
+  SCENE2D = SceneMode.SCENE2D,
+  COLUM_VIEW = SceneMode.COLUMBUS_VIEW,
+}
+
+/**
+ * 图层类型
+ */
+export enum ImageLayerType {
+  TXDT,
+  GDDT,
+  ARCGIS,
+  TDT,
+  CUSTOM,
+}
+
+/**
+ * 地形类型
+ */
+export enum TerrainType {
+  /**
+   * 无地形
+   */
+  NONE = "none",
+  /**
+   * arcgis地形
+   */
+  ARCGIS = "arcgis",
+  /**
+   * ION在线地形(cesium官方服务)
+   */
+  ICON = "icon",
+  //  /**
+  //  * 自定义
+  //  */
+  CUSTOM = "custom",
+}
+
+export type ViewerOption = {
+  control?: ControlOption;
+  scene?: SceneOption;
+  basemap?: BasemapOption;
+  terrain?: TerrainOption;
+};
+
+export type SceneOption = {
+  center?: {
+    lng: number;
+    lat: number;
+    alt: number;
+    heading?: number;
+    pitch?: number;
+    roll?: number;
+  };
+  showSkyBox?: boolean;
+  skyBoxSource?: any;
+  showSun?: boolean;
+  ionToken?: string;
+  sceneMode?: SceneMode;
+};
+
+export type ControlOption = {
+  homeButton?: boolean | any;
+  zoom?: any;
+  sceneModePicker?: boolean | any;
+  projectionPicker?: boolean | any;
+  fullscreenButton?: boolean | any;
+  fullscreenElement?: HTMLElement | string | any;
+  vrButton?: boolean | any;
+  geocoder?: boolean | GeocoderService[] | any;
+  navigationHelpButton?: boolean | any;
+  navigationInstructionsInitiallyVisible?: boolean | any;
+  baseLayerPicker?: boolean | any;
+  imageryProviderViewModels?: ProviderViewModel[];
+  selectedImageryProviderViewModel?: ProviderViewModel;
+  terrainProviderViewModels?: ProviderViewModel[];
+  selectedTerrainProviderViewModel?: ProviderViewModel;
+  compass?: any;
+  showPopup?: boolean;
+  animation?: boolean;
+  timeline?: boolean;
+  infoBox?: boolean;
+  selectionIndicator?: boolean;
+  showRenderLoopErrors?: boolean;
+};
+
+export type BasemapOption = {
+  type?: ImageLayerType;
+  other?: UrlTemplateImageryProvider.ConstructorOptions;
+};
+
+export type TerrainOption = {
+  type?: TerrainType;
+  url?: string | Resource;
+  show?: boolean;
+  requestVertexNormals?: boolean;
+  requestWaterMask?: boolean;
+  requestMetadata?: boolean;
+  clip?: boolean;
+  flat?: boolean;
+  uplift?: boolean;
+  flood?: boolean;
+};
+
+export type FlyToOptionType = {
+  distence?: number;
+  roll?: number;
+  pitch?: number;
+  heading?: number;
+};
+
+export type FlyToTargetType =
+  | Cartesian3
+  | BoundingSphere
+  | Cesium3DTileset
+  | { longitude: number; latitude: number; height?: number };
+
+export type ModelInfoOption = {
+  modelUrl: string;
+  modelName: string;
+  modelId: string;
+  modelOption?: Cesium3DTileset.ConstructorOptions;
+};
+
+export type LayerInfoOption = {
+  url: string;
+  option: GeoJsonLayerType.GeoJsonLayerOptions;
+};

package/src/index.ts

@@ -0,0 +1,10 @@
+//地球类型
+import {
+  ImageLayerType,
+  TerrainType,
+  EarthMode,
+} from "./core/CesiumAlphaViewer/type";
+
+import CesiumAlphaViewer from "./core/CesiumAlphaViewer";
+
+export { ImageLayerType, TerrainType, EarthMode,CesiumAlphaViewer };