
### 使用说明
```shell
npm install @datlas/mdt-lib
```

```shell
yarn add @datlas/mdt-lib
```

```react
import MapEditView from '@datlas/mdt-lib/MapEditView'; // 地图组件，使用到地图时引入
import ChartPreview from '@datlas/mdt-lib/ChartPreview'; // 图表组件，使用到图表时引入
import '@datlas/mdt-lib/ChartPreview.css'; // 地图 ｜ 图表  所有的样式代码。使用必须引入

        <MapEditView
            id="9bb6331a-a762-4a39-b3ce-34d055c6fef6" // 地图在编辑页面时 地址栏id
            token={'965f3e3d-8b35-4487-aa01-cf8b6dc61f66'}// 地图拥有者的 user_token
            type="work" // work 为工作台状态
            appid={'88'} // 地图拥有者所对应的app的id
            style={{ width: '100vw', height: '100vh'}} // 地图大小等设置
        />
        <ChartPreview
            chartUuid="17be665f-874e-4c78-b69c-1313d6b55c25"// 图表在编辑页面 地址栏id
            token={'965f3e3d-8b35-4487-aa01-cf8b6dc61f66'}// 图表拥有者的 user_token
            style={{width: '100px', height: '100px'}}// 地图大小等设置
        />
```


- 需要在index.html的html标签上添加 data-theme="dark"（目前代表组件的主题，未来可能优化）



### window.\_\_DATAMAP_CFS__ 参数说明

```typescript
export interface DatlasConfig {
  base: {
    host: string;
    force_update: boolean; // 是否开启强制刷新
    gtm: boolean;
    recommend_url: string;
    ga_track_id: string;
    language: string; // 默认语言
    title: string; //网页标题
    ico: string; // 网页icon
    chart_tool_hide: boolean; //是否隐藏图表右上角工具栏
    encode_apis?: {
      match: string;
      encode_body_keys?: string[];
      encode_query_keys?: string[];
      unencode_body_keys?: string[];
      unencode_query_keys?: string[];
    }[]; //encode_keys不传就encode全部
    encode_apis_headers?: ObjectInterface;
    change_api_method?: { from: string[]; to: string } | true; // true 或 {from: ['PUT','DELETE','PATCH'], to: 'POST'}
    sentry_dsn?: string;
  };
  // matomo
  matomo?: {
    host: string;
  };
  // websocket
  ws: {
    host: string;
  };
  statics: {
    host: string;
  };
  admin: {
    host: string;
  };
  old: {
    host: string;
  };
  // 外链分享
  share: {
    host: string;
  };
  // 数据市场
  store: {
    host: string;
  };
  //map-editor
  mapEditor: {
    host: string;
  };
  map: {
    settings?: object;
    // settings?: {
    //   mapStyle?: string; // 底图默认
    //   toolTheme?: string; // 工具主题默认
    // };
  };
  login: {
    privacy: boolean; // 是否显示协议
    wechat_appid: string;
    wechat_redirect: string;
    ding_appid: string;
    ding_redirect: string;
    u2f_appid: string;
    register: boolean; // 是否显示注册
    oa_api: string; // oa登陆 api, 密码登陆使用oa登录地址
    sso?: {
      out: boolean; // 是否走SSO认证
      params?: string[] | null; // ["token", 'impli'] url query里字段, 字符串数组
      api_params?: string[] | null; // api 的请求参数 ticket=xxx
      cookie?: { cookie_key: string; body_key: string }[] | null;
      api_method: string; // post | get(default)
      api: string; //免密登陆接口地址 // https://dev.idatatlas.com/auth/sso/login
      logout_ref: string; // 退出登陆返回地址
      error_page?: string; // 接口解析失败的回调地址
    };
    header_logo_url: string; // header logo
    logo_url: string; // 设置logo
    bg_url: string; // 设置背景
    bg_type: string; // 背景类型(暂支持iamge, 后续可支持video)
    default_by: string; // 设置默认登录项
    login_bys: string[] | null; // 设置登陆项 'byphone', 'bywechat', 'byu2f', 'byname', 'bydingtalk'
    personalized_success_jump_url: string; // 设置登录成功后跳转url https://xxx.com/?dmcfrom=DM_FROM_PLACEHOLD&dmctk=DM_TOKEN_PLACEHOLD
    page_style: object | null; // 自定义样式
    page_extra: object | null; // 其他属性
    footer?: {
      content?: string;
    };
  };
}

```



### 地图props

| props            | 类型                                          | 默认值          | 描述               |
| ---------------- | --------------------------------------------- | --------------- | ------------------ |
| id               | string                                        | ‘000’           | 查找/接口等uuid    |
| type             | string                                        | 'work'\|'empty' | 地图类型           |
| token            | string                                        | ''              | 接口权限token      |
| appid            | string                                        | ''              | user所在app        |
| style            | CSSProperties                                 | -               | 组件外层包裹样式   |
| cardCustomerMenu | ( { cardId } ) => React.ReactNode             | -               | 自定义card-menu    |
| customerIcons    | {   showIcon?: string;   hideIcon?: string; } | -               | 部分icon自定义设置 |

