# 快速上手

# 技术准备

由于本项目技术栈基于 typescript (opens new window)、vue (opens new window)、vue-cli (opens new window) 、axios (opens new window) 和 ant-design-vue (opens new window)，因此需提前了解和学习这些相关知识。

# 开发环境准备

安装 vsCode
安装nvm (opens new window)(推荐)
安装node.js (opens new window)，并且 node 版本为 14.x.x
安装 yarn:npm install -g yarn

# 目录结构

下面是整个项目的目录结构。

|── public
|── src
   |── api                 # api
   |── assets              # 资源文件
   |── components          # 框架应用相关组件
   |── config              # 框架应用配置
   |── core                # 框架应用内核
   |── layouts             # 布局
   |── locales             # 语言
   |── qiankun             # qiankun
   |── router              # 路由
   |── shared              # qiankun镜像
   |── store               # store
   |── theme               # 样式文件
   |── utils               # 工具类
   |── views               # 视图组件
   |── App.vue             # vue页面入口文件
   |── global.less         # 全局样式文件
   |── main.js             # vue应用入口文件
   |── permission.js       # 引用许可文件
|── .browserslistrc        # 浏览器兼容性配置文件
|── .editorconfig          # editor配置
|── .env                   # 全局默认配置文件
|── .env.backend           # 生产环境的配置文件
|── .env.development       # 开发环境的配置文件
|── .env.preview           # 预览环境的配置文件
|── .eslintignore          # ESlint忽略路径
|── .eslintrc.js           # ESlint配置
|── .eslintrc.json         # ESlint配置
|── .gitattributes         # GIT属性配置
|── .gitignore             # GIT忽略路径
|── .prettierrc            # 代码格式化配置
|── .travis.yml            # YAML格式的配置文件
|── babel.config.js        # Babel的配置文件
|── jest.config.js         # Jest的配置文件
|── jsconfig.json          # js配置
|── package.json           # npm脚本和依赖项
|── tsconfig.json          # ts配置
|── vue.config.js          # vue打包管理的配置文件
|── yarn.lock

# npm 引入

# 环境要求

设置 npm 仓库为公网 npm。

$ npm config set registry http://registry.npmmirror.com
$ yarn config set registry http://registry.npmmirror.com

# 环境准备

您可以在司马云站点下载全空间一张图安装包MapGIS-Pan-Spatial-Map (opens new window)。进入安装包 bin 目录下，右键 startup.bat，以管理员身份运行，启动 MapGIS-Pan-Spatial-Map 应用。应用程序启动后，在浏览器里输入http://localhost:8015 (opens new window)，您会看到一个应用程序的登录页面。默认用户名为 admin，密码为 sa.mapgis。

提示

linux-x86_64 和 linux-arm64 的安装包，请运行 startup.sh 来启动应用程序。

另外如需包含高级微件功能的安装包，以及高级微件包和源码，请通过商务途径获取。

# 代码准备

你可以在 Gitee 上下拉MapGIS-Pan-Spatial-Map (opens new window)代码。或者在 Github 上下拉MapGIS-Pan-Spatial-Map (opens new window)代码。

提示

请拉取当前最新发布版本对应的分支，比如当前最新发布版本为 10.6.8.10，那么对应代码分支为 10.6.8.10。

# 安装依赖

进入 MapGIS-Pan-Spatial-Map 目录

$ yarn

如果网络状况不佳，可以使用 cnpm (opens new window) 进行加速，并使用 cnpm 代替 yarn。或者设置 yarn 的 npm 加载源，如 yarn config set registry https://registry.npm.taobao.org

# 编译工程

$ yarn serve

启动完成后会自动打开浏览器访问 http://localhost:8000 (opens new window)，你看到下面的页面就代表成功了。

接下来你可以修改代码进行业务开发了，本项目内建了典型业务模板、常用业务组件、模拟数据等各种实用的功能来辅助开发，你可以继续阅读和探索左侧的其它文档。

提示

在全空间一张图中如何使用 WebClient JS 相关包？比如@mapgis/webclient-cesium-plugin、@mapgis/webclient-common 等

可以。

一般 node_modules 目录下已有的包，都可以直接使用。但需要注意的是，全空间一张图中是以 es6 的方式调用 WebClient JS 相关包里的方法，具体如何使用请参考WebClient JS 相关包 API (opens new window)。

MapGIS-Pan-Spatial-Map 项目中的 package.json 中已引入了@mapgis/web-app-framework，而@mapgis/web-app-framework 的 package.json 中已引入了 Webclient Vue 组件包，比如@mapgis/webclient-vue-cesium、@mapgis/webclient-vue-mapboxgl、@mapgis/webclient-vue-ui 等，而 Webclient Vue 组件包的 package.json 中会引入 Webclient JS 相关包，因此，在 MapGIS-Pan-Spatial-Map 安装依赖时，会下载 Webclient JS 相关包。

全空间一张图相关包，比如@mapgis/mapgis-pan-spatial-map-theme、@mapgis/mapgis-pan-spatial-map-widgets、@mapgis/mapgis-pan-spatial-map-widgets-pro 以及相关脚手架，比如@mapgis/mapgis-pan-spatial-map-theme-frame、@mapgis/mapgis-pan-spatial-map-widgets-frame 中都会引用@mapgis/web-app-framework，因此在这些包中，也都可以直接使用 Webclient JS 相关包。

← 开始使用开发工具 →