添加依赖
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;
encode_apis?: {
match: string;
encode_body_keys?: string[];
encode_query_keys?: string[];
unencode_body_keys?: string[];
unencode_query_keys?: string[];
}[];
encode_apis_headers?: ObjectInterface;
sentry_dsn?: string;
};
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;
sso?: {
out: boolean;
params?: string[] | null;
api_params?: string[] | null;
cookie?: { cookie_key: string; body_key: string }[] | null;
api_method: string;
api: string;
logout_ref: string;
error_page?: string;
};
header_logo_url: string;
logo_url: string;
bg_url: string;
bg_type: string;
default_by: string;
login_bys: string[] | null;
personalized_success_jump_url: string;
page_style: object | null;
page_extra: object | null;
};
}