Components

在 dom 目录下，我们提供了几个 React 组件和 Hooks，它们和 leaflet layer、Wik model、ess 业务结合紧密，目的是给予用户快速构建 UI 的能力。

要查阅这些组件、Hooks 的具体 API，你可前往 API 页面并定位至相关模块，此文档主要对它们的组合使用加以说明。

• Scene
• Warehouse
• ViewSet
• View
• useEvented
• useLeafletEvented
• useSelection
• useMultipleSelection

Scene

Scene 为你创建了一个 Map 以及用于 UI 呈现的 element，并将由外界输入的 warehouse 与之关联起来，从而让用户只关心 Warehouse 的 API 即可。

除了 Scene 组件本身，它还额外提供了以下组件：

• Layout
• SelectShell
• MultipleSelectShell

Layout 用于对视窗快速布局，默认地图主视区占据剩余空间。

SelectShell 用于响应元素的点击选择，当用户选择了一个元素的时候，其包裹的元素会被渲染，并且通过 model 属性注入当前选择的元素。

const Detail = (props: LayerSelectProps) => {
  return <div>you've selected {props.model.layerId}</div>;
};

const Main = () => {
  return (
    <Scene.SelectShell>
      <Detail />
    </Scene.SelectShell>
  );
};

MultipleSelectShell 用于响应多选，当用户框选或者连续点选了一些元素，其包裹的组件会被渲染，用法与 SelectShell 类似。

Warehouse

Warehouse 为用户提供一个上下文 __warehouse_context__，它作为 ViewSet 组件的父组件。它并不为用户创建 warehouse 实例，因此 warehouse 需要用户提供，默认 warehouse 从 Scene 组件传递下来。Warehouse 组件的一个必要属性是 modelViewMapping，它定义了模型到视图的映射，为视图创建提供策略。

const modelViewMapping = {
  bot: (m: any, w: IWarehouse) => w.injector.$new(Bot2),
  dot: (m: any, w: IWarehouse) => new Dot([m.py, m.px]),
};

ViewSet

为了查询效率和更好的抽象以及 leaflet 意义上的图层管理， 图形库对其所管理的元素都进行了分类和分层，其载体是 LayerList。ViewSet 组件就用于管理这些 LayerList，包括创建、与业务模型列表绑定。ViewSet 帮助你完成了元素的创建、添加和移除，至于元素自身的变化，需要“模型驱动”机制。

View

View 不会向用户开放。ViewSet 内部会用到它，这里不作说明。

Hooks

useEvented 适用于扩展了 EventEmitter 的子类，用于响应一个或者多个事件，响应的逻辑是刷新组件；

与 useEvented 类似，只不过 useLeafletEvented 适用于 leaflet 的 L.Evented。

useSelection 收集需要响应点击选择的组件，以在事件发生时刷新组件；

与 useSelection 类似，useMultipleSelection 用于响应多选事件，并返回选中的元素。

注意，useSelection 和 useMultipleSelection 并不能独立使用，你需要将 SelectionContext 挂载到 React 树上。