Box裁剪未完成和开敞度不支持

liuyg

2021-06-29 f656f66c0b2dfa0e52b25f41c761f03b5997262b

Box裁剪未完成和开敞度不支持

 config.json

@@ -280,6 +280,19 @@
      {
        "name": "BOX裁剪",
        "uri": "widgets/BOXTailoring/Widget"
      },
      {
        "name": "开敞度分析",
        "uri": "widgets/openAnalysis/Widget"
      }
      ,
      {
        "name": "BOX交互裁剪",
        "uri": "widgets/BOXInteractive/Widget"
      },
      {
        "name": "Cross裁剪",
        "uri": "widgets/BOXInteractive/Widget"
      }
    ],
    "groups": [],

 images/addL/measure.cur

Binary files differ

 widgets/BOXInteractive/Widget.html

New file
@@ -0,0 +1,37 @@
<div>
    <!-- BOXInteractive -->
    <div id='loadingbarBOXInteractive' 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="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <div id='toolbarBOXInteractive' class="param-container tool-bar">
        <div>
            <select style="width: 180px;" id="clipModeBOXInteractive">
                <option value="clip_behind_all_plane">裁剪包围盒内</option>
                <option value="clip_behind_any_plane">裁剪包围盒外</option>
            </select>
            <button type="button" id="beginrboxBOXInteractive" class="button black" style="float: right;">设 置</button>
            <button type="button" id="clearboxBOXInteractive" class="button black" style="float: right;">清 除</button>

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

 widgets/BOXInteractive/Widget.js

New file
@@ -0,0 +1,229 @@
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-BOXInteractive',
            name: 'BOXInteractive',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("beginBOXInteractive", lang.hitch(this, this.beginBOXInteractive));
                topic.subscribe("closesBOXInteractive", lang.hitch(this, this.closesBOXInteractive));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closesBOXInteractive();
                })


                that.beginBOXInteractive();

            },
            beginBOXInteractive: function () {
                console.log(`${this.name}--kaishi`);
                var that = this;

                var viewer = that.map;
                var URL_CONFIG = window.MYURL_CONFIG;
                viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                    url: 'https://dev.virtualearth.net',
                    mapStyle: Cesium.BingMapsStyle.AERIAL,
                    key: URL_CONFIG.BING_MAP_KEY
                }));

                var scene = viewer.scene;
                var widget = viewer.cesiumWidget;
                $('#toolbarBOXInteractive').show();
                $('#loadingbarBOXInteractive').remove();

                var promise = scene.open(URL_CONFIG.SCENE_BIMBUILDING);
                Cesium.when(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 = $('#clipModeBOXInteractive');

                    var tooltip = window.MYcreateTooltip(document.body);

                    //交互绘制box

                    // Cesium.DrawMode.Box = 4;
                    // console.log(Cesium.DrawMode.Box, 4634343)
                    // var handlerBox = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Box);
                    var handlerBox = new Cesium.DrawHandler(viewer, 4);
                    var editorBox;

                    handlerBox.activeEvt.addEventListener(function (isActive) {
                        if (isActive == true) {
                            viewer.enableCursorStyle = false;
                            viewer._element.style.cursor = '';
                            $('body').removeClass('drawCurshizi').addClass('drawCurshizi');
                        }
                        else {
                            viewer.enableCursorStyle = true;
                            $('body').removeClass('drawCurshizi');
                        }
                    });
                    handlerBox.movingEvt.addEventListener(function (windowPosition) {

                        if (handlerBox.isDrawing) {
                            tooltip.showAt(windowPosition, '<p>点击鼠标左键结束矩形绘制，移动鼠标绘制box高度。</p><p>右键结束绘制.</p>');
                        } else {
                            tooltip.showAt(windowPosition, '<p>点击鼠标左键，开始绘制矩形作为box底面</p>');
                        }

                    });
                    handlerBox.drawEvt.addEventListener(function (e) {
                        console.log(88888888888888888888)
                        tooltip.setVisible(false);
                        // boxEntity = e.object;
                        // var newDim = boxEntity.box.dimensions.getValue();
                        // var position = boxEntity.position.getValue(0);
                        // var boxOption = {
                        //     dimensions: newDim,
                        //     position: position,
                        //     clipMode: $clipMode.val(),
                        //     heading: 0
                        // };

                        // //box编辑
                        // editorBox = new Cesium.BoxEditor(viewer, boxEntity);

                        // editorBox.editEvt.addEventListener(function (e) {
                        //     boxEntity.box.dimensions = e.dimensions
                        //     boxEntity.position = e.position;
                        //     boxEntity.orientation = e.orientation;

                        //     setClipBox();
                        // });
                        // editorBox.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 950);
                        // editorBox.activate();
                        // setAllLayersClipOptions(boxOption);
                        // tooltip.setVisible(false);
                        // handlerBox.clear();
                        // handlerBox.deactivate();
                    });
                    handlerBox.activate();

                    $('#clearboxBOXInteractive').click(function () {
                        for (var i = 0, j = layers.length; i < j; i++) {
                            layers[i].clearCustomClipBox();
                        };
                        editorBox.deactivate();
                        viewer.entities.removeAll();
                        handlerBox.clear();
                        handlerBox.deactivate();
                        handlerBox.activate();

                    });

                    $clipMode.change(function () {
                        setClipBox();
                    });

                    function setClipBox() {
                        var clipMode = $clipMode.val();
                        if (typeof (boxEntity) == "undefined") {
                            return;
                        }
                        var newDim = boxEntity.box.dimensions.getValue();
                        var position = boxEntity.position.getValue(0);

                        var heading = 0;
                        if (typeof (boxEntity.orientation) != "undefined") {
                            let rotationM3 = Cesium.Matrix3.fromQuaternion(boxEntity.orientation._value, new Cesium.Matrix3());
                            let localFrame = Cesium.Matrix4.fromRotationTranslation(rotationM3, Cesium.Cartesian3.ZERO, new Cesium.Matrix4());
                            let inverse = Cesium.Matrix4.inverse(Cesium.Transforms.eastNorthUpToFixedFrame(position), new Cesium.Matrix4());
                            let hprm = Cesium.Matrix4.multiply(inverse, localFrame, new Cesium.Matrix4());
                            var rotation = Cesium.Matrix4.getMatrix3(hprm, new Cesium.Matrix3());
                            let hpr = Cesium.HeadingPitchRoll.fromQuaternion(Cesium.Quaternion.fromRotationMatrix(rotation));
                            heading = hpr.heading;
                        }


                        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);
                            console.log(layers[i].clipLineColor, 4444444444444)
                        }
                    }

                    function setAllLayersClipOptions(boxOptions) {
                        console.log(5555555555555)
                        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);
                    }
                });

            },
            closesBOXInteractive: function (froms) {
                console.log(`${this.name}--guanbi`);
                var that = this;
            },
            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/BOXInteractive/css/style.css

New file
@@ -0,0 +1,42 @@
.jimu-widget-BOXInteractive {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 200px !important;
  height: 40px !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-BOXInteractive .closeOUR {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

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

/* .jimu-widget-BOXInteractive .but {
  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;
}

.jimu-widget-BOXInteractive .but:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
} */

 widgets/BOXInteractive/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "BOXInteractive",
  "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/BOXInteractive/nls/es/strings.js

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

 widgets/BOXInteractive/nls/strings.js

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

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

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

 widgets/crossTailoring/Widget.html

New file
@@ -0,0 +1,77 @@
<div>
    crossTailoring
    <div id="toolbar" class="params-setting-container">
        <div class="params-setting-anchor" title="显示/隐藏参数面板"><span class="fui-expand"></span></div>
        <div class="params-setting">
            <table>
                <tbody>
                    <tr>
                        <td><label>裁剪宽度：</label></td>
                        <td>
                            <input type="range" id="clip-width" min="1" max="100" step="1" data-bind="value: width, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" id="clip-width-label" min="1" max="100" step="1" data-bind="value: width, valueUpdate: 'input'" />
                        </td>
                    </tr>
                    <tr>
                        <td><label>裁剪高度：</label></td>
                        <td>
                            <input type="range" id="clip-height" min="1" max="100" step="1" data-bind="value: height, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" id="clip-height-label" min="1" max="100" step="1" data-bind="value: height, valueUpdate: 'input'" />
                        </td>
                    </tr>
                    <tr>
                        <td><label>绕X轴旋转：</label></td>
                        <td>
                            <input id="pitch" type="range" min="0" max="360" step="1.0" data-bind="value: pitch, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" min="0" max="360" step="1" data-bind="value: pitch, valueUpdate: 'input'">
                        </td>
                    </tr>
                    <tr>
                        <td><label>绕Y轴旋转：</label></td>
                        <td>
                            <input id="roll" type="range" min="0" max="360" step="1.0" data-bind="value: roll, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" min="0" max="360" step="1.0" data-bind="value: roll, valueUpdate: 'input'">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>绕Z轴旋转：</label>
                        </td>
                        <td>
                            <input id="heading" type="range" min="0" max="360" step="1.0" data-bind="value: heading, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" min="0" max="360" step="1.0" data-bind="value: heading, valueUpdate: 'input'">
                        </td>
                    </tr>
                    <tr>
                        <td><label>拉伸：</label></td>
                        <td>
                            <input id="extrude" type="range" min="0.1" max="30" step="0.1" data-bind="value: extrudeDistance, valueUpdate: 'input'">
                        </td>
                        <td>
                            <input type="number" min="0.1" max="30" step="0.5" data-bind="value: extrudeDistance, valueUpdate: 'input'">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <input type="button" id="choose-clip-pos" class="button black" value="选取裁剪位置" />
                            <input type="button" id="clear" class="button black" value="清除" style="margin-left: 10px;" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
</div>

 widgets/crossTailoring/Widget.js

New file
@@ -0,0 +1,72 @@
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-crossTailoring',
            name: 'crossTailoring',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("begincrossTailoring", lang.hitch(this, this.begincrossTailoring));
                topic.subscribe("closescrossTailoring", lang.hitch(this, this.closescrossTailoring));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closescrossTailoring();
                })


                that.begincrossTailoring();

            },
            begincrossTailoring: function () {
                console.log(`${this.name}--kaishi`);
                var that = this;

            },
            closescrossTailoring: function (froms) {
                console.log(`${this.name}--guanbi`);
                var that = this;
            },
            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/crossTailoring/css/style.css

New file
@@ -0,0 +1,42 @@
.jimu-widget-crossTailoring {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 200px !important;
  height: 40px !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-crossTailoring .closeOUR {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

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

/* .jimu-widget-crossTailoring .but {
  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;
}

.jimu-widget-crossTailoring .but:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
} */

 widgets/crossTailoring/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "crossTailoring",
  "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/crossTailoring/nls/es/strings.js

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

 widgets/crossTailoring/nls/strings.js

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

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

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

 widgets/openAnalysis/Widget.html

New file
@@ -0,0 +1,95 @@
<div>
    <!-- openAnalysis -->
    <div id='loadingbaropenAnalysis' 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="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
    <button id="bnopenAnalysis"
        style="position : absolute; left : 1%; top : 2%; display : none;background-color: #00a1cb;color:#fff;border: 0">
        分析
    </button>
    <div id="toolbaropenAnalysis" style="position : absolute; left : 1%; top : 2%;color: #ffffff;height: auto;display : none;">
        <div class="titleBox" style="margin-bottom: 10px">
            <div class="titl" style="width: 80px;">开敞度分析</div>
            <span aria-hidden="false" class="close2">×</span>
        </div>
        <div style="font-size: 12px;margin-bottom: 10px">观察者信息：</div>
        <div class="middlebox">
            <span class="tit">X :</span>
            <input class="middle-input" id="longitudeopenAnalysis" step="0.0001" type="number" value="" />
        </div>
        <div class="middlebox">
            <span class="tit">Y :</span>
            <input class="middle-input" id="latitudeopenAnalysis" step="0.0001" type="number" value="" />
        </div>
        <div class="middlebox">
            <span class="tit">Z :</span>
            <input class="middle-input" id="heightopenAnalysis" min="0" step="1" type="number" value="" />
        </div>
        <div style="font-size: 12px;margin-bottom: 10px">参数设置：</div>
        <div class="middlebox m">
            <span class="tit">观察半径:</span>
            <input class="min-solider" id="observerRsdiusopenAnalysis" max="1000" min="1" step="1" style="width:45%" type="range"
                value="100" />
            <input class="min-solider" id="RsdiusopenAnalysis" max="1000" min="1" step="1"
                style="width:23%; height:20px ;margin: 0;" type="number" value="100" />
        </div>
        <div class="middlebox m">
            <span class="tit">起始角度:</span>
            <input class="min-solider" id="StartingAngleopenAnalysis" max="360" min="0" step="5" style="width:45%" type="range"
                value="0" />
            <input class="min-solider" id="SangleopenAnalysis" max="360" min="0" step="1" style="width:23%; height:20px ;margin: 0;"
                type="number" value="0" />
        </div>
        <div class="middlebox m">
            <span class="tit">终止角度:</span>
            <input class="min-solider" id="EndAngleopenAnalysis" max="360" min="0" step="1" style="width:45%" type="range"
                value="360" />
            <input class="min-solider" id="EangleopenAnalysis" max="360" min="0" step="1" style="width:23%; height:20px ;margin: 0;"
                type="number" value="360" />
        </div>
        <div class="middlebox m">
            <span class="">可视部分颜色:</span>
            <input id="VisibleColor" type="color" value="#00B7EF" />
        </div>
        <div class="middlebox m">
            <span class="">隐藏部分颜色:</span>
            <input id="HiddenColor" type="color" value="#E36C09" />
        </div>
        <div class="middlebox">
            <span class="tit">显示类型:</span>
            <select class="select-container " id="calMode1openAnalysis" style="width: 70%">
                <option value="VisiblePart">可视部分</option>
                <option value="HiddenPart">隐藏部分</option>
                <option value="ShowAll">全部显示</option>
            </select>
        </div>
        <div style="margin:10px ">
            <span style="font-size: 12px">是否封口:</span> <input id="isClosedopenAnalysis" type="checkbox" style="margin-left: 10px" />
            <span style="font-size: 10px;margin-left: 5px">(当为360度闭合半球时设置无效)</span>
        </div>
        <div class="boxchild ">
            <button class="tbtn tbn1" id="activeopenAnalysis" type="button">分析</button>
            <button class="tbtn " id="clearopenAnalysis" type="button">清除</button>
        </div>
    </div>
    <i class="layui-icon closeOUR">
        &#x1006;
    </i></span>
</div>

 widgets/openAnalysis/Widget.js

New file
@@ -0,0 +1,390 @@
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-openAnalysis',
            name: 'openAnalysis',
            flag: false,
            startup: function () {
                var that = this;
                topic.subscribe("beginopenAnalysis", lang.hitch(this, this.beginopenAnalysis));
                topic.subscribe("closesopenAnalysis", lang.hitch(this, this.closesopenAnalysis));
                // topic.publish('getbeginSlope', that.beginSlope);
                $(`.${that.baseClass}`).find('.closeOUR').click(() => {
                    $(`.${that.baseClass}`).hide();
                    that.closesopenAnalysis();
                })


                // that.beginopenAnalysis();

            },
            beginopenAnalysis: function () {
                console.log(Cesium.ViewDome, 111)//缺少Cesium.ViewDome支持
                console.log(`${this.name}--kaishi`);
                var that = this;

                var viewer = that.map;
                var scene = viewer.scene;
                var widget = viewer.cesiumWidget;
                var longitude, latitude, height;
                var viewDomeArray = []; //存多个开敞度对象数组
                var ViewDomeType = 0; //开敞度类型
                var isClosed = false; //是否封口
                var handler;
                var iTime, Time; //定时器
                var URL_CONFIG = window.MYURL_CONFIG;

                viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                    key: URL_CONFIG.BING_MAP_KEY,//可至官网（https://www.bingmapsportal.com/）申请key
                    url: URL_CONFIG.BINGMAP
                }));
                var promise = scene.open(URL_CONFIG.SCENE_CBD);
                Cesium.when(promise, function (layers) {
                    for (var i = 0; i < layers.length; i++) {
                        layers[i].selectEnabled = false;
                    }
                    //图层加载完成,设置相机位置
                    scene.camera.setView({
                        destination: Cesium.Cartesian3.fromDegrees(116.4491, 39.9011, 180),
                        orientation: {
                            heading: 0.0912,
                            pitch: -0.3177,
                            roll: 0
                        }
                    });
                    $("#activeopenAnalysis").on("click", function () {
                        mousestyle();
                        initViewDome();
                        // handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                        // console.log(handler, 31313131313)
                        // handler.setInputAction(function (e) {
                        //     viewer.enableCursorStyle = true;
                        //     $('body').removeClass('drawCurshizi');
                        //     //获取点击位置笛卡尔坐标
                        //     var position = scene.pickPosition(e.position);
                        //     //将笛卡尔坐标转化为经纬度坐标
                        //     let positions = [];
                        //     var cartographic = Cesium.Cartographic.fromCartesian(position);
                        //     longitude = Cesium.Math.toDegrees(cartographic.longitude);
                        //     latitude = Cesium.Math.toDegrees(cartographic.latitude);
                        //     height = cartographic.height;
                        //     if (height < 0) {
                        //         height = 0;
                        //     }
                        //     if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
                        //         positions.push(longitude);
                        //         positions.push(latitude);
                        //         positions.push(height);
                        //     }
                        //     //点击位置同步到显示框
                        //     $("#longitudeopenAnalysis").val(longitude);
                        //     $("#latitudeopenAnalysis").val(latitude);
                        //     $("#heightopenAnalysis").val(height);
                        //     updateViewDome(positions);
                        //     handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
                        // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    })

                    function initViewDome() {  //初始化
                        console.log(1121)
                        // let VisibleColor = Cesium.Color.fromCssColorString($("#VisibleColoropenAnalysis").val());
                        // let HiddenColor = Cesium.Color.fromCssColorString($("#HiddenColoropenAnalysis").val());
                        // let viewDome = new Cesium.ViewDome(scene); //构造新的开敞度分析对象
                        // viewDome.viewPosition = [longitude, latitude, height]; //视点位置，这里用的是CBD示例的中心位置
                        // viewDome.distance = Number($("#observerRsdiusopenAnalysis").val());//可视距离
                        // viewDome.domeType = ViewDomeType; //开敞度类型,分为可视部分、不可视部分, 全部显示
                        // viewDome.visibleAreaColor = Cesium.Color.fromAlpha(VisibleColor, 0.5); //可视部颜色
                        // viewDome.hiddenAreaColor = Cesium.Color.fromAlpha(HiddenColor, 0.5); //隐藏部分颜色
                        // viewDome.startAngle = Number($("#StartingAngleopenAnalysis").val());//起始角度
                        // viewDome.endAngle = Number($("#EndAngleopenAnalysis").val());//终止角度
                        // viewDome.isClosed = isClosed;  //封口
                        // viewDome.build(); //执行开敞度分析
                        // viewDomeArray.push(viewDome)
                        console.log(Cesium.ViewDome, 111)//缺少Cesium.ViewDome
                        console.log(1131)
                    }

                    function move() {   //改变经纬度动态移动
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        if (longitude && latitude && height) {
                            viewDomeArray[viewDomeArray.length - 1].viewPosition = [longitude, latitude, height];
                        }
                        clearTimeout(Time); //防止点击多次，执行一次
                        Time = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].startAngle = Number($("#StartingAngleopenAnalysis").val()) //加这个才起作用
                        }, 500);
                    }

                    function updateViewDome(p) {
                        viewDomeArray[viewDomeArray.length - 1].viewPosition = p;
                        viewDomeArray[viewDomeArray.length - 1].build(); //执行开敞度分析
                        addpoint()
                    }

                    function mousestyle() { //鼠标样式
                        viewer.enableCursorStyle = false;
                        viewer._element.style.cursor = '';
                        $('body').removeClass('drawCurshizi').addClass('drawCurshizi');
                    }

                    //结果清除
                    function clear() {
                        viewer.entities.removeAll();
                        viewDomeArray[viewDomeArray.length - 1].destroy();//释放对象
                        viewDomeArray.pop();
                        if (viewDomeArray.length == 0) {
                            return
                        } else {
                            let v = viewDomeArray[viewDomeArray.length - 1];
                            $("#longitudeopenAnalysis").val(v.viewPosition[0]);
                            $("#latitudeopenAnalysis").val(v.viewPosition[1]);
                            $("#heightopenAnalysis").val(v.viewPosition[2]);
                            longitude = v.viewPosition[0];
                            latitude = v.viewPosition[1];
                            height = v.viewPosition[2];
                            addpoint()
                        }
                    }

                    function addpoint() {//添加点
                        if (longitude == undefined || latitude == undefined || height == undefined) {
                            return
                        }
                        //首先移除之前添加的点
                        viewer.entities.removeAll();
                        //在位置添加对应点
                        viewer.entities.add(new Cesium.Entity({
                            point: new Cesium.PointGraphics({
                                color: new Cesium.Color(1, 0, 0),
                                pixelSize: 6,
                                outlineColor: new Cesium.Color(0, 1, 1)
                            }),
                            position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 0.5)
                        }));

                    }

                    $('#clearopenAnalysis').click(function () {
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        clear();
                        handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
                    });
                    $("#longitudeopenAnalysis").bind("input propertychange", function () {
                        longitude = parseFloat($("#longitudeopenAnalysis").val());
                        if (!longitude) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            move()
                        }, 1000);
                        addpoint()
                    })
                    $("#latitudeopenAnalysis").bind("input propertychange", function () {
                        latitude = parseFloat($("#latitudeopenAnalysis").val());
                        if (!latitude) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            move()
                        }, 1000);
                        addpoint()
                    })
                    $("#heightopenAnalysis").bind("input propertychange", function () {
                        height = parseFloat($("#heightopenAnalysis").val());
                        if (!height) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            move()
                        }, 1000);
                        addpoint()
                    })
                    $('#observerRsdiusopenAnalysis').bind('input propertychange', function () {
                        $("#RsdiusopenAnalysis").val($("#observerRsdiusopenAnalysis").val());
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        if (Number($("#observerRsdiusopenAnalysis").val()) == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].distance = Number($("#observerRsdiusopenAnalysis").val())
                        }, 500);
                    });
                    $('#RsdiusopenAnalysis').bind('input propertychange', function () {
                        $("#observerRsdiusopenAnalysis").val($("#RsdiusopenAnalysis").val())
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        if (Number($("#observerRsdiusopenAnalysis").val()) == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].distance = Number($("#observerRsdiusopenAnalysis").val())
                        }, 500);
                    });

                    $('#StartingAngleopenAnalysis').bind('input propertychange', function () {
                        $("#SangleopenAnalysis").val($("#StartingAngleopenAnalysis").val());
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].startAngle = Number($("#StartingAngleopenAnalysis").val())
                        }, 500);
                    });
                    $('#SangleopenAnalysis').bind('input propertychange', function () {
                        $("#StartingAngleopenAnalysis").val($("#SangleopenAnalysis").val());
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].startAngle = Number($("#StartingAngleopenAnalysis").val())
                        }, 500);
                    });

                    $('#EndAngleopenAnalysis').bind('input propertychange', function () {
                        $("#EangleopenAnalysis").val($("#EndAngleopenAnalysis").val());
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].endAngle = Number($("#EndAngleopenAnalysis").val())
                        }, 500);
                    });
                    $('#EangleopenAnalysis').bind('input propertychange', function () {
                        $("#EndAngleopenAnalysis").val($("#EangleopenAnalysis").val());
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        clearTimeout(iTime);
                        iTime = setTimeout(function () {
                            viewDomeArray[viewDomeArray.length - 1].endAngle = Number($("#EndAngleopenAnalysis").val())
                        }, 500);
                    });

                    $("#VisibleColoropenAnalysis").bind("input propertychange", function () {
                        let VisibleColor = Cesium.Color.fromCssColorString($("#VisibleColoropenAnalysis").val())
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        viewDomeArray[viewDomeArray.length - 1].visibleAreaColor = Cesium.Color.fromAlpha(VisibleColor, 0.5); //可视部颜色
                    })
                    $("#HiddenColoropenAnalysis").bind("input propertychange", function () {
                        let HiddenColor = Cesium.Color.fromCssColorString($("#HiddenColoropenAnalysis").val())
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        viewDomeArray[viewDomeArray.length - 1].hiddenAreaColor = Cesium.Color.fromAlpha(HiddenColor, 0.5);
                    })

                    $("#calMode1openAnalysis").on("input change", function () {
                        var index = document.getElementById("calMode1openAnalysis").selectedIndex;
                        switch (index) {
                            case 0:
                                ViewDomeType = Cesium.ViewDomeType.VISIBLEDOME;
                                break;
                            case 1:
                                ViewDomeType = Cesium.ViewDomeType.HIDDENDOME;
                                break;
                            case 2:
                                ViewDomeType = Cesium.ViewDomeType.ALLDOME;
                                break;
                            default:
                                break;
                        }
                        if (viewDomeArray.length == 0) {
                            return
                        }
                        viewDomeArray[viewDomeArray.length - 1].domeType = ViewDomeType
                    });

                    $("#isClosedopenAnalysis").click(function () {
                        if ($(this).prop("checked")) {
                            isClosed = true
                        } else {
                            isClosed = false
                        }
                        viewDomeArray[viewDomeArray.length - 1].isClosed = isClosed;
                    });

                    $('#toolbaropenAnalysis').show();
                    $('#loadingbaropenAnalysis').remove();

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

                //关闭操作框
                $(".close2").click(function () {
                    $("#toolbaropenAnalysis").hide();
                    $("#bnopenAnalysis").show()
                });
                $("#bnopenAnalysis").click(function () {
                    $("#toolbaropenAnalysis").show();
                    $("#bnopenAnalysis").hide()
                });

            },
            closesopenAnalysis: function (froms) {
                console.log(`${this.name}--guanbi`);
                var that = this;
            },
            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/openAnalysis/css/style.css

New file
@@ -0,0 +1,42 @@
.jimu-widget-openAnalysis {
  position: fixed !important;
  top: 72px !important;
  right: 388px !important;
  width: 300px !important;
  height: 400px !important;
  background-color: rgb(0, 0, 0);
  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-openAnalysis .closeOUR {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 18px;
  cursor: pointer;
}

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

/* .jimu-widget-openAnalysis .but {
  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;
}

.jimu-widget-openAnalysis .but:hover {
  box-shadow: 2px 2px 25px -5px #1679eb;
} */

 widgets/openAnalysis/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "openAnalysis",
  "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/openAnalysis/nls/es/strings.js

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

 widgets/openAnalysis/nls/strings.js

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

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

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "开敞度分析"
  })
);

 widgets/searchL/css/style.css

@@ -236,4 +236,13 @@

.layui-table-grid-down {
  display: none;
}

/* 鼠标样式 */
.drawCur {
  cursor: url(../../../images/addL/draw.cur), auto;
}

.drawCurshizi {
  cursor: url(../../../images/addL/measure.cur), auto;
}

 widgets/slope/css/style.css

@@ -35,7 +35,3 @@
  left: 1.1%;
  margin: 10px;
}

.drawCur {
  cursor: url(../../../images/addL/draw.cur), auto;
}

 实例临时.html

New file
@@ -0,0 +1,299 @@
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <title>Cross裁剪</title>
        <link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link href="./css/pretty.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/config.js"></script>
        <script src="./js/tooltip.js"></script>
        <script type="text/javascript" src="http://www.supermapol.com/earth/Build/Cesium/Cesium.js"></script>
        <style>
            input[type=range] {
                width: 180px;
            }
			
            input[type=number] {
                width: 50px;
            }
        </style>
    </head>

    <body>
        <div id="cesiumContainer"></div>
        <div id="toolbar" class="params-setting-container">
            <div class="params-setting-anchor" title="显示/隐藏参数面板"><span class="fui-expand"></span></div>
            <div class="params-setting">
                <table>
                    <tbody>
                        <tr>
                            <td><label>裁剪宽度：</label></td>
                            <td>
                                <input type="range" id="clip-width" min="1" max="100" step="1" data-bind="value: width, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" id="clip-width-label" min="1" max="100" step="1" data-bind="value: width, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td><label>裁剪高度：</label></td>
                            <td>
                                <input type="range" id="clip-height" min="1" max="100" step="1" data-bind="value: height, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" id="clip-height-label" min="1" max="100" step="1" data-bind="value: height, valueUpdate: 'input'" />
                            </td>
                        </tr>
                        <tr>
                            <td><label>绕X轴旋转：</label></td>
                            <td>
                                <input id="pitch" type="range" min="0" max="360" step="1.0" data-bind="value: pitch, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" min="0" max="360" step="1" data-bind="value: pitch, valueUpdate: 'input'">
                            </td>
                        </tr>
                        <tr>
                            <td><label>绕Y轴旋转：</label></td>
                            <td>
                                <input id="roll" type="range" min="0" max="360" step="1.0" data-bind="value: roll, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" min="0" max="360" step="1.0" data-bind="value: roll, valueUpdate: 'input'">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label>绕Z轴旋转：</label>
                            </td>
                            <td>
                                <input id="heading" type="range" min="0" max="360" step="1.0" data-bind="value: heading, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" min="0" max="360" step="1.0" data-bind="value: heading, valueUpdate: 'input'">
                            </td>
                        </tr>
                        <tr>
                            <td><label>拉伸：</label></td>
                            <td>
                                <input id="extrude" type="range" min="0.1" max="30" step="0.1" data-bind="value: extrudeDistance, valueUpdate: 'input'">
                            </td>
                            <td>
                                <input type="number" min="0.1" max="30" step="0.5" data-bind="value: extrudeDistance, valueUpdate: 'input'">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <input type="button" id="choose-clip-pos" class="button black" value="选取裁剪位置" />
                                <input type="button" id="clear" class="button black" value="清除" style="margin-left: 10px;" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <script>
            function onload(Cesium) {
                var viewer = new Cesium.Viewer('cesiumContainer');
                viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                    url: 'https://dev.virtualearth.net',
                    mapStyle: Cesium.BingMapsStyle.AERIAL,
                    key: URL_CONFIG.BING_MAP_KEY
                }));
                var scene = viewer.scene;
                scene.globe.depthTestAgainstTerrain = false;
                var promise = scene.open(URL_CONFIG.SCENE_BIMBUILDING);
                promise.then(function(layers) {
                    // 精准定位
                    scene.camera.setView({
                        destination: new Cesium.Cartesian3(-2180765.6717242915, 4379147.755349731, 4092644.516292509),
                        orientation: {
                            heading: 1.5751279310014885,
                            pitch: -1.493948327772495,
                            roll: 3.1415926535996626
                        }
                    });
                    var boxPosition, position, dim, width = 5,
                        height = 5,
                        heading = 0,
                        pitch = 0,
                        roll = 0,
                        extrudeDistance = 1.0,
                        startClip = false,
                        hasClipped = false;
                    var box = viewer.entities.add({ // 标识盒
                        position: Cesium.Cartesian3.fromDegrees(0, 0, 0),
                        show: false,
                        box: {
                            dimensions: new Cesium.Cartesian3(5, 5, 0.1),
                            fill: false,
                            outline: true,
                            outlineColor: Cesium.Color.WHITE,
                            outlineWidth: 5.0
                        }
                    });
                    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                    handler.setInputAction(function(movement) {
                        if(startClip) {
                            boxPosition = scene.pickPosition(movement.endPosition);
                            if(!boxPosition) {
                                return;
                            }
                            box.position = boxPosition;
                        }
                    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                    handler.setInputAction(function(evt) {
                        if(startClip) {
                            position = scene.pickPosition(evt.position);
                            if(!position) {
                                return;
                            }
                            var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
                            var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
                            box.orientation = orientation;
                            dim = new Cesium.Cartesian3(width, height, extrudeDistance);
                            updateClip();
                            startClip = false;
                            hasClipped = true;
                            box.show = false;
                        }
                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                    var viewModel = {
                        width: 5,
                        height: 5,
                        heading: 0.0,
                        pitch: 0.0,
                        roll: 0.0,
                        extrudeDistance: 1.0,
                        isMoving: false
                    };
                    Cesium.knockout.track(viewModel);
                    var toolbar = document.getElementById('toolbar');
                    Cesium.knockout.applyBindings(viewModel, toolbar);

                    Cesium.knockout.getObservable(viewModel, 'width').subscribe(
                        function(newValue) {
                            width = Number(newValue);
                            box.box.dimensions = new Cesium.Cartesian3(width, height, 0.1);
                            dim = new Cesium.Cartesian3(width, height, extrudeDistance);
                            if(!position) {
                                return;
                            }
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );

                    Cesium.knockout.getObservable(viewModel, 'height').subscribe(
                        function(newValue) {
                            height = Number(newValue);
                            box.box.dimensions = new Cesium.Cartesian3(width, height, 0.1);
                            dim = new Cesium.Cartesian3(width, height, extrudeDistance);
                            if(!position) {
                                return;
                            }
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );
                    Cesium.knockout.getObservable(viewModel, 'heading').subscribe(
                        function(newValue) {
                            heading = Number(newValue);
                            var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
                            var orientation = Cesium.Transforms.headingPitchRollQuaternion(boxPosition, hpr);
                            box.orientation = orientation;
                            if(!position) {
                                return;
                            }
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );
                    Cesium.knockout.getObservable(viewModel, 'pitch').subscribe(
                        function(newValue) {
                            pitch = Number(newValue);
                            var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
                            var orientation = Cesium.Transforms.headingPitchRollQuaternion(boxPosition, hpr);
                            box.orientation = orientation;
                            if(!position) {
                                return;
                            }
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );
                    Cesium.knockout.getObservable(viewModel, 'roll').subscribe(
                        function(newValue) {
                            roll = Number(newValue);
                            var hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(heading), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
                            var orientation = Cesium.Transforms.headingPitchRollQuaternion(boxPosition, hpr);
                            box.orientation = orientation;
                            if(!position) {
                                return;
                            }
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );

                    Cesium.knockout.getObservable(viewModel, 'extrudeDistance').subscribe(
                        function(newValue) {
                            extrudeDistance = Number(newValue);
                            if(hasClipped) {
                                updateClip();
                            }
                        }
                    );

                    $("#choose-clip-pos").on("click", function() {
                        startClip = true;
                        box.show = true;
                    });
                    $("#clear").on("click", function() {
                        startClip = false;
                        box.show = false;
                        for(var i = 0, j = layers.length; i < j; i++) {
                            layers[i].clearCustomClipBox();
                        };
                        viewer.entities.removeAll();
                    });

                    // 折叠参数面板
                    $(".params-setting-anchor").click(function() {
                        $(".params-setting").toggleClass("params-setting-hide");
                    });

                    function updateClip() {
                        for(var i = 0, j = layers.length; i < j; i++) {
                            layers[i].setCustomClipCross({
                                position: position,
                                dimensions: dim,
                                heading: heading,
                                pitch: pitch,
                                roll: roll,
                                extrudeDistance: extrudeDistance
                            });
                        }
                    }
                });
            }
            if (typeof Cesium !== 'undefined') {
                window.startupCalled = true;
                onload(Cesium);
            }
        </script>
    </body>

</html>