Webclient-vue 脚手架,用于 Cesium、Mapboxgl 的扩展组件开发。
├─.storybook -- storybook配置文件
├─cesium -- Cesium组件库的代码结构
│ ├─docs -- Cesium组件库的Vuepress文档说明
│ │ ├─.vuepress -- Cesium组件库的配置文件
│ │ ├─api -- Cesium组件库的API详细说明文档
│ │ ├─guide -- Cesium组件库的介绍、安装部署及模块说明
│ │ └─version -- Cesium组件库的版本更新说明
│ ├─node_modules
│ ├─src -- Cesium组件库源代码
│ ├─assets
│ │ └─image
│ └─components -- Cesium组件
│ ├─analysis
│ ├─uI
│ │ └─controls
│ │ └─output-image
│ └─util
├─mapboxgl -- Mapboxgl组件库的代码结构
│ ├─docs -- Mapboxgl组件库的Vuepress文档说明
│ │ ├─.vuepress -- Mapboxgl组件库的配置文件
│ │ ├─api -- Mapboxgl组件库的API详细说明文档
│ │ ├─guide -- Mapboxgl组件库的介绍、安装部署及模块说明
│ │ └─version -- Mapboxgl组件库的版本更新说明
│ ├─node_modules
│ ├─src -- Mapboxgl组件库源代码
│ ├─assets
│ │ └─image
│ └─components -- Mapboxgl组件
│ └─controls
├─node_modules
├─stories -- storybook示例源代码
├─assets -- storybook示例资源
├─data -- storybook示例数据
├─mapgis2d -- Mapboxgl(二维)组件示例
├─mapgis3d -- Cesium(三维)组件示例
├─public
│ └─cesium -- Cesium js库
└─style
- 文件夹名命名规则:以全部小写或者短横线连接式命名,示例:
analysis
或者scene-projector
- js 文件名命名规则:对外以大驼峰式命名,示例:
LayerType.js
;对内以小驼峰式命名,示例:cityCenter.js
- vue 文件名命名规则:以大驼峰式命名,示例:
AspectSlope.vue
- vue 组件名(组件内部
name
字段)命名规则:二维组件以mapgis-
开头,示例:二维绘制组件的 name 为mapgis-draw
;三维组件以mapgis-3d-
开头,示例:三维绘制组件的 name 为mapgis-3d-draw
三维组件,详见create-component-3d.md
二维组件,详见create-component-2d.md
如果您需修改源码,可自行编译打包生成 Cesium、Mapboxgl 的地图组件库、API 文档。
首先进入对应的目录下
-
进入目录
cd /path/to/cesium # 三维 # 或者 cd /path/to/mapboxgl # 二维
-
安装依赖(如果新建组件中没有新增的依赖,这里依赖只需在第一次开发的时候,安装)
npm install # 或者 yarn
-
地图组件编译(组件新建完后,需要编译)
npm run build #编译 将源代码编译成Vue的地图组件 # 或者 yarn build
-
API 文档生成
npm run docs:serve #服务实时预览-生成API参考文档 # 或者 yarn docs:serve npm run docs:build #编译打包预览-生成API参考文档 # 或者 yarn docs:build
- 安装 storybook 依赖
cd /path/to/WebClient-Vue-Frame yarn
- 新增 storybook 示例 详见create_storybook.md
首先进入对应的目录下,假设用户存在 2 个工程:1.WebClient-Vue-Frame 2.项目工程 MyProject
-
进入对应的目录
cd /path/to/WebClient-Vue-Frame/cesium # 三维 # 或者 cd /path/to/WebClient-Vue-Frame/mapboxgl # 二维
-
执行本地链接操作
npm link # 或者 yarn link
-
进入自己的项目工程
cd /path/to/MyProject
-
指定连接的 WebClient-Vue-Frame 库
npm link @mapgis/webclient-vue-cesium-example # 三维 # 或者 npm link @mapgis/webclient-vue-mapboxgl-example # 二维
如何在一张图微件库中使用新建组件,并加到一张图中?详见add-component-to-mapgis-pan-spatial-map.md
-
yarn 过程中出现lru-cache@8.0.4: The engine "node" is incompatible with this module. Expected version...
yarn config set ignore-engines true