3UMAP SDK3

切换日光/暗黑模式

Globe 地球类 ​

创建 ​

typescript
const globe = await createGlobe('viewer')

提示

如果需要一个页面需要多个地球，可以指定默认地球，同时指定多个则最后一个为默认

如不指定第一个创建的球体为默认球体

设置默认球体可以在调用具体方法时不用传递地球id

typescript
createMaptile({url:''}) //向默认球体添加影像
createMaptile({url:''}, globe.id) //指定球体添加

类型 ​

typescript
type CreateGLobe = {
  (dom: string | HTMLElement, option?: GlobeOptions, isDefault?: boolean): Promise<Globe>;
};

type GlobeOptions = {
  /**【变】地球阴影 false */
  shadows?: boolean;
  /**【变】场景模式 */
  sceneMode?: 2 | 2.5 | 3;
  /** 只显示三维 true 开启后 sceneMode 无效 */
  scene3DOnly?: boolean;
  /** 确保透明物体间的透视视觉正确 true */
  transparentPerformance?: boolean;
  /** [变] 点击高亮 false */
  heightLight?: boolean;
  /** [变] 高亮颜色 Color.RED */
  heightLightColor?: MapColor;
  /** [变] 高亮描边颜色 Color.WHITE */
  outlineColor?: MapColor;
  /** [变] 属性名要转换为中文的枚举对象 */
  propertyName?: Record<string, string>;
  /** [变] 要屏蔽不显示的属性 */
  propertyDelete?: string[];
  /** [变] 是否获取属性 false */
  getProperty?: boolean;
  /** [变] 是否显示属性弹窗 */
  propertyPop?: boolean;
  /**【变】地形深度监测 true */
  terrainDepth?: boolean;
  /**【变】宇宙背景色，没有宇宙背景时显示，Color.BLACK */
  backgroundColor?: MapColor;
  /**【变】地球背景色，没有影像贴图时显示，Color.BLUE */
  globeColor?: MapColor;
  /**【变】当摄像机位于地下，或地球半透明时，地球背面的颜色, Color.BLACK */
  undergroundColor?: MapColor;
  /** 是否实时渲染  */
  requestRenderMode?: boolean;
  /** 屏幕最小刷新率 requestRenderMode为 true 时起作用*/
  minFps?: number;

  /**
   *@description 自定义属性弹窗 回调函数接受属性对象，需要反悔html字符串或者html元素
   *@param property 属性
   *@return void
   *@MethodAuthor ironbull
   *@Date 2024-05-10 14:23:37
   */
  customPop?: (property: Record<string, any>) => HTMLElement | string;
};

判定 ​

isGlobe() ​

typescript
const isGlobe: (tar: any) => tar is Globe

属性 ​

readonly id: string 唯一标识 ​

shadows: boolean 地球阴影 false ​

transparentPerformance: boolean 确保透明物体间的透视视觉正确 true ​

skybox: boolean 天空盒开启 false ​

skyboxtype: 1 | 2 | 3 | 4 天空盒类型 ​

groundSkyBox: 0 | 1 | 2 | 3 近景天空盒 0 ​

sun: boolean 太阳 true ​

moon: boolean 月亮 false ​

fog: boolean 雾 false ​

snow: boolean 雪 false ​

rain: boolean 雨 false ​

dark: boolean 黑夜 false ​

skyAtmosphere: boolean 天空大气 true ​

groundAtmosphere: boolean 地面大气 true ​

fxaa: boolean 抗锯齿 false ​

terrainDepth: boolean 地形深度监测 false ​

backgroundColor: MapColor 宇宙背景色，没有宇宙背景时显示 ​

globeColor: MapColor 地球背景色，没有影像贴图时显示 ​

terrainTransparency: number 地球透明度 1 ​

undergroundColor: MapColor 当摄像机位于地下，或地球半透明时，地球背面的颜色 ​

sceneMode: 2 | 2.5 | 3 场景模式 ​

getProperty: boolean 是否获取属性 false ​

propertyPop: boolean 是否显示属性弹窗 false ​

propertyPopups: HtmlLabel 属性弹窗控制挂载类 ​

customPop: GlobeOptions['customPop'] 自定义属性弹窗 ​

readonly propertyPopElement: PropertyPop 属性弹窗控制挂载类 ​

heightLight: boolean 点击高亮 false ​

  • 移除高亮需要导入调用 clearHeightLight 方法

heightLightColor: MapColor 高亮颜色 ​

outlineColor: MapColor 高亮描边颜色 ​

propertyName: Record<string, string> 属性名要转换为中文的枚举对象 ​

propertyDelete: string[] 要屏蔽不显示的属性 ​

BloomLightScene: boolean 场景泛光效果 ​

hdr: boolean HDR 效果 false ​

readonly Event: EventManager 事件管理器 ​

readonly instanceManager 实例管理器 ​

readonly message: Message message消息提示工具 ​

readonly propertyManger: PropertyManager 属性管理器 ​

readonly mouseTipsElement: MouseTips 提示工具 ​

readonly rotate: GlobeRotate 地球旋转 ​

readonly camera: Camera 摄像机 ​

requestRenderMode: boolean 是否实时渲染 ​

set minFps 屏幕最小刷新率(requestRenderMode为true时有效) ​

readonly autoRender: AutoRender 自动渲染 ​

readonly test: Test 测试工具 ​

readonly container: HTMLElement 挂载的容器 ​

readonly clock: Clock cesium时钟 ​

方法 ​

render 手动调用渲染视图 ​

typescript
render():void

template html模板替换函数 ​

typescript
  /**
   *@description HTML模板替换
   *@param html 模板字符串
   *@param context 替换内容
   *@return void
   *@example
   * const globe = createGlobe('view')
   * const html = '<div>{{ name }}</div>'
   * const context = {name: 'ironbull'}
   * const result = globe.template(html, context)
   * console.log(result) //<div>ironbull</div>
   *@MethodAuthor ironbull
   *@Date 2024-06-01 10:15:30
   */
template(html: string, context: Record<string, string>): string

destroy 销毁地球对象 ​

typescript
destroy(): boolean