0.5.4 • Published 2 years ago
cesc-3d-components v0.5.4
cesc-3d-components
一、说明
这是一个基于Three.js实现的Vue三维组件库。
目前支持的设施设备类型包括:
- 窨井
- 雨水口
- 排水管道
二、开发
第1步:安装依赖
npm install
第2步:预览效果
npm run serve
第3步:修改代码
- 源码位置:packages目录下
- 示例位置:examples目录下
第4步:打包
npm run build-lib
第5步:更新版本号(通过standard-version实现自动版本号管理)
npm run release
注意:目前是半自动更新版本号的方式,上面执行npm run release只是自动生成版本号,随后还需要手动commit,并打上新版本号的tag。
第6步:手动commit
git commit -m "chore: 版本号更新为x.y.z"
git push
第7步:发布新版本到npm
npm publish
三、使用
第1步:安装组件库
npm install cesc-3d-components
第2步:在入口文件中注册组件
import cesc3DComponents from 'cesc-3d-components'
Vue.use(cesc3DComponents)
第3步:在业务代码中使用组件,并传入数据和配置参数
<template>
<ThreeDimensionFacility
width="800px"
height="600px"
:data="someData"
:sceneConfig="sceneConfig"
:manholeConfig="manholeConfig"
:pipelineConfig="pipelineConfig"
:rainWaterDrainCoverConfig="rainWaterDrainCoverConfig"
/>
</template>
<script>
export default {
name: 'demo',
data() {
return {
someData: [
{
"layerId": "窨井",
"tableName": "PS_WELL_ZY",
"features": [] // 数据
},
{
"layerId": "雨水口",
"tableName": "PS_COMB_ZY",
"features": [] // 数据
},
{
"layerId": "排水管道",
"tableName": "PS_PIPE_ZY",
"features": [] // 数据
},
],
// 场景配置
sceneConfig: {
// 相机位置
cameraPosition: {
x: 30,
y: 50,
z: 30
},
// 相机注视的焦点
cameraLookAt: {
x: 0,
y: 0,
z: 0
},
// 相机透视配置
cameraPerspective: {
fov: 50,
near: 1,
far: 100
},
// 是否显示坐标系
axesHelper: {
open: false,
range: 100, // 坐标系长度
}
},
// 排水管道的配置
pipelineConfig: {
rainWaterPipeTubeWallColor: 0x36FE3E, // 雨水管道的管壁颜色
dirtyWaterPipeTubeWallColor: 0xFF7F00, // 污水管道的管壁颜色
mixWaterPipeTubeWallColor: 0x041DF9, // 合流管道的管壁颜色
opacity: 0.5, // 排水管道透明度
transparent: true, // 是否打开排水管道透明度
},
// 窨井参数
manholeConfig: {
coverDiameter: 800, // 井盖直径,单位:mm
coverThickness: 100, // 井盖厚度,单位:mm
connectHeight: 500, // 井盖与井连接的圆台的高度,单位:mm
bottomDiameter: 1200, // 井底直径,单位:mm
},
// 雨水篦子的参数
rainWaterDrainCoverConfig: {
width: 900, // 雨水篦子的长度,单位:mm
height: 600, // 雨水篦子的宽度,单位:mm
depth: 50, // 雨水篦子的厚度,单位:mm
boxHeight: 800, // 箱体的厚度,单位:mm
}
}
},
methods: {
// 创建流动水面
createFlowWater() {
// 显示所有流动水面
this.$refs.ThreeDimensionFacility.setFlowWaterVisible(true)
// 参数配置 - 具体参数详见doc/classes/FlowWater.md -> createFlowWater方法参数
this.$refs.ThreeDimensionFacility.setFlowWaterConfig([
{
idKey: 'cuuid',
idValue: "1",
waterMaxHeight: 0.3, // 水面最大高度
visible: false,
}
])
},
}
}
</script>
四、其他说明
1. 数据格式要求
1.1 窨井
{
"layerId": "窨井",
"tableName": "PS_WELL_ZY",
"features": [
{
"x": 0,
"y": 0,
"fieldDetails": [
{
"value": "24.65",
"key": "地面高程"
},
{
"value": "雨水",
"key": "管类"
},
{
"value": "检查井",
"key": "窨井类别"
},
{
"value": "22",
"key": "井底高程"
}
]
}
]
}
1.2 雨水口
{
"layerId": "雨水口",
"tableName": "PS_COMB_ZY",
"features": [
{
"x": 12.76,
"y": 32.01,
"fieldDetails": [
{
"value": "28.94",
"key": "地面高程"
},
{
"value": "雨水",
"key": "管类"
},
{
"value": "检查井",
"key": "窨井类别"
},
{
"value": "25.64",
"key": "井底高程"
}
]
}
]
}
1.3 排水管道
{
"layerId": "排水管道",
"tableName": "PS_PIPE_ZY",
"features": [
{
"cuuid": "1",
"path": [
[
0,
0
],
[
6.63,
15.12
]
],
"startHeight": 22.44,
"endHeight": 26.04,
"facilityType": "排水管道",
"sort": "雨水",
"ds1": 600,
"ds2": 0,
"dsTest": "DS600",
"pipePositionDistance":3,//管线文字距离
"pipePositionInfo": {
"endHeightBottom":"终点管底高程:11.69",
"endTopElevationBottom": "终点管顶高程:12.29",
"startHeightTop": "起点管底高程:11.72",
"startTopElevationTop": "起点管顶高程:12.32"
}
}
]
}