跳到主要内容

配置项

初始配置项​

在实例化组件时传递的配置项--initOption。

const globeIns = new Globe(dom, initOption?);
interface initOption {
  animateIn?: boolean;
}

animateIn​

  • 类型 boolean
  • 默认值 true

v0.1.0+

是否需要入场动画。

渲染配置项​

以下均为在每次调用 render() 时传递的配置项--renderOption。

globeIns.render(renderOption);
interface renderOption {
  theme?: 'dark' | 'light';
  layers?: layerOption | layerOption[];
  backgroundColor?: string;
  backgroundImage?: string;
  globe?: {
    image?: string;
    shadowImage?: {
        assetUrl?: string;
        scale?: number;
    };
    model?: {
        assetUrl?: string;
        material?: {
            color?: string;
            emissive?: string;
        };
    };
  };
  /** 相机配置 @see https://threejs.org/docs/#api/en/cameras/PerspectiveCamera */
  camera?: PerspectiveCamera;
  /** 视角控制器配置 @see https://threejs.org/docs/?q=Contro#examples/en/controls/OrbitControls */
  controls?: OrbitControls;
}

主题​

theme​

  • 类型 typeof THEME[keyof typeof THEME]（见主题配置）

    /** 主题 */
    export const THEME = {
      /** 夜间版 */
      DARK: 'dark',
      /** 日间版 */
      LIGHT: 'light',
    } as const;

  • 默认值 dark

主题名称。

图层 layers​

v0.2.0+

提示

图层layers在整个地球组件配置renderOption的路径为：renderOption.layers。可以是单独的某一个图层配置，也可以是多个图层的配置集合。目前可支持Point图层和Tooltip图层。

信息

具体图层配置可见如下：Point图层 Tooltip图层

  • 类型 layerOption | layerOption[]
type layerOption = PointLayerOption | TooltipLayerOption

单个或多个图层配置项的集合。

地球点图层 PointLayer​

v0.2.0+

PointLayer​

  • 数据格式
  type PointDataItem = {
    /** 唯一标识 */
    id: string;
    /** 经度 longitude */
    lng: number;
    /** 纬度 latitude */
    lat: number;
    name: string;
    /** 权重，用来排序过滤数据 */
    weight: number;
    /** 在自定义内容的过程中，你所需要的任意数据 */
    [key: string]: unknown;
  }

地球球面点图层配置。

PointLayer.itemStyle.className​

  • 类型 string

地球球面点图层的点标记元素的 css 类名。

PointLayer.itemStyle.selectedClassName​

  • 类型 string

地球球面点图层的点标记元素处于选中状态的 css 类名。

PointLayer.lineStyle.className​

  • 类型 string

地球球面点图层的线元素的 css 类名。

PointLayer.lineStyle.selectedClassName​

  • 类型 string

地球球面点图层的线元素处于选中状态的 css 类名。

PointLayer.lineStyle.minLength​

  • 类型 number

地球球面点图层的线元素的最小像素长度。

PointLayer.labelStyle.className​

  • 类型 string

地球球面点图层的标签元素的 css 类名。

PointLayer.labelStyle.selectedClassName​

  • 类型 string

地球球面点图层的标签元素处于选中状态的 css 类名。

PointLayer.labelStyle.verticalSafeMargin​

注意

由于布局算法实现的限制，此配置项不一定生效。

  • 类型 number

地球球面点图层的标签元素之间垂直方向的安全距离。

PointLayer.labelFormatter​

  • 类型 (data: PointDataItem) => string

地球球面点图层的标签元素自定义内容。（可返回字符串或者 DOM 字符串）

PointLayer.layout.visibleBoxPadding​

提示

默认的检测区域是地球所在的包围盒，可设置上下左右四个方向的内边距，正值为向外扩展检测区域，负值为向内缩小。

  • 类型 [number, number, number, number]

地球球面点图层的数据点可见区域的包围盒内边距（上、右、下、左），可用来设置显/隐检测的区域。

PointLayer.layout.limitVisibleNum​

  • number

地球球面点图层的数据点的显示数量。（用来限制数据点的展示数量）

PointLayer.layout.perspectiveMinScale​

  • number

地球球面点图层的数据点的透视效果最小缩放倍数。（最远处）

PointLayer.layout.perspectiveMaxScale​

  • number

地球球面点图层的数据点的透视效果最大缩放倍数。（最近处）

PointLayer.selectMultiple​

  • boolean

地球面板标记图层 TooltipLayer​

v0.2.0+

TooltipLayer​

  • 数据格式
  type TooltipDataItem = {
    /** 唯一标识 */
    id: string;
    /** 经度 longitude */
    lng: number;
    /** 纬度 latitude */
    lat: number;
    /** 在自定义内容的过程中，你所需要的任意数据 */
    [key: string]: unknown;
  }

地球面板标记图层配置。

TooltipLayer.itemStyle.className​

  • 类型 string

地球面板标记图层的点标记元素的 css 类名。

TooltipLayer.itemStyle.selectedClassName​

  • 类型 string

地球面板标记图层的点标记元素处于选中状态的 css 类名。

TooltipLayer.itemStyle.formatter​

提示

formatter的第二位参数即标签元素对应的容器div。

  • 类型 (data: TooltipDataItem, el: HTMLElement) => string | HTMLElement

地球球面点图层的点标记元素自定义内容。（可返回DOM 字符串或HTML元素对象）

TooltipLayer.itemStyle.itemSize​

提示

itemSize为回调函数的情况下，第二位参数即标签元素对应的容器div。

  • 类型 number | (data: TooltipDataItem, el: HTMLElement) => string | HTMLElement

地球球面点图层的点标记元素自定义宽高。（可返回DOM 字符串或HTML元素对象）

TooltipLayer.lineStyle.className​

  • 类型 string

地球面板标记图层的线元素的 css 类名。

TooltipLayer.lineStyle.selectedClassName​

  • 类型 string

地球面板标记图层的线元素处于选中状态的 css 类名。

TooltipLayer.lineStyle.minLength​

  • 类型 number

地球面板标记图层的线元素的最小像素长度。

TooltipLayer.contentStyle.className​

  • 类型 string

地球面板标记图层的标签元素的 css 类名。

TooltipLayer.contentStyle.selectedClassName​

  • 类型 string

地球面板标记图层的标签元素处于选中状态的 css 类名。

  • 类型 number

地球球面点图层的标签元素之间垂直方向的安全距离。

TooltipLayer.layout.visibleBoxPadding​

提示

默认的检测区域是地球所在的包围盒，可设置上下左右四个方向的内边距，正值为向外扩展检测区域，负值为向内缩小。

  • 类型 [number, number, number, number]

地球球面点图层的数据点可见区域的包围盒内边距（上、右、下、左），可用来设置显/隐检测的区域。

TooltipLayer.layout.limitVisibleNum​

  • number

地球球面点图层的数据点的显示数量。（用来限制数据点的展示数量）

TooltipLayer.layout.perspectiveMinScale​

  • number

地球球面点图层的数据点的透视效果最小缩放倍数。（最远处）

TooltipLayer.layout.perspectiveMaxScale​

  • number

地球球面点图层的数据点的透视效果最大缩放倍数。（最近处）

TooltipLayer.selectMultiple​

  • boolean

地球球面点图层的数据点是否允许同时多个选中。

配置​

backgroundColor​

  • 类型 string

场景的背景色。

backgroundImage​

  • 类型 string

场景的背景图。

地球​

globe​

地球球体配置。

globe.image​

提示

地球球体可用表面纹理图片进行展示，或者使用球体模型展示。

  • 类型 string

v0.1.0+

地球球体表面的纹理图片。

地球阴影​

globe.shadowImage​

地球球体阴影图片配置。

globe.shadowImage.assetUrl​

  • 类型 string

地球球体阴影图片的资源路径。

globe.shadowImage.scale​

  • 类型 number

地球球体阴影图片的缩放比例。

地球模型​

globe.model​

提示

地球球体可用表面纹理图片进行展示，或者使用球体模型展示。

地球球体模型配置。

globe.model.assetUrl​

  • 类型 string

地球球体模型的资源路径（glTF 模型）。

globe.model.material.color​

  • 类型 string

地球球体模型的材质颜色。

globe.model.material.emissive​

  • 类型 string

地球球体模型的材质自发光颜色（不受光照影响）。

地球点图层​

相机​

camera​

相机配置。

camera.position.z​

  • 类型 number

v0.1.0+

相机的距离，通过调整该值，可以调整地球的默认大小。

提示

在多次渲染时，如果想保证后续渲染不改变用户视角，需要在渲染配置项中传递当前的相机参数。参考以下代码：

globeIns.render({});
// 第 n 次渲染
globeIns.render({ camera: { position: { z: globeIns.getCamera().position.z } } });

控制器​

controls​

视角控制器配置。