mdt-lib

添加依赖

yarn add @analytics/google-analytics@^0.5.2 @analytics/perfumejs@^0.2.0 @i18n-chain/react@^0.8.0 @loadable/component@^5.12.0 @mapbox/polylabel@^1.0.2 @mapbox/tiny-sdf@^1.2.5 @mdt/design@1.15.2 @rollup/plugin-babel@^5.3.0 @sentry/browser@5.19.0 @tanem/react-nprogress@^3.0.37 @turf/turf@^6.3.0 @types/d3-interpolate@^2.0.0 @types/eventemitter2@^4.1.0 @types/exceljs@^1.3.0 @types/html2canvas@0.0.35 @types/localforage@0.0.34 @types/stats.js@^0.17.0 @types/xlsx@0.0.36 @videojs/http-streaming@^2.5.0 ali-oss@^6.9.1 ali-react-table-fork@^0.0.9 analytics@^0.7.0 anymatch@^3.1.2 awesome-phonenumber-fork@^1.0.4 axios@^0.19.2 blob@^0.1.0 bootstrap@^3 brace-fork@^1.0.1 braft-convert@^2.1.4 braft-editor@2.3.9 braft-utils@^3.0.12 buffer@^5.6.0 chroma-js@^2.1.0 classnames@^2.2.6 co@^4.6.0 component-emitter@^1.3.0 conventional-gitlab-releaser-fork@^4.0.5 coordtransform@^2.1.2 copy-to-clipboard@^3.3.1 core-js@^3.8.1 core-util-is@^1.0.2 crypto-js@^4.1.1 dayjs@^1.10.5 dom-to-image@^2.6.0 draft-js@^0.10.5 draft-js-export-html@^1.4.1 draft-js-import-html@^1.4.1 draftjs-utils@^0.9.4 earcut@^2.2.2 echarts@^5.0.2 echarts-wordcloud@^2.0.0 entity-convert@^1.0.0 eventemitter2@^6.4.3 exceljs@^4.1.1 faker@^5.1.0 file-saver@^2.0.5 filesaver.js-npm@^1.0.1 gcoord@^0.2.3 geobuf@^3.0.1 html2canvas@^1.0.0-rc.5 ignore-loader@^0.1.2 immutable@~3.7.4 is-email@^1.0.0 is-url@^1.2.4 is-uuid@^1.0.2 jquery@^3.5.1 js-beautify@^1.11.0 js-cookie@^3.0.0-rc.0 jszip@^3.5.0 konva@7.2.0 localforage@^1.9.0 lodash@^4.17.15 lz-string@^1.4.4 maptalks@1.0.0-alpha.15 maptalks.three@^0.16.0 mb-sketch-ruler@^1.2.0-dev.11 minio@^7.0.19 mobx@^5.15.4 mobx-react@^6.2.2 omit.js@^1.0.2 perfect-scrollbar@^1.5.0 perfume.js@^5.3.0 progress-bar-webpack-plugin@^2.1.0 qs@^6.10.1 rbush@^3.0.1 rc-menu@^8.3.1 react@^17.0.2 react-ace-fork@^1.0.0 react-beautiful-dnd@^13.0.0 react-color@^2.18.1 react-contextmenu@^2.14.0 react-copy-to-clipboard@^5.0.2 react-countup@^4.3.3 react-dnd-html5-backend@^11.1.3 react-dom@^17.0.2 react-draggable@^4.4.2 react-dropzone@^11.0.1 react-id-swiper@^4.0.0 react-is@^17.0.1 react-lazyload@^3.0.0 react-markdown@^5.0.2 react-pdf@^4.1.0 react-progressive-bg-image@^3.0.0 react-resizable@^1.10.1 react-rnd@^10.1.10 react-router-dom@^5.2.0 react-sticky@^6.0.3 react-syntax-highlighter@^15.3.0 react-transition-group@^4.4.1 react-use@^14.3.0 react-virtualized@^9.21.2 screenfull@^5.1.0 simple-statistics@^7.1.0 simpleheat@^0.4.0 socket.io-client@^2.3.0 spark-md5@^3.0.1 sql-formatter-fork@^1.0.3 stats.js@^0.17.0 superstruct@^0.10.12 swiper@^5.4.5 tableexport@^5.2.0 three@0.126.1 three-text2d@^0.6.0 tree-model@^1.0.7 troika-three-text@^0.40.0 turf-multilinestring@^1.0.2 turf-multipolygon@^1.0.1 turf-point@^2.0.1 turf-polygon@^1.0.3 u2f-api@^1.1.1 url-join@^4.0.1 uuid@^8.2.0 video.js@^7.10.2 wkx@^0.5.0 xlsx@^0.16.6

使用

npm install mdt-lib

yarn add mdt-lib

import MapEditView from 'mdt-lib/MapEditView'; // 地图组件，使用到地图时引入
import ChartPreview from 'mdt-lib/ChartPreview'; // 图表组件，使用到图表时引入
import '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'}}// 地图大小等设置
        />

注意

• 安装依赖时，如果遇到经常失败可替换.npmrc文件(部分需公司内网)

  registry="https://nexus3.idatatlas.com/repository/npm-mdt/"
  sass_binary_site="https://npm.taobao.org/mirrors/node-sass/"
  phantomjs_cdnurl="http://cnpmjs.org/downloads"
  sentrycli_cdnurl="https://npm.taobao.org/mirrors/sentry-cli"
  # electron_mirror="https://npm.taobao.org/mirrors/electron/"
  # sqlite3_binary_host_mirror="https://foxgis.oss-cn-shanghai.aliyuncs.com/"
  # profiler_binary_host_mirror="https://npm.taobao.org/mirrors/node-inspector/"
  # chromedriver_cdnurl="https://cdn.npm.taobao.org/dist/chromedriver"
  

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

window.__DATAMAP_CFS__ 参数说明

export interface DatlasConfig {
  base: {
    host: string;
    force_update: boolean; // 是否开启强制刷新
    gtm: boolean;
    recommend_url: string;
    ga_track_id: string;
    lcp_url: string;
    language: string; // 默认语言
    title: string; //网页标题
    ico: string; // 网页icon
    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;
    sentry_dsn?: string;
  };
  // file_server?: {
  //   private: boolean; //是否私有化，私有化则走文件服务器上传
  //   oss_bucket: string;
  //   oss_bucket_private: string;
  //   privateRead: boolean; //是否私有读，默认是false
  // };
  // websocket
  ws: {
    host: string;
  };
  statics: {
    host: string;
  };
  admin: {
    host: string;
  };
  old: {
    host: string;
  };
  // 外链分享
  share: {
    host: string;
  };
  // 数据市场
  store: {
    host: string;
  };
  map: {
    settings: object;
  };
  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; // 其他属性
  };
}