BOX裁剪功能添加

liuyg

2021-06-28 9f1f8674c82dd35800cbd7c64142fa25a92f5f28

BOX裁剪功能添加

 config.json

@@ -276,6 +276,10 @@
      {
        "name": "平面裁剪",
        "uri": "widgets/clippingPlanes/Widget"
      },
      {
        "name": "BOX裁剪",
        "uri": "widgets/BOXTailoring/Widget"
      }
    ],
    "groups": [],

 widgets/BOXTailoring/Widget.html

New file
@@ -0,0 +1,57 @@
<div>
    <div id="cesiumContainer"></div>
    <div id='loadingbarBOXTailoring' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spBOXTailoringinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div id='toolbarBOXTailoring' class="param-container tool-bar">
        <div id="toolbarBOXTailoringIn">
            <select style="width: 180px;" id="clipModeBOXTailoring">
                <option value="clip_behind_all_plane">裁剪包围盒内</option>
                <option value="clip_behind_any_plane">裁剪包围盒外</option>
            </select>

        </div>
        <div class="param-item">
            <b>改变长度：</b>
            <div id="lengthBOXTailoring"></div>
        </div>
        <div class="param-item">
            <b>改变宽度：</b>
            <div id="widthBOXTailoring"></div>
        </div>
        <div class="param-item">
            <b>改变高度：</b>
            <div id="heightBOXTailoring"></div>
        </div>
        <div class="param-item">
            <b>进行旋转：</b>
            <div id="rotateBOXTailoring"></div>
        </div>
        <div class="param-item">
            <button type="button" id="beginBOXTailoringG" class="button black">设置盒子</button>
            <button type="button" id="customBOXTailoring" class="button black"  title="左键移动裁剪，右键结束">移 动</button>
            <button type="button" id="clearboxBOXTailoring" class="button black">清 除</button>
        </div>

    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
</div>

 widgets/BOXTailoring/Widget.js

New file
@@ -0,0 +1,379 @@
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-BOXTailoring',
            name: 'BOXTailoring',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("beginBOXTailoring", lang.hitch(this, this.beginBOXTailoring));
                topic.subscribe("closesBOXTailoring", lang.hitch(this, this.closesBOXTailoring));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closesBOXTailoring();
                })
                // 设置滑块，体验感
                that.defaultLayui();

                // $('#beginBOXTailoringG').click(() => {
                // that.beginBOXTailoring();
                // })


            },
            defaultLayui: function () {
                var that = this;
                layui.use(function () {
                    var slider = layui.slider //滑块
                    //滑块
                    var sliderInst1 = slider.render({
                        elem: '#lengthBOXTailoring'
                        // , input: true //输入框
                        , value: that.Nowlength
                        , disabled: true
                        , change: function (value) {
                            // console.log(value) //得到开始值
                        }
                    });
                    var sliderInst2 = slider.render({
                        elem: '#widthBOXTailoring'
                        // , input: true //输入框
                        , value: that.Nowwidth
                        , disabled: true
                        , change: function (value) {
                            // console.log(value) //得到开始值
                        }
                    });
                    var sliderInst3 = slider.render({
                        elem: '#heightBOXTailoring'
                        // , input: true //输入框
                        , value: that.Nowheight
                        , disabled: true
                        , change: function (value) {
                            // console.log(value) //得到开始值
                        }
                    });
                    var sliderInst4 = slider.render({
                        elem: '#rotateBOXTailoring'
                        // , input: true //输入框
                        , value: that.Nowrotate
                        , max: 360
                        , disabled: true
                        , change: function (value) {
                            // console.log(value) //得到开始值
                        }
                    });
                })
            },
            Nowlength: 5,
            Nowwidth: 5,
            Nowheight: 5,
            Nowrotate: 0,
            beginBOXTailoring: function (pro) {
                console.log(`${this.name}--kaishi`);
                var that = this;
                var promise = window.mySanweiShujuOpens[pro.id];
                // var promise = window.mySanweiShujuOpens;
                // console.log(pro.ZName);
                // console.log(promise);
                // return;

                var viewer = that.map;
                // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                //     url: 'https://dev.virtualearth.net',
                //     mapStyle: Cesium.BingMapsStyle.AERIAL,
                //     key: window.MYURL_CONFIG.BING_MAP_KEY
                // }));
                var scene = viewer.scene;
                var widget = viewer.cesiumWidget;
                $('#toolbarBOXTailoring').show();
                $('#loadingbarBOXTailoring').remove();
                // 场景添加S3M图层服务
                // that.promise = scene.open(window.MYURL_CONFIG.SCENE_BIMBUILDING);
                that.promise = promise;
                Cesium.when(that.promise, function (layers) {
                    // 精准定位
                    // scene.camera.setView({
                    //     destination: new Cesium.Cartesian3(-2180753.065987198, 4379023.266141494, 4092583.575045952),
                    //     orientation: {
                    //         heading: 4.0392222751147955,
                    //         pitch: 0.010279641987852584,
                    //         roll: 1.240962888005015e-11
                    //     }
                    // });

                    // 设置裁剪线颜色
                    setAllLayersClipColor();
                    var boxEntity = undefined;
                    var $clipMode = $('#clipModeBOXTailoring')
                        , Nowlength = that.Nowlength
                        , Nowwidth = that.Nowwidth
                        , Nowheight = that.Nowheight
                        , Nowrotate = that.Nowrotate;
                    var tooltip = window.MYcreateTooltip(document.body);
                    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                    var isBegin = false;//设置不重复添加盒子

                    $('#beginBOXTailoringG').click(() => {
                        if (isBegin) {
                            layer.tips('请先清除，再添加', '#clearboxBOXTailoring', {
                                tips: [3, 'red']
                            });
                            return false;
                        }
                        isBegin = true;
                        layui.use(function () {
                            var slider = layui.slider //滑块
                            //滑块
                            var sliderInst1 = slider.render({
                                elem: '#lengthBOXTailoring'
                                // , input: true //输入框
                                , value: Nowlength
                                , disabled: false
                                , change: function (value) {
                                    // console.log(value) //得到开始值
                                    Nowlength = Number(value);
                                    that.Nowlength = Number(value);
                                    if (!boxEntity) {
                                        return;
                                    }
                                    var dim = boxEntity.box.dimensions.getValue();
                                    var newValue = Number(value);
                                    boxEntity.box.dimensions = new Cesium.Cartesian3(newValue, dim.y, dim.z);
                                    setClipBox();
                                }
                            });
                            var sliderInst2 = slider.render({
                                elem: '#widthBOXTailoring'
                                // , input: true //输入框
                                , value: Nowwidth
                                , disabled: false
                                , change: function (value) {
                                    // console.log(value) //得到开始值
                                    Nowwidth = Number(value);
                                    that.Nowwidth = Number(value);
                                    if (!boxEntity) {
                                        return;
                                    }
                                    var dim = boxEntity.box.dimensions.getValue();
                                    var newValue = Number(value);
                                    boxEntity.box.dimensions = new Cesium.Cartesian3(dim.x, newValue, dim.z);
                                    setClipBox();
                                }
                            });
                            var sliderInst3 = slider.render({
                                elem: '#heightBOXTailoring'
                                // , input: true //输入框
                                , value: Nowheight
                                , disabled: false
                                , change: function (value) {
                                    // console.log(value) //得到开始值
                                    Nowheight = Number(value);
                                    that.Nowheight = Number(value);
                                    if (!boxEntity) {
                                        return;
                                    }
                                    var dim = boxEntity.box.dimensions.getValue();
                                    var newValue = Number(value);
                                    boxEntity.box.dimensions = new Cesium.Cartesian3(dim.x, dim.y, newValue);
                                    setClipBox();
                                }
                            });
                            var sliderInst4 = slider.render({
                                elem: '#rotateBOXTailoring'
                                // , input: true //输入框
                                , value: Nowrotate
                                , disabled: false
                                , max: 360
                                , change: function (value) {
                                    // console.log(value) //得到开始值
                                    Nowrotate = Number(value);
                                    that.Nowrotate = Number(value);
                                    if (!boxEntity) {
                                        return;
                                    }
                                    var position = boxEntity.position.getValue(0);
                                    var newValue = Number(value);
                                    var rotate = Cesium.Math.toRadians(newValue);
                                    var hpr = new Cesium.HeadingPitchRoll(rotate, 0, 0);
                                    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
                                    boxEntity.orientation = orientation;
                                    setClipBox();
                                }
                            });
                        })



                        handler.setInputAction(function (evt) {
                            tooltip.showAt(evt.endPosition, '<p>点击模型，添加裁剪盒子</p>');
                        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                        handler.setInputAction(function (evt) {
                            var clipMode = $clipMode.val();
                            var length = Number(Nowlength);
                            var width = Number(Nowwidth);
                            var height = Number(Nowheight);
                            var rotate = Cesium.Math.toRadians(parseFloat(Nowrotate));
                            // 获取鼠标点击的笛卡尔坐标
                            var cartesian = scene.pickPosition(evt.position);
                            var boxOption = {
                                dimensions: new Cesium.Cartesian3(length, width, height),
                                position: cartesian,
                                clipMode: clipMode,
                                heading: rotate
                            };
                            var hpr = new Cesium.HeadingPitchRoll(rotate, 0, 0);
                            var orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian, hpr);
                            boxEntity = viewer.entities.add({
                                box: {
                                    dimensions: new Cesium.Cartesian3(length, width, height),
                                    material: Cesium.Color.fromRandom({
                                        alpha: 0.1
                                    })
                                },
                                position: cartesian,
                                orientation: orientation
                            });
                            setAllLayersClipOptions(boxOption);
                            tooltip.setVisible(false);
                            handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                    })
                    $("#customBOXTailoring").on("click", function () {
                        if (!boxEntity) {
                            return;
                        }
                        if (!isBegin) {
                            layer.tips('请先添加盒子', '#beginBOXTailoringG', {
                                tips: [3, 'red']
                            });
                            return false;
                        }
                        handler.setInputAction(
                            function (movement) {
                                tooltip.showAt(movement.endPosition, '<p>点击模型，移动裁剪盒子</p>');
                                var cartesian = viewer.scene.pickPosition(movement.startPosition);
                                boxEntity.position = cartesian;
                                handler.setInputAction(function (evt) {
                                    setClipBox();
                                    tooltip.setVisible(false);
                                    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE
                        );
                    });
                    $('#clearboxBOXTailoring').click(function () {
                        // for (var i = 0, j = layers.length; i < j; i++) {
                        //     layers[i].clearCustomClipBox();
                        // };
                        // viewer.entities.removeAll();
                        // that.defaultLayui();
                        isBegin = false;
                        that.closesBOXTailoring();
                    });

                    handler.setInputAction(function () {
                        setClipBox();
                        handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
                    $clipMode.change(function () {
                        setClipBox();
                    });

                    function setClipBox() {
                        var newDim = boxEntity.box.dimensions.getValue();
                        var position = boxEntity.position.getValue(0);
                        var clipMode = $clipMode.val();
                        var heading = Cesium.Math.toRadians(Nowrotate);
                        var boxOptions = {
                            dimensions: newDim,
                            position: position,
                            clipMode: clipMode,
                            heading: heading
                        };
                        setAllLayersClipOptions(boxOptions);
                    }

                    function setAllLayersClipColor() {
                        for (var i = 0, j = layers.length; i < j; i++) {
                            layers[i].clipLineColor = new Cesium.Color(1, 1, 1, 0);
                        }
                    }

                    function setAllLayersClipOptions(boxOptions) {
                        for (var i = 0, j = layers.length; i < j; i++) {
                            layers[i].setCustomClipBox(boxOptions);
                        }
                    }

                }, function (e) {
                    if (widget._showRenderLoopErrors) {
                        var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                        widget.showErrorPanel(title, undefined, e);
                    }
                });


            },
            promise: 'null',
            closesBOXTailoring: function (froms) {
                console.log(`${this.name}--guanbi`);
                var that = this;
                if (that.promise != 'null') {
                    Cesium.when(that.promise, function (layers) {
                        for (var i = 0, j = layers.length; i < j; i++) {
                            layers[i].clearCustomClipBox();
                        };
                        that.map.entities.removeAll();
                        that.defaultLayui();
                    })
                }

            },
            onOpen: function () {

            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
                console.log('jies')
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/BOXTailoring/css/style.css

New file
@@ -0,0 +1,61 @@
.jimu-widget-BOXTailoring {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 200px !important;
  height: 300px !important;
  background-color: rgb(255, 255, 255);
  font-size: 14px;
  color: rgb(0, 0, 0);
  z-index: 12 !important;
  border-radius: 10px;
  display: none;
  box-shadow: 0 0 8px #fff;
  padding: 0px 5px !important;
}

.jimu-widget-BOXTailoring .closeOUR {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

.jimu-widget-BOXTailoring .closeOUR:hover {
  color: red;
}

.jimu-widget-BOXTailoring button{
  line-height: 30px;
  /* width: 80px; */
  height: 30px;
  font-size: 14px;
  border-radius: 5px;
  box-shadow: 2px 2px 15px -5px #378ef1;
  border: 1px solid transparent;
  background-color: #fff;
  padding: 0 8px;
}

.jimu-widget-BOXTailoring button:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
}

.jimu-widget-BOXTailoring #lengthBOXTailoring
,.jimu-widget-BOXTailoring #widthBOXTailoring
,.jimu-widget-BOXTailoring #heightBOXTailoring
,.jimu-widget-BOXTailoring #rotateBOXTailoring{
  width: 180px;
}

.jimu-widget-BOXTailoring #toolbarBOXTailoring {
  width: 100%;
  height: calc(100% - 30px);
  margin-top: 20px;
  /* border: 1px solid sandybrown; */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}

 widgets/BOXTailoring/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "BOXTailoring",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "liuyg",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/BOXTailoring/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "BOXTailoring"
  })
);

 widgets/BOXTailoring/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "BOXTailoring"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/BOXTailoring/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "BOX裁剪"
  })
);

 widgets/LeftNavigationBar/Widget.js

@@ -331,7 +331,7 @@
            },
            begin: function (data) {
                var that = this;

                window.mySanweiShujuOpens = {};//全局scene.open资源
                var a = null;

                layui.use(function () {
@@ -388,6 +388,8 @@
                                            that[item.id] = scene.open(host + partOfUrl, undefined, {
                                                autoSetView: false //不自动定位
                                            });
                                            
                                            window.mySanweiShujuOpens[item.id] = that[item.id];
                                            // console.log(222)
                                            topic.publish('appendTilt', 'Layermanagement', item);
                                            topic.publish('appendTiltS', 'spatialAnalysis', item);
@@ -513,7 +515,8 @@
                                        that[obj.data.id] = scene.open(host + partOfUrl, undefined, {
                                            autoSetView: false //不自动定位
                                        });
                                        // console.log(333)
                                        window.mySanweiShujuOpens[obj.data.id] = that[obj.data.id];

                                        topic.publish('appendTilt', 'Layermanagement', obj.data);
                                        topic.publish('appendTiltS', 'spatialAnalysis', obj.data);
                                        topic.publish('addLayersLegends', 'legends', obj.data);

 widgets/digTheEarth/Widget.js

@@ -157,7 +157,9 @@
                if (that.handlerPolygon.deactivate) {
                    that.handlerPolygon.deactivate();
                }
                if(that.tooltip.setVisible){
                that.tooltip.setVisible(false);
                }
            },
            onOpen: function () {


 widgets/spatialAnalysis/Widget.js

@@ -80,6 +80,11 @@
                        name: '平面裁剪',
                        classs: 'clippingPlanes-tool',
                        img: './images/addL/pingmian.png'
                    },
                    {//BOX裁剪
                        name: 'BOX裁剪',
                        classs: 'BOXTailoring-tool',
                        img: './images/addL/pingmian.png'
                    }
                ];

@@ -289,6 +294,20 @@
                    }
                })

                //BOX裁剪
                $('.BOXTailoring-tool').click(function () {
                    that.closeOnceUse();

                    if (that.promise == 'NODATA') {
                        layer.tips('请选择三维倾斜数据中的图层支持！', '.SelectLayerTool', {
                            tips: [3, 'red']
                        });
                    } else {
                        $(".jimu-widget-BOXTailoring").show();
                        topic.publish('beginBOXTailoring', that.promise);
                    }
                })

                $('.SelectLayerTool').click(() => {
                    $('#SelectLayerToolItem').toggle();
                })
@@ -308,10 +327,19 @@
                dom.append(str);
                // console.log('数据错误默认')
                this.promise = 'NODATA';
                this.SelectClose();//关闭需要三维数据的窗口
            },
            SelectClose: function () {
                //关闭平面裁剪
                if ($(".jimu-widget-clippingPlanes").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-clippingPlanes").hide();
                    topic.publish('closesclippingPlanes');
                }

                //关闭BOX裁剪
                if ($(".jimu-widget-BOXTailoring").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-BOXTailoring").hide();
                    topic.publish('closesBOXTailoring');
                }
            },
            liClick: function (itemid, name, ourdata = 1) {//点击事件
@@ -333,39 +361,36 @@
                    if (ourdata != 1) {
                        //     console.log('data')
                        if (ourdata.lon) {
                            that.map.camera.flyTo({
                                destination: Cesium.Cartesian3.fromDegrees(Number(ourdata.lon), Number(ourdata.lat), Number(ourdata.height * 50))
                            //设置相机位置、视角，便于观察场景
                            that.map.scene.camera.setView({
                                destination: new Cesium.Cartesian3.fromDegrees(Number(ourdata.lon), Number(ourdata.lat), Number(ourdata.height)),
                                orientation: {
                                    heading: Cesium.Math.toRadians(Number(ourdata.yawAngle)),
                                    pitch: Cesium.Math.toRadians(Number(ourdata.pitchAngle)),
                                    roll: Cesium.Math.toRadians(Number(ourdata.rollAngle))
                                }
                            });
                        }
                        if (ourdata.src.indexOf('.openrealspace') != -1) {
                            // console.log('数据正确');
                            //关闭平面裁剪
                            if ($(".jimu-widget-clippingPlanes").is(":visible")) {//判断是否隐藏
                                $(".jimu-widget-clippingPlanes").hide();
                                topic.publish('closesclippingPlanes');
                            }
                            this.SelectClose();//关闭需要三维数据的窗口
                            that.promise = {
                                src: ourdata.src,
                                name: ourdata.serviceName
                                ZName: ourdata.title,
                                name: ourdata.serviceName,
                                id: ourdata.id
                            };

                        } else {
                            // console.log('数据错误');
                            that.promise = 'NODATA';
                            //关闭平面裁剪
                            if ($(".jimu-widget-clippingPlanes").is(":visible")) {//判断是否隐藏
                                $(".jimu-widget-clippingPlanes").hide();
                                topic.publish('closesclippingPlanes');
                            }
                            this.SelectClose();//关闭需要三维数据的窗口
                        }
                    } else {
                        // console.log('数据错误没有data');
                        that.promise = 'NODATA';
                        //关闭平面裁剪
                        if ($(".jimu-widget-clippingPlanes").is(":visible")) {//判断是否隐藏
                            $(".jimu-widget-clippingPlanes").hide();
                            topic.publish('closesclippingPlanes');
                        }
                        this.SelectClose();//关闭需要三维数据的窗口
                    }

                })
@@ -479,25 +504,6 @@
                    }
                }
            },

            // beginRool: function (data) {
            //     //选择图层Layui
            //     layui.use(['dropdown', 'util', 'layer', 'table'], function () {
            //         var dropdown = layui.dropdown
            //             , layer = layui.layer;
            //         dropdown.render({
            //             elem: '.SelectLayerTool'
            //             , data: data
            //             , click: function (obj) {
            //                 layer.tips('选择了：' + obj.title, this.elem, { tips: [1, '#5FB878'] });
            //                 var dom = $('.SelectLayerTool');
            //                 dom.empty();
            //                 var str = `${obj.title} <i class="layui-icon layui-icon-down layui-font-12"></i>`
            //                 dom.append(str);
            //             }
            //         });
            //     });
            // },
            closeToolBox: function (item) {
                if (item != this.name) {
                    $('.tool-y-box').hide();
@@ -567,6 +573,12 @@
                    topic.publish('closesclippingPlanes');
                }

                //关闭BOX裁剪
                if ($(".jimu-widget-BOXTailoring").is(":visible")) {//判断是否隐藏
                    $(".jimu-widget-BOXTailoring").hide();
                    topic.publish('closesBOXTailoring');
                }

            },
            onOpen: function () {
            },