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"
            }
        }
    ]
}