
### 使用说明
```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
const matchs = new RegExp(/(\d+)$/).exec(window.location.host.split('.')[0]);
let env;
if (matchs) {
  env = matchs[1];
}
window.__DATAMAP_CFS__ = {
  deployPublicPath: '/dataapp/',
  deployCdnPath: !env || env === '1' ? `https://statics-cdn${env || ''}.maicedata.com` : '',
  deployEnableHashRouter: false,
  publicFileHost: 'https://public-cdn.maicedata.com/',
  base: {
    host: 'datlas.maicedata.com/api',
    force_update: false,
    gtm: false,
    recommend_url: 'resource.idatatlas.com/recommend',
    // ga_track_id: 'UA-152890991-6',
    ga_track_id: '',
    language: '',
    title: '', //网页标题
    ico: '', // 网页icon
  },
  enableBff: false, //是否启用bff
  enableWxSdk: true,
  wxShareTitle: '欢迎使用脉策Datlas', // 微信分享标题
  wxShareDesc: '快速发布你的“地图轻应用”', // 微信分享描述
  wxShareLink: '', // 微信分享链接
  wxShareImgUrl: 'https://statics-cdn.maicedata.com/datlas-statics/images/logo.svg', // 微信分享图标
  sentry: {
    enable: true,
    env: 'prod',
    dsn: 'https://078e38a804a346268118297d53c3bdfa@sentry2.idatatlas.com/14',
  },
  // file_server: {
  //   private: false,
  //   // oss_bucket: 'mdt-staging-public.oss-cn-hangzhou.aliyuncs.com',
  //   oss_bucket: 'minio.idatatlas.com/mdt-staging-public/',
  //   oss_bucket_private: 'mdt-staging.oss-cn-hangzhou.aliyuncs.com',
  //   privateRead: false,
  // },
  ws: { host: 'socketio.maicedata.com' },
  statics: { host: window.location.host + '/datlas-statics' },
  admin: { host: 'https://admin.maicedata.com' },
  old: { host: 'https://www.maicedata.com/' },
  share: { host: 'https://datlas.maicedata.com/' },
  storeOld: { host: 'https://datamarket.maicedata.com/' },
  store: { host: 'https://datlas.maicedata.com/datamarket/' },
  factory: { host: 'https://datlas.maicedata.com/datafactory/' },
  collector: { host: 'https://collectoradmin.maicedata.com' },
  workFlow: { host: 'https://datlas.maicedata.com/workflow' },
  organizationManagement: { host: 'https://datlas.maicedata.com/iframe-dataapp/orgadmin/' },
  ResourceShare: { host: 'https://datlas.maicedata.com/iframe-dataapp/share/' },
  mapEditor: { host: 'https://datlas.maicedata.com/dataeditor/' },
  matomo: {
    host: 'https://matomo.idatatlas.com/js/container_3dk0d2p3.js',
  },
  map: { settings: {} },
  myData: {
    host: 'https://datlas.maicedata.com/iframe-dataapp/mydata',
  },
  helpCenter: {
    host: window.location.origin + '/statics/help/datlas/#/zh-cn/quick_start/datlas_introduction',
  },
  login: {
    privacy: true,
    wechat_appid: 'wx737a39a6ecfb066a',
    wechat_redirect: '',
    ding_appid: 'dingoah6wnj05gogocpavz',
    ding_redirect: '',
    u2f_appid: '',
    register: false,
    oa_api: '',
    sso: {
      out: false,
      params: null, // ticket、code，url query里字段
      api_params: null, // api请求参数 ['ticket'] ticket=xxx
      cookie: null, // [{ cookie_key: 'AuthUser_AuthToken'; body_key: 'auth_token' },{cookie_key: 'AuthUser_LoginId'; body_key: 'login_id'}];
      api_method: '', // post | get(default)
      api: '', //免密登陆接口地址 // https://dev.idatatlas.com/auth/sso/login
      logout_ref: 'https://sso.maicedata.com', // 退出登陆返回地址
      error_page: '', // 接口解析失败的回调地址
    },
    header_logo_url: '',
    logo_url: '',
    bg_url: '',
    bg_type: '',
    default_by: '',
    login_bys: null,
    personalized_success_jump_url: '',
    page_style: null,
    page_extra: null,
  },
};

```



### 地图props

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

