APIs

Globe

new Globe()

• new Globe(dom, initOption)

• 参数

  名称	类型	是否可选	默认值	描述
  dom	string			DOM 容器的 CSS 选择器
  initOption	initOption	是		初始配置项

创建一个组件实例。

// 初始化一个组件实例
const globeIns = new Globe('#container');

备注

v0.1.0 之前：

const globeIns = new Globe('#container', { theme: 'dark', data: gData });

现在：

const globeIns = new Globe('#container', initOption?);
globeIns.render({ theme: 'dark', data: gData });

实例 API

render()

注意

• 第二次开始的后续调用均会与上一次渲染的配置项进行合并
• 每次的调用都会触发视图重新渲染并导致交互状态丢失

• render(renderOption)

• 参数

  名称	类型	是否可选	默认值	描述
  renderOption	renderOption			渲染配置项

v0.1.0+

渲染。

// 生成随机数据
const N = 30;
const gData = [...Array(N).keys()].map(() => ({
  lat: (Math.random() - 0.5) * 180,
  lng: (Math.random() - 0.5) * 360,
  name: Array.from(Array(2 + Math.floor(Math.random() * 4)), _ => 'Test').join('')
}));

// 支持多次渲染以更新数据
globeIns.render({ data: gData });
globeIns.render({ data: gData.slice(0,5) });
globeIns.render({ data: gData.slice(5) });

getDom()

• getDom(): HTMLElement

获取组件实例的 DOM 容器元素。

resize()

• resize()

宽高自适应。

destroy()

• destroy()

销毁组件实例，释放内存。

其它

getInnerGlobe().pointOfView()

• pointOfView(position, transitionMs?, animationOption?)

• 参数

  名称	类型	是否可选	默认值	描述
  position	object			目标位置
  position.lat	number			纬度
  position.lng	number			经度
  transitionMs	number	是		动画过渡的持续时间（ms）
  animationOption	object	是		动画配置
  animationOption.onStart	() => void	是		动画开始的回调
  animationOption.onComplete	() => void	是		动画结束的回调

将地球的中心位置更改为目标位置。

globeIns.on('globeReady', (...args) => {
  // 定位到杭州市
  globeIns.getInnerGlobe().pointOfView(
    {
      lat: 30.33,
      lng: 118.21
    },
    2e3
  );
});

Action

示例：

// 通过 API 选中 id 为 0 的点标记
globeIns.dispatchAction({ type: 'select:point', dataIds: [0] });

// 通过 API 取消选中 id 为 0 的点标记
globeIns.dispatchAction({ type: 'unselect', dataIds: [0] });

// 通过 API 取消选中所有点标记
globeIns.dispatchAction({ type: 'unselect' });

dispatchAction()

• dispatchAction(actionData)

• 参数

  名称	类型	是否可选	默认值	描述
  actionData	object			action 数据
  actionData.type	string			action 类型

分发 Action。

Action 类型

select:point

• 'select:point'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]			要选中的点标记的数据 id 数组

选中指定 id 的点标记。

unselect:point

• 'unselect:point'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要取消选中的点标记的数据 id 数组

取消选中指定 id 的点标记。（没有传 dataIds 参数时则取所有的点标记 id）

hide_label:point

• 'hide_label:point'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要隐藏的点标记的数据 id 数组

隐藏指定 id 的点标记的标签和线。（没有传 dataIds 参数时则取所有的点标记 id）

show_label:point

• 'show_label:point'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要显示的点标记的数据 id 数组

显示指定 id 的点标记的标签和线。（没有传 dataIds 参数时则取所有的点标记 id）

select:tooltip

• 'select:tooltip'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]			要选中的点标记的数据 id 数组

选中指定 id 的tooltip标记。

unselect:tooltip

• 'unselect:tooltip'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要取消选中的点标记的数据 id 数组

取消选中指定 id 的tooltip标记。（没有传 dataIds 参数时则取所有的点标记 id）

hide:tooltip

• 'hide:tooltip'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要隐藏的点标记的数据 id 数组

隐藏指定 id 的tooltip标记的面板元素和线。（没有传 dataIds 参数时则取所有的点标记 id）

show:tooltip

• 'show:tooltip'

• 参数

  名称	类型	是否可选	默认值	描述
  dataIds	string[]	是		要显示的点标记的数据 id 数组

显示指定 id 的tooltip标记的面板元素和线。（没有传 dataIds 参数时则取所有的点标记 id）

事件

示例：

function handler() {
  // TODO
}

// 绑定事件
globeIns.on('globeReady', handler);
// 取消绑定事件
globeIns.off('globeReady', handler);

on()

• on(eventName, handler)

绑定事件。

off()

• off(eventName, handler)

取消绑定事件。

事件类型

globeReady

注意

在 v0.1.0 以前的版本中触发条件为仅地球球体加载完成后。

• 'globeReady'

• 事件对象类型

  type Event = {
    type: 'globeReady';
    /** 用来判断是否初次渲染，第一次 render() 调用时为 false，后续均为 true */
    initialized: boolean; // v0.1.0+
  };

地球球体和所有图层数据已经加载完毕并可见。

click:point

• 'click:point'

• 事件对象类型

  type Event = {
    type: 'click:point';
    data: Option['data'][number];
    selected: boolean;
  };

点标记的点击事件。

selectchange:point

• 'selectchange:point'

• 事件对象类型

  type Event = {
    type: 'selectchange:point';
    selected: boolean;
    data: Option['data'][number];
    selectedPoints: Option['data'][number]['id'][];
  };

点标记的选中状态发生变化的事件。

click:tooltip

• 'click:tooltip'

• 事件对象类型

  type Event = {
    type: 'click:tooltip';
    data: Option['data'][number];
    selected: boolean;
  };

tooltip标记的点击事件。

selectchange:tooltip

• 'selectchange:tooltip'

• 事件对象类型

  type Event = {
    type: 'selectchange:tooltip';
    selected: boolean;
    data: Option['data'][number];
    selectedPoints: Option['data'][number]['id'][];
  };

tooltip标记的选中状态发生变化的事件。