# chartDp_city

## 智慧城市代码库

## 命令说明
```
//将npm源设为淘宝镜像源
npm config set registry https://registry.npm.taobao.org

//预编译第三方库及自定义公共库(第一次使用或增加第三库后，需要运行一下)
npm run dll

//运行开发测试环境
npm run dev

//发布图表，生成图表存放在/dist目录下
npm run dist

//发布图表(不包含第三方库)，生成图表存放在/dist目录下
npm run dist-noThird
```

## 项目结构说明
项目结构如下图
* src:项目源文件目录，主要存放项目文件。
    * 其中chart目录存放页面文件
    	- city //白模城市
    	- city2 //精模城市
    	- cityCustom //自定义城市
* dev/static:不适合打包的大文件。使用dist命令发布图表后，需要将static中的静态文件拷贝到使用图表项目的对应位置（将GisFrame拷贝到根目录的/dev/static/下）
* test:测试目录。图表开发环境下的测试页面，用于测试图表渲染，加载数据等

**注 npm run dist 和 npm run dist-noThird都是发布图表。 后者不会将第三方库打包到每个图表中，推荐使用后者**


## 其他规则
* 白模地图命名：ChartCityMap+CD。ChartCityMap为固定前缀，CD（成都）为城市名称首字母大写
* 精模地图命名：ChartCityMap+CD+2
* 图表暴露类名：和文件夹名字保持一致
* 现有地图
	- 白模：成都、贵阳、广州、南京、上海、深圳、天津、武汉
	- 精模：上海


## 新增城市

以成都(白模)为例
1. 在 /src/chart/city/ 下复制一个其他城市改名为 ChartCityMapCD，例如贵阳
2. 将 /ChartCityMapCD/data/ 下的的json数据替换为成都的数据
3. 在 /ChartCityMapCD/chengdu.js 中修改相应数据
	* coordinateRange 城市的范围（通过 **水经注** 查询）
	* resources 加载的模型资源（模型按 区/类型 进行了切片，可以部分加载）
	* view 地图的初始状态（中心点、旋转角度、缩放倍数）
4. 下载模型文件（通过 **水经注** 下载）
	* 将下载的模型文件放在 /dev/static/GisFrame/chengdu/ 下
5. 创建测试页面
	* 在 /test/city/ 下复制一个其他城市改名为 ChartCityMapCD，例如贵阳
	* 将文件中的相关引用改为新图表的引用
6. 测试新城市
	* npm run dev
	* 访问 http://localhost:3005/ChartCityMapCD/index.html
7. 发布图表：npm run dist-noThird


## 项目目录
```
.
├── README.md
├── config //webpack 配置文件
├── dev //开发测试目录
├── dist //最终发布目录
├── dll //预编译文件目录
│   ├── dll.js
│   └── manifest.json
├── package-lock.json
├── package.json
├── src  //源文件目录
│   ├── chart
│   │	├── city //白模
│   │	├── city2 //精模
│   │	├── cityCustom //自定义城市（可以上传城市模型）
│   ├── common
│   ├── utils //工具类
└── test //测试文件目录
```