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 //测试文件目录