洪水淹没静态页面

guoshilong

2023-02-09 3ea9a42dfb1f6ef13a9a4c81f5843383a3be3e1c

洪水淹没静态页面

 widgets/FloodAnalysis/Widget copy2.html

New file
@@ -0,0 +1,48 @@
<div>
    <div class="analysis-header">
        <i></i> 洪水淹没分析
    </div>
    <div class="dong">
        <ul>
            <li><span>分析区域:</span><input id="dong_draw" type="button" value="绘制区域"></li>
            <li><span>最低海拔(米):</span><input type="text" id="dong_min_height"></li>
            <li><span>最高海拔(米):</span><input type="text" id="dong_max_height"></li>
            <li><span>淹没速度(米/秒):</span><input type="text" id='dong_time' value='0.5'></li>
            <li><input id='dong_start' type="button" value="开始分析"><input id='dong_delet' type="button" value="清除"></li>
        </ul>
    </div>
    <p>what why no sea</p>
    <div class="dong-echarts" id='dong_echarts'>

    </div>
    <div class='dong-progress'>
        <h2>分析结果中，请稍等...</h2>
        <span class="container">
            <span id="progress_bar"  class="h-100P bar"></span>
        </span>
    </div>
    <div class="storage-capacity-curve" id="storage_echarts">
    </div>
    <div class="flood-detail">
        <div class="flood-detail-header">
            <i></i> 洪水淹没详情
        </div>

        <div class="flood-detail-content">
            <div class="flood-detail-text">
                <div>
                    <span>0-3m淹没面积：</span><span>10km²</span>
                </div>
                <div>
                    <span>1-2m淹没面积：</span><span>20km²</span>
                </div>
                <div>
                    <span>>3m淹没面积：</span><span>22km²</span>
                </div>
            </div>
            <div class="flood-detail-button">
                <input type="button" id="flood-detail-ckxq" value="查看详情" />
            </div>
        </div>
    </div>
</div>

 widgets/FloodAnalysis/Widget copy2.js

New file
@@ -0,0 +1,642 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2022 guoshilong. All Rights Reserved.
// 模块描述:洪水淹没分析
///////////////////////////////////////////////////////////////////////////
define(['dojo/_base/declare', 'dojo/_base/lang', 'dojo/_base/array', 'dojo/_base/html', "dojo/topic", 'jimu/BaseWidget', 'dojo/on', 'dstore/Memory', 'dstore/Trackable', 'dgrid/Grid', 'dgrid/Keyboard', 'dgrid/Selection', 'dstore/RequestMemory', 'dgrid/test/data/createSyncStore', "libs/echarts/v4/echarts.min", 'libs/layer/layer.js', 'libs/turf/turf.min.js'], function (declare, lang, array, html, topic, BaseWidget, on, Memory, Trackable, Grid, Keyboard, Selection, RequestMemory, createSyncStore, echarts, layer, turf) {
    return declare([BaseWidget], {
        baseClass: 'jimu-widget-FloodAnalysis',
        name: 'FloodAnalysis',
        //人员数据点位
        peoplePositionArray: [],
        peoplePositionEntity:[],
        //绘制多边形的顶点经纬度
        polygonPositionArray: [],
        startup: function startup() {
            // 数组用于存放添加点的Id删除实体点的时候会用到
            var pointId = [];

            // 鼠标事件
            var waterEntity;
            // 点击绘制按钮开始绘制
            var that = this;
            var yanmo;
            var flag = false;
            var flagScend = false;
            // 海拔
            var altitude = [];
            var drawingMode = 'polygon';
            var activeShape;
            var boildOne = null;
            var boildTwo = null;
            var boildThree = null;
            // 向三维场景中添加的点的集合
            var tempPoints = [];

            var positions = [];
            var handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

            var shape;
            //打开页面，隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
            $('#dong_start').css('visibility', 'hidden')
            $('#dong_draw').click(function () {
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
                //隐藏详情框
                that.showDetail(false)
                that.clearData()
                $('#dong_time').val(0.5);
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //打开页面，隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
                $('#dong_start').css('visibility', 'hidden')
                //if (handler != null) handler.destroy();
                handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

                function drawShape(positionData) {
                    if (drawingMode == 'polygon') {
                        shape = that.map.entities.add({
                            polygon: {
                                hierarchy: positionData,
                                material: Cesium.Color.fromBytes(252, 193, 10, 130)
                            }
                        });
                    }
                    that.fixedShape = shape;

                    return shape;
                }

                clearInterval(yanmo);
                yanmo = null;
                positions = [];
                var polygon = null;
                var cartesian = null;
                var floatingPoint; //浮动点
                var activeShapePoints = [];
                var active = null;
                tempPoints = [];
                altitude = [];
                that.map.scene.globe.depthTestAgainstTerrain = false;

                // handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);
                // 取消双击事件-追踪该位置
                that.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

                // 鼠标左键点击事件
                handler.setInputAction(function (movement) {
                    // 给鼠标点击增加的点添加随机的ID便于删除
                    var randomId = Math.random() * 100 + 8 + (Math.random() * 500 + 102);

                    var ray = that.map.camera.getPickRay(movement.position);
                    cartesian = that.map.scene.globe.pick(ray, that.map.scene);
                    if (positions.length == 0) {
                        positions.push(cartesian.clone());
                        flagScend = true;
                    }
                    // positions.pop();
                    positions.push(cartesian);
                    // 向三维场景中添加点
                    var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    altitude.push(Math.round(cartographic.height));
                    if (Cesium.defined(cartesian)) {
                        if (activeShapePoints.length === 0) {
                            floatingPoint = that.map.entities.add({
                                // 给实体点添加ID
                                id: '1a-2b-3c',
                                name: '多边形面积',
                                position: positions[positions.length - 1],
                                point: {
                                    pixelSize: 6,
                                    color: Cesium.Color.RED,
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                                }
                            });
                            pointId.push('1a-2b-3c');

                            activeShapePoints.push(cartesian);
                            var dynamicPositions = new Cesium.CallbackProperty(function () {
                                if (drawingMode === 'polygon') {
                                    return new Cesium.PolygonHierarchy(activeShapePoints);
                                }
                                return activeShapePoints;
                            }, false);
                            active = drawShape(dynamicPositions); //绘制动态图
                        }
                        activeShapePoints.push(cartesian);
                        floatingPoint = that.map.entities.add({
                            // 给实体点添加ID
                            id: randomId,
                            name: '多边形面积',
                            position: positions[positions.length - 1],
                            point: {
                                pixelSize: 6,
                                color: Cesium.Color.RED,
                                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                            }
                        });

                        pointId.push(randomId);
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                // 鼠标移动事件
                handler.setInputAction(function (event) {
                    if (positions.length == 0) {
                        that.map.entities.remove(boildOne);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildOne = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击开始绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length == 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildTwo = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length > 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        that.map.entities.remove(boildThree);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildThree = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点,右键点击完成绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(120, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }

                    if (Cesium.defined(floatingPoint)) {
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        if (Cesium.defined(newPosition)) {
                            floatingPoint.position.setValue(newPosition);
                            activeShapePoints.pop();
                            activeShapePoints.push(newPosition);
                        }
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                // 鼠标右键点击事件
                handler.setInputAction(function (movement) {
                    var cartographic = Cesium.Cartographic.fromCartesian(that.map.scene.globe.pick(that.map.camera.getPickRay(movement.position), that.map.scene));
                    // 向三维场景中添加点
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    that.polygonPositionArray = tempPoints
                    positions.push(activeShapePoints[activeShapePoints.length - 1]);
                    if (positions.length >= 2) {
                        if (!Cesium.defined(polygon)) {
                            polygon = new PolygonPrimitive(positions);
                        } else {
                            positions.pop();
                            positions.push(cartesian);
                        }
                    }
                    if (activeShapePoints.length) {
                        activeShape = drawShape(activeShapePoints); //绘制最终图
                    }
                    // that.map.entities.remove(floatingPoint);
                    that.map.entities.remove(active);
                    that.map.entities.remove(boildOne);
                    that.map.entities.remove(boildTwo);
                    that.map.entities.remove(boildThree);
                    if (!flagScend) return;
                    flagScend = false;
                    altitude.push(Math.round(cartographic.height));
                    altitude.sort(function (a, b) {
                        if (a > b) return 1; else if (a < b) return -1; else return 0;
                    });
                    $('#dong_max_height').val(altitude[altitude.length - 1]);
                    $('#dong_min_height').val(altitude[0]);
                    handler.destroy();
                    flag = true;
                    //结束绘制显示分析按钮
                    $('#dong_start').css('visibility', 'visible')
                    return;
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

                var PolygonPrimitive = function () {
                    function _(positions) {
                        this.options = {
                            name: '多边形',
                            polygon: {
                                hierarchy: [],
                                material: Cesium.Color.WHITE.withAlpha(0)
                            }
                        };

                        this.positions = positions;
                        this._init();
                    }

                    _.prototype._init = function () {
                        var _self = this;
                        //实时更新polygon.hierarchy
                        this.options.polygon.hierarchy = new Cesium.CallbackProperty(function () {
                            return new Cesium.PolygonHierarchy(positions);
                        }, false);
                        waterEntity = that.map.entities.add(this.options);
                        that.fixedWaterEntity = waterEntity;
                    };
                    return _;
                }();
            });

            // 点击开始分析按钮，开始分析
            $('#dong_start').click(function () {
                //宽度设置为0 隐藏进度条
                $('.dong-progress .container #progress_bar').width(0);
                //隐藏div
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                if (flag != true) {
                    if (yanmo != null) {
                        layer.msg('请等待绘制完成', {

                            time: 1000
                        });
                        return;
                    }
                    layer.msg('请先选择绘制区域', {

                        time: 1000
                    });
                    return;
                }
                // 提取坐标信息
                var list = waterEntity.polygon.hierarchy.getValue().positions;
                // 存放坐标信息，做请求数据使用
                var echartRings = [[]];

                // 处理坐标信息，将世界坐标转换成经纬度
                for (var i = 1; i < list.length; i++) {
                    var cartographic = Cesium.Cartographic.fromCartesian(list[i]);
                    var lat = Cesium.Math.toDegrees(cartographic.latitude);
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    echartRings[0].push([lng, lat]);
                }

                that.map.entities.remove(activeShape);
                // 最高海拔
                var maxHet = Number($('#dong_max_height').val());
                // 最低海拔
                var minHet = Number($('#dong_min_height').val());
                // 每秒上升海拔
                var time = Number($('#dong_time').val());
                // 动态获取最低海拔
                $('#dong_min_height').change(function () {
                    minHet = $(this).val();
                });

                // 总淹没体积
                var textArea = parseInt(getArea(tempPoints) * (maxHet - minHet) / 100000);
                var seriesData = [];
                var altitude = (maxHet - minHet) / 20;
                var altitudeHet = 0;

                // 1秒后开始进入淹没分析
                setTimeout(function () {
                    flag = false;
                    if (waterEntity) {
                        that.map.scene.globe.depthTestAgainstTerrain = true;
                        waterEntity.polygon.perPositionHeight = true, waterEntity.polygon.material = Cesium.Color.fromBytes(33, 122, 193, 220);
                        var h = minHet - 50 || altitude[0] - 50;
                        waterEntity.polygon.extrudedHeight = minHet - 50 || altitude[0] - 50; //需要提前设置 不然会全部出现
                        yanmo = setInterval(function () {
                            h = h + time || 1;
                            if (h >= (maxHet || altitude[altitude.length - 1])) {
                                h = maxHet || altitude[altitude.length - 1]; //给个最大值
                                waterEntity.polygon.extrudedHeight = h;
                                clearTimeout(yanmo);
                                flag = true;

                                // //显示div
                                // $('.dong-progress').stop().show();
                                // // 总长度
                                // var totalWidth = $('.dong-progress .container').width();
                                // // 过度长度
                                // var excessiveWidth = totalWidth / 100;
                                // var watchWidth = 0;
                                // // 进度条的定时器
                                // var proTime = setInterval(function () {
                                //     watchWidth += excessiveWidth;
                                //     if (watchWidth > totalWidth) {
                                //         watchWidth = totalWidth;
                                //     }
                                //     $('.dong-progress .container #progress_bar').width(watchWidth);
                                // }, 22);

                                return;
                            }
                            waterEntity.polygon.extrudedHeight = h;

                        }, 100);
                        that.showDetail(true)

                    }
                }, 1000);

            });

            $('#dong_delet').click(function () {
                that.showDetail(false)
                that.clearData()
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);

                handler.destroy();
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
                $('#dong_start').css('visibility', 'hidden')
                clearInterval(yanmo);
                yanmo = null;
            });

            $('#flood-detail-ckxq').click(function () {
                that.floodAnalysisPopup()
            })

            var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)
            var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度
            function getArea(points) {
                var res = 0;
                //拆分三角曲面
                for (var i = 0; i < points.length - 2; i++) {
                    var j = (i + 1) % points.length;
                    var k = (i + 2) % points.length;
                    var totalAngle = Angle(points[i], points[j], points[k]);

                    var dis_temp1 = distance(positions[i], positions[j]);
                    var dis_temp2 = distance(positions[j], positions[k]);
                    res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));
                }

                return (res / 1000000.0).toFixed(4);
            }

            /*角度*/
            function Angle(p1, p2, p3) {
                var bearing21 = Bearing(p2, p1);
                var bearing23 = Bearing(p2, p3);
                var angle = bearing21 - bearing23;
                if (angle < 0) {
                    angle += 360;
                }
                return angle;
            }

            /*方向*/
            function Bearing(from, to) {
                var lat1 = from.lat * radiansPerDegree;
                var lon1 = from.lon * radiansPerDegree;
                var lat2 = to.lat * radiansPerDegree;
                var lon2 = to.lon * radiansPerDegree;
                var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
                if (angle < 0) {
                    angle += Math.PI * 2.0;
                }
                angle = angle * degreesPerRadian; //角度
                return angle;
            }

            //计算距离
            function distance(point1, point2) {
                var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
                var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
                /**根据经纬度计算出距离**/
                var geodesic = new Cesium.EllipsoidGeodesic();
                geodesic.setEndPoints(point1cartographic, point2cartographic);
                var s = geodesic.surfaceDistance;
                //返回两点之间的距离
                s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
                return s;
            }

            this.closeDeleteEntity = function () {
                handler.destroy();
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
            };
        },

        onOpen: function onOpen() {
            //面板打开的时候触发 （when open this panel trigger）
            this.map.scene.globe.baseColor = Cesium.Color.BLACK;

            //初始化点
            this.addPoint()
            //切换底图
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');

            //设置地图初始位置
            this.map.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
            });



        },

        onClose: function onClose() {
            this.closeDeleteEntity();
            //面板关闭的时候触发 （when this panel is closed trigger）

            $('.dong-progress .container #progress_bar').width(0);
            $('.dong-progress').stop().hide();
            $('#dong_echarts').stop().hide();
            $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
            //隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
            $('#dong_start').css('visibility', 'hidden')
            //隐藏详情框
            this.showDetail(false)
            this.peoplePositionEntity.forEach(e=>{
                this.map.entities.remove(e)
            })
            this.map.scene.globe.baseColor = Cesium.Color.WHITE;
        },

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

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

        resize: function resize() {
        },

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

        deleteEntitys: function deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity) {
            if (pointId !== []) {
                for (var i = 0; i < pointId.length; i++) {
                    that.map.entities.removeById(pointId[i]);
                }

                pointId = [];
            }
            that.map.entities.remove(shape);
            that.map.entities.remove(boildOne);
            that.map.entities.remove(boildTwo);
            that.map.entities.remove(boildThree);
            if (waterEntity != null) {
                that.map.entities.removeById(waterEntity._id);
            }
        },

        //添加点
        addPoint: function () {
            const url = './widgets/FloodAnalysis/data.json'
            this.getJsonUrl(url)
        },

        //获取json对象，测试用
        getJsonUrl: function getJsonUrl(url) {
            var self = this;
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'get',
                success: function success(data) {
                    const viewer = self.map
                    var dataArray = data.data
                    dataArray.forEach(e => {
                        e.house = Number(e.house)
                        e.people = Number(e.people)
                        e.area = Number(e.area)
                        e.money = Number(e.money)
                    })
                    self.peoplePositionArray = []
                    self.peoplePositionArray = dataArray
                    for (let i = 0; i < dataArray.length; i++) {
                        var temp = viewer.entities.add({
                            position: Cesium.Cartesian3.fromDegrees(dataArray[i].LGTD, dataArray[i].LTTD),
                            point: {
                                color: Cesium.Color.RED,
                                pixelSize: 16,
                                //防止地形遮挡住点
                                disableDepthTestDistance: Number.POSITIVE_INFINITY,
                                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                            },
                        });
                        self.peoplePositionEntity.push(temp)
                    }
                }
            });
        },

        //是否显示详情框
        showDetail: function (show) {
            //显示详情
            if (show) {
                $('.flood-detail').show()
            } else {
                $('.flood-detail').hide()
            }
        },

        //洪水分析弹窗
        floodAnalysisPopup: function () {
            var self = this
            var inPolygon = []
            for (let i = 0; i < this.peoplePositionArray.length; i++) {
                let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                if (isIn) {
                    inPolygon.push(this.peoplePositionArray[i])
                }
            }
            var inPolygonStr = JSON.stringify(inPolygon)

            var url = './corelib/common/popup/floodAnalysis.html';
            var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 750) / 2;
            var left = ($(window).width() - 1300 - 340) / 2 + 340;
            layer.open({
                title: '评估分析',
                type: 2,
                maxmin: false, //开启最大化最小化按钮
                area: ['1100px', '800px'],
                skin: 'floodAnalysis',
                offset: [top, left],
                content: urlEvaluate + "?data=" + encodeURIComponent(inPolygonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                id: "floodAnalysisLayer",
                closeBtn: 1,
            });
        },

        //判断点是否在多边形内部
        isPointInPolygon: function (point) {
            //获取经纬度
            var polygonPosition = this.polygonPositionArray
            //turf要求首尾闭合
            var turfPolygon = []
            polygonPosition.forEach(e => {
                var temp = [e.lon, e.lat]
                turfPolygon.push(temp)
            })
            turfPolygon.push([polygonPosition[0].lon, polygonPosition[0].lat])

            var poly = turf.polygon([turfPolygon])
            var pt = turf.point([point.LGTD, point.LTTD])
            return turf.booleanPointInPolygon(pt, poly)
        },

        //清除框内数据
        clearData:function (){
            $('#dong_max_height').val(0);
            $('#dong_min_height').val(0);
        },
    });
});

 widgets/FloodAnalysis/Widget.html

@@ -1,48 +1,84 @@
<div>
    <div class="analysis-header">
        <i></i> 洪水淹没分析
    <div class="flood-top">
        <input class="analysis-button" type="button" value="洪水淹没分析" />
        <input class="history-button" type="button" value="历史风险图" />
    </div>
    <div class="dong">
        <ul>
            <li><span>分析区域:</span><input id="dong_draw" type="button" value="绘制区域"></li>
            <li><span>最低海拔(米):</span><input type="text" id="dong_min_height"></li>
            <li><span>最高海拔(米):</span><input type="text" id="dong_max_height"></li>
            <li><span>淹没速度(米/秒):</span><input type="text" id='dong_time' value='0.5'></li>
            <li><input id='dong_start' type="button" value="开始分析"><input id='dong_delet' type="button" value="清除"></li>
        </ul>
    </div>
    <p>what why no sea</p>
    <div class="dong-echarts" id='dong_echarts'>

    </div>
    <div class='dong-progress'>
        <h2>分析结果中，请稍等...</h2>
        <span class="container">
            <span id="progress_bar"  class="h-100P bar"></span>
        </span>
    </div>
    <div class="storage-capacity-curve" id="storage_echarts">
    </div>
    <div class="flood-detail">
        <div class="flood-detail-header">
            <i></i> 洪水淹没详情
        </div>

        <div class="flood-detail-content">
            <div class="flood-detail-text">
                <div>
                    <span>0-3m淹没面积：</span><span>10km²</span>
    <div class="flood-middle">
        <div class="flood-analysis">
            <div class="select-box">
                <div class="hd">
                    <label for="hd-select">河段</label>
                    <select id="hd-select" class="hd-select" name="hd" value="1">
                    </select>
                    <!--做模糊查询选择框时使用-->
<!--                    </select>-->
<!--                    <input type="text" name="hd-input" id="hd-input" class="hd-input" placeholder="请选择或输入" />-->
<!--                    <select name="hd-select" id="hd-select"  size="10" style="display:none;">-->
<!--                        <option value="1">1</option>-->
<!--                    </select>-->
                </div>
                <div>
                    <span>1-2m淹没面积：</span><span>20km²</span>
                <div class="smx">
                    <label for="smx-select">水面线</label>
                    <select id="smx-select" class="smx-select" name="smx">
                    </select>
                </div>
                <div>
                    <span>>3m淹没面积：</span><span>22km²</span>
                <div class="sw">
                    <label for="sw-input">水位</label>
                    <input id="sw-input" class="sw-input" type="text" name="word" autocomplete="off" maxlength="256"/>
                </div>
                <span class="tip">正数为水位上涨，负数为水位下降</span>
            </div>
            <div class="flood-detail-button">
                <input type="button" id="flood-detail-ckxq" value="查看详情" />
            <div class="radio-box">
                <input id="realtime" type="radio" name="middleRadio" value="realtime" checked='checked'>实时
                <input id="forecast" type="radio" name="middleRadio" value="forecast">预测
            </div>
            <div class="table-box">
                <table>
                    <thead class="flood-table-thead table-thead">
                    <tr>
                        <th>
                            <div>位置</div>
                        </th>
                        <th>
                            <div>起点距</div>
                        </th>
                        <th>
                            <div>经纬度</div>
                        </th>
                        <th>
                            <div>水面线</div>
                        </th>
                        <th>
                            <div>水位</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="flood-tbody" class="table-tbody flood-tbody"></tbody>
                </table>
            </div>
        </div>
        <div class="flood-history">
            <div class="search-box">
                <label for="search-name">名称：</label>
                <input id="search-name" class="search-name-input" type="text" name="word" autocomplete="off" maxlength="256" placeholder="请输入筛选名称"/>
                <input class="search-button" type="button" value="查  询" />
            </div>
            <div class="table-box">
                <table>
                    <thead class="flood-table-thead table-thead">
                    <tr>
                        <th style="width: 85px;">

                        </th>
                        <th>
                            <div>名称</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody id="flood-history-tbody" class="table-tbody flood-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="flood-bottom"></div>
</div>

 widgets/FloodAnalysis/Widget.js

@@ -8,468 +8,84 @@
        name: 'FloodAnalysis',
        //人员数据点位
        peoplePositionArray: [],
        peoplePositionEntity:[],
        peoplePositionEntity: [],
        //绘制多边形的顶点经纬度
        polygonPositionArray: [],
        //html元素
        analysisBtn: null,
        historyBtn: null,
        divFloodAnalysis: null,
        divFloodHistory: null,
        topRadioGroup: null,
        middleRadioGroup: null,
        hdSelect: null,
        smxSelect: null,
        divSwInput: null,
        spanTip: null,
        //河段下拉列表
        hdDataList: [],
        startup: function startup() {
            // 数组用于存放添加点的Id删除实体点的时候会用到
            var pointId = [];

            // 鼠标事件
            var waterEntity;
            // 点击绘制按钮开始绘制
            var that = this;
            var yanmo;
            var flag = false;
            var flagScend = false;
            // 海拔
            var altitude = [];
            var drawingMode = 'polygon';
            var activeShape;
            var boildOne = null;
            var boildTwo = null;
            var boildThree = null;
            // 向三维场景中添加的点的集合
            var tempPoints = [];

            var positions = [];
            var handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

            var shape;
            //打开页面，隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
            $('#dong_start').css('visibility', 'hidden')
            $('#dong_draw').click(function () {
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
                //隐藏详情框
                that.showDetail(false)
                that.clearData()
                $('#dong_time').val(0.5);
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //打开页面，隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
                $('#dong_start').css('visibility', 'hidden')
                //if (handler != null) handler.destroy();
                handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);

                function drawShape(positionData) {
                    if (drawingMode == 'polygon') {
                        shape = that.map.entities.add({
                            polygon: {
                                hierarchy: positionData,
                                material: Cesium.Color.fromBytes(252, 193, 10, 130)
                            }
                        });
                    }
                    that.fixedShape = shape;

                    return shape;
            var self = this
            this.bindHtmlElement()
            this.middleRadioGroup.change(function () {
                if (this.value == "realtime") {
                    self.divSwInput.hide()
                    self.spanTip.hide()
                } else {
                    self.divSwInput.show()
                    self.spanTip.show()
                }

                clearInterval(yanmo);
                yanmo = null;
                positions = [];
                var polygon = null;
                var cartesian = null;
                var floatingPoint; //浮动点
                var activeShapePoints = [];
                var active = null;
                tempPoints = [];
                altitude = [];
                that.map.scene.globe.depthTestAgainstTerrain = false;

                // handler = new Cesium.ScreenSpaceEventHandler(that.map.scene.canvas);
                // 取消双击事件-追踪该位置
                that.map.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

                // 鼠标左键点击事件
                handler.setInputAction(function (movement) {
                    // 给鼠标点击增加的点添加随机的ID便于删除
                    var randomId = Math.random() * 100 + 8 + (Math.random() * 500 + 102);

                    var ray = that.map.camera.getPickRay(movement.position);
                    cartesian = that.map.scene.globe.pick(ray, that.map.scene);
                    if (positions.length == 0) {
                        positions.push(cartesian.clone());
                        flagScend = true;
                    }
                    // positions.pop();
                    positions.push(cartesian);
                    // 向三维场景中添加点
                    var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    altitude.push(Math.round(cartographic.height));
                    if (Cesium.defined(cartesian)) {
                        if (activeShapePoints.length === 0) {
                            floatingPoint = that.map.entities.add({
                                // 给实体点添加ID
                                id: '1a-2b-3c',
                                name: '多边形面积',
                                position: positions[positions.length - 1],
                                point: {
                                    pixelSize: 6,
                                    color: Cesium.Color.RED,
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                                }
                            });
                            pointId.push('1a-2b-3c');

                            activeShapePoints.push(cartesian);
                            var dynamicPositions = new Cesium.CallbackProperty(function () {
                                if (drawingMode === 'polygon') {
                                    return new Cesium.PolygonHierarchy(activeShapePoints);
                                }
                                return activeShapePoints;
                            }, false);
                            active = drawShape(dynamicPositions); //绘制动态图
                        }
                        activeShapePoints.push(cartesian);
                        floatingPoint = that.map.entities.add({
                            // 给实体点添加ID
                            id: randomId,
                            name: '多边形面积',
                            position: positions[positions.length - 1],
                            point: {
                                pixelSize: 6,
                                color: Cesium.Color.RED,
                                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                            }
                        });

                        pointId.push(randomId);
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                // 鼠标移动事件
                handler.setInputAction(function (event) {
                    if (positions.length == 0) {
                        that.map.entities.remove(boildOne);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildOne = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击开始绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length == 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildTwo = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(80, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }
                    if (positions.length > 2) {
                        that.map.entities.remove(boildOne);
                        that.map.entities.remove(boildTwo);
                        that.map.entities.remove(boildThree);
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        boildThree = that.map.entities.add({
                            position: newPosition,
                            label: {
                                show: true,
                                text: '单击增加点,右键点击完成绘制',
                                font: '16px',
                                pixelOffset: new Cesium.Cartesian2(120, 0),
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromBytes(126, 126, 126, 210)
                            }
                        });
                    }

                    if (Cesium.defined(floatingPoint)) {
                        var pick1 = new Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
                        var newPosition = that.map.scene.globe.pick(viewer.camera.getPickRay(pick1), that.map.scene);
                        if (Cesium.defined(newPosition)) {
                            floatingPoint.position.setValue(newPosition);
                            activeShapePoints.pop();
                            activeShapePoints.push(newPosition);
                        }
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                // 鼠标右键点击事件
                handler.setInputAction(function (movement) {
                    var cartographic = Cesium.Cartographic.fromCartesian(that.map.scene.globe.pick(that.map.camera.getPickRay(movement.position), that.map.scene));
                    // 向三维场景中添加点
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    var heightString = cartographic.height;
                    tempPoints.push({
                        lon: longitudeString,
                        lat: latitudeString,
                        hei: heightString
                    });
                    that.polygonPositionArray = tempPoints
                    positions.push(activeShapePoints[activeShapePoints.length - 1]);
                    if (positions.length >= 2) {
                        if (!Cesium.defined(polygon)) {
                            polygon = new PolygonPrimitive(positions);
                        } else {
                            positions.pop();
                            positions.push(cartesian);
                        }
                    }
                    if (activeShapePoints.length) {
                        activeShape = drawShape(activeShapePoints); //绘制最终图
                    }
                    // that.map.entities.remove(floatingPoint);
                    that.map.entities.remove(active);
                    that.map.entities.remove(boildOne);
                    that.map.entities.remove(boildTwo);
                    that.map.entities.remove(boildThree);
                    if (!flagScend) return;
                    flagScend = false;
                    altitude.push(Math.round(cartographic.height));
                    altitude.sort(function (a, b) {
                        if (a > b) return 1; else if (a < b) return -1; else return 0;
                    });
                    $('#dong_max_height').val(altitude[altitude.length - 1]);
                    $('#dong_min_height').val(altitude[0]);
                    handler.destroy();
                    flag = true;
                    //结束绘制显示分析按钮
                    $('#dong_start').css('visibility', 'visible')
                    return;
                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

                var PolygonPrimitive = function () {
                    function _(positions) {
                        this.options = {
                            name: '多边形',
                            polygon: {
                                hierarchy: [],
                                material: Cesium.Color.WHITE.withAlpha(0)
                            }
                        };

                        this.positions = positions;
                        this._init();
                    }

                    _.prototype._init = function () {
                        var _self = this;
                        //实时更新polygon.hierarchy
                        this.options.polygon.hierarchy = new Cesium.CallbackProperty(function () {
                            return new Cesium.PolygonHierarchy(positions);
                        }, false);
                        waterEntity = that.map.entities.add(this.options);
                        that.fixedWaterEntity = waterEntity;
                    };
                    return _;
                }();
            });

            // 点击开始分析按钮，开始分析
            $('#dong_start').click(function () {
                //宽度设置为0 隐藏进度条
                $('.dong-progress .container #progress_bar').width(0);
                //隐藏div
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                if (flag != true) {
                    if (yanmo != null) {
                        layer.msg('请等待绘制完成', {

                            time: 1000
                        });
                        return;
                    }
                    layer.msg('请先选择绘制区域', {

                        time: 1000
                    });
                    return;
                }
                // 提取坐标信息
                var list = waterEntity.polygon.hierarchy.getValue().positions;
                // 存放坐标信息，做请求数据使用
                var echartRings = [[]];

                // 处理坐标信息，将世界坐标转换成经纬度
                for (var i = 1; i < list.length; i++) {
                    var cartographic = Cesium.Cartographic.fromCartesian(list[i]);
                    var lat = Cesium.Math.toDegrees(cartographic.latitude);
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    echartRings[0].push([lng, lat]);
                }

                that.map.entities.remove(activeShape);
                // 最高海拔
                var maxHet = Number($('#dong_max_height').val());
                // 最低海拔
                var minHet = Number($('#dong_min_height').val());
                // 每秒上升海拔
                var time = Number($('#dong_time').val());
                // 动态获取最低海拔
                $('#dong_min_height').change(function () {
                    minHet = $(this).val();
                });

                // 总淹没体积
                var textArea = parseInt(getArea(tempPoints) * (maxHet - minHet) / 100000);
                var seriesData = [];
                var altitude = (maxHet - minHet) / 20;
                var altitudeHet = 0;

                // 1秒后开始进入淹没分析
                setTimeout(function () {
                    flag = false;
                    if (waterEntity) {
                        that.map.scene.globe.depthTestAgainstTerrain = true;
                        waterEntity.polygon.perPositionHeight = true, waterEntity.polygon.material = Cesium.Color.fromBytes(33, 122, 193, 220);
                        var h = minHet - 50 || altitude[0] - 50;
                        waterEntity.polygon.extrudedHeight = minHet - 50 || altitude[0] - 50; //需要提前设置 不然会全部出现
                        yanmo = setInterval(function () {
                            h = h + time || 1;
                            if (h >= (maxHet || altitude[altitude.length - 1])) {
                                h = maxHet || altitude[altitude.length - 1]; //给个最大值
                                waterEntity.polygon.extrudedHeight = h;
                                clearTimeout(yanmo);
                                flag = true;

                                // //显示div
                                // $('.dong-progress').stop().show();
                                // // 总长度
                                // var totalWidth = $('.dong-progress .container').width();
                                // // 过度长度
                                // var excessiveWidth = totalWidth / 100;
                                // var watchWidth = 0;
                                // // 进度条的定时器
                                // var proTime = setInterval(function () {
                                //     watchWidth += excessiveWidth;
                                //     if (watchWidth > totalWidth) {
                                //         watchWidth = totalWidth;
                                //     }
                                //     $('.dong-progress .container #progress_bar').width(watchWidth);
                                // }, 22);

                                return;
                            }
                            waterEntity.polygon.extrudedHeight = h;

                        }, 100);
                        that.showDetail(true)

                    }
                }, 1000);

            });

            $('#dong_delet').click(function () {
                that.showDetail(false)
                that.clearData()
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);

                handler.destroy();
                $('.dong-progress .container #progress_bar').width(0);
                $('.dong-progress').stop().hide();
                $('#dong_echarts').stop().hide();
                $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
                //隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
                $('#dong_start').css('visibility', 'hidden')
                clearInterval(yanmo);
                yanmo = null;
            });

            $('#flood-detail-ckxq').click(function () {
                that.floodAnalysisPopup()
            })

            var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)
            var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度
            function getArea(points) {
                var res = 0;
                //拆分三角曲面
                for (var i = 0; i < points.length - 2; i++) {
                    var j = (i + 1) % points.length;
                    var k = (i + 2) % points.length;
                    var totalAngle = Angle(points[i], points[j], points[k]);
            this.analysisBtn.click(function () {
                self.analysisBtn.addClass('choose-button')
                self.analysisBtn.removeClass('unchoose-button')
                self.historyBtn.addClass('unchoose-button')
                self.divFloodHistory.hide()
                self.divFloodAnalysis.show()
            })

                    var dis_temp1 = distance(positions[i], positions[j]);
                    var dis_temp2 = distance(positions[j], positions[k]);
                    res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));
                }
            this.historyBtn.click(function () {
                self.historyBtn.addClass('choose-button')
                self.historyBtn.removeClass('unchoose-button')
                self.analysisBtn.addClass('unchoose-button')
                self.divFloodAnalysis.hide()
                self.divFloodHistory.show()
            })

                return (res / 1000000.0).toFixed(4);
            }
            // $('#hd-input').focus(function () {
            //     $("#hd-select").css({"display": ""});
            // })
            //
            // $('#hd-input').blur(function () {
            //     $("#hd-select").css({"display": "none"});
            // })
            //
            //
            // $('#hd-select').change(function () {
            //     console.log($('#hd-select').find("option:selected").text(), "----")
            //     $("#hd-input").val($('#hd-select').find("option:selected").text());
            //     $("#hd-select").css({"display": "none"});
            // })
            $('#hd-select').change(function () {
                var selected = JSON.parse($(this).val())
                self.getSmxData(selected.river_code,selected.default_smx)
            })
            $('#smx-select').change(function () {
                var selected = JSON.parse($(this).val())
                console.log(selected)
                self.getPointData(selected.smxcode)
            })

            /*角度*/
            function Angle(p1, p2, p3) {
                var bearing21 = Bearing(p2, p1);
                var bearing23 = Bearing(p2, p3);
                var angle = bearing21 - bearing23;
                if (angle < 0) {
                    angle += 360;
                }
                return angle;
            }

            /*方向*/
            function Bearing(from, to) {
                var lat1 = from.lat * radiansPerDegree;
                var lon1 = from.lon * radiansPerDegree;
                var lat2 = to.lat * radiansPerDegree;
                var lon2 = to.lon * radiansPerDegree;
                var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
                if (angle < 0) {
                    angle += Math.PI * 2.0;
                }
                angle = angle * degreesPerRadian; //角度
                return angle;
            }

            //计算距离
            function distance(point1, point2) {
                var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
                var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
                /**根据经纬度计算出距离**/
                var geodesic = new Cesium.EllipsoidGeodesic();
                geodesic.setEndPoints(point1cartographic, point2cartographic);
                var s = geodesic.surfaceDistance;
                //返回两点之间的距离
                s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
                return s;
            }

            this.closeDeleteEntity = function () {
                handler.destroy();
                that.deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity);
            };
        },

        onOpen: function onOpen() {
            this.init()
            //面板打开的时候触发 （when open this panel trigger）
            this.map.scene.globe.baseColor = Cesium.Color.BLACK;

            //初始化点
            this.addPoint()
            // this.addPoint()
            //切换底图
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[0]).children('div:eq(0)').trigger('click');
            $($('div.cesium-viewer').find('.cesium-baseLayerPicker-choices')[1]).children('div:eq(2)').trigger('click');
@@ -479,23 +95,11 @@
                destination: Cesium.Cartesian3.fromDegrees(116.016905, 25.884684, 10000),
            });



        },

        onClose: function onClose() {
            this.closeDeleteEntity();
            //面板关闭的时候触发 （when this panel is closed trigger）

            $('.dong-progress .container #progress_bar').width(0);
            $('.dong-progress').stop().hide();
            $('#dong_echarts').stop().hide();
            $('.jimu-widget-AnalysisOfBarrierLake p').stop().hide();
            //隐藏分析按钮，防止点击绘制区域还未绘制完成时点击分析引发bug
            $('#dong_start').css('visibility', 'hidden')
            //隐藏详情框
            this.showDetail(false)
            this.peoplePositionEntity.forEach(e=>{
            this.peoplePositionEntity.forEach(e => {
                this.map.entities.remove(e)
            })
            this.map.scene.globe.baseColor = Cesium.Color.WHITE;
@@ -519,23 +123,6 @@
            this.inherited(arguments);
        },

        deleteEntitys: function deleteEntitys(that, pointId, shape, boildOne, boildTwo, boildThree, waterEntity) {
            if (pointId !== []) {
                for (var i = 0; i < pointId.length; i++) {
                    that.map.entities.removeById(pointId[i]);
                }

                pointId = [];
            }
            that.map.entities.remove(shape);
            that.map.entities.remove(boildOne);
            that.map.entities.remove(boildTwo);
            that.map.entities.remove(boildThree);
            if (waterEntity != null) {
                that.map.entities.removeById(waterEntity._id);
            }
        },

        //添加点
        addPoint: function () {
            const url = './widgets/FloodAnalysis/data.json'
@@ -543,7 +130,7 @@
        },

        //获取json对象，测试用
        getJsonUrl: function getJsonUrl(url) {
        getJsonUrl: function (url) {
            var self = this;
            $.ajax({
                url: url,
@@ -577,66 +164,107 @@
            });
        },

        //是否显示详情框
        showDetail: function (show) {
            //显示详情
            if (show) {
                $('.flood-detail').show()
            } else {
                $('.flood-detail').hide()
            }
        //绑定html元素，方便操作
        bindHtmlElement: function () {
            this.analysisBtn = $('.analysis-button')
            this.historyBtn = $('.history-button')
            this.divFloodAnalysis = $('.flood-analysis')
            this.divFloodHistory = $('.flood-history')
            this.middleRadioGroup = $('input[type=radio][name=middleRadio]')
            this.hdSelect = $('#hd-select')
            this.smxSelect = $('#smx-select')
            this.divSwInput = $('.sw')
            this.spanTip = $('.tip')
        },

        //洪水分析弹窗
        floodAnalysisPopup: function () {
            var self = this
            var inPolygon = []
            for (let i = 0; i < this.peoplePositionArray.length; i++) {
                let isIn = this.isPointInPolygon(this.peoplePositionArray[i])
                if (isIn) {
                    inPolygon.push(this.peoplePositionArray[i])
                }
            }
            var inPolygonStr = JSON.stringify(inPolygon)
        //初始化
        init() {
            //重置html元素状态
            this.divSwInput.hide()
            this.spanTip.hide()
            this.divFloodHistory.hide()
            this.divFloodAnalysis.show()

            var url = './corelib/common/popup/floodAnalysis.html';
            var urlEvaluate = './corelib/common/popup/evaluateAnalysis.html'
            var top = ($(window).height() - 750) / 2;
            var left = ($(window).width() - 1300 - 340) / 2 + 340;
            layer.open({
                title: '评估分析',
                type: 2,
                maxmin: false, //开启最大化最小化按钮
                area: ['1100px', '800px'],
                skin: 'floodAnalysis',
                offset: [top, left],
                content: urlEvaluate + "?data=" + encodeURIComponent(inPolygonStr),//使用encodeURIComponent转码，避免中文字符乱码，避免url截取错误
                id: "floodAnalysisLayer",
                closeBtn: 1,
            this.analysisBtn.addClass('choose-button')
            this.historyBtn.removeClass('choose-button')
            this.historyBtn.addClass('unchoose-button')

            this.getHdData()
        },

        //获取河段下拉数据
        getHdData() {
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/riverway/selectName?name=%E6%B0%B4"
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {},
                success: function (res) {
                    let data = res.data
                    $("#hd-select").find("option").remove();//添加新值 删除旧值
                    $("#hd-select").prepend("<option value=''>请选择</option>");//添加第一个option值
                    data.forEach(e => {
                        $("#hd-select").append("<option value='" + JSON.stringify(e) + "'>" + e.riverway + "</option>");
                    })
                }
            });
        },

        //判断点是否在多边形内部
        isPointInPolygon: function (point) {
            //获取经纬度
            var polygonPosition = this.polygonPositionArray
            //turf要求首尾闭合
            var turfPolygon = []
            polygonPosition.forEach(e => {
                var temp = [e.lon, e.lat]
                turfPolygon.push(temp)
            })
            turfPolygon.push([polygonPosition[0].lon, polygonPosition[0].lat])
        //获取水面线数据
        getSmxData(hdid,defaultId) {
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/waterline/selectName"
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    hdid:hdid
                },
                success: function (res) {
                    let data = res.data
                    $("#smx-select").find("option").remove();//添加新值 删除旧值
                    data.forEach(e => {
                        // $("#chapterName").prepend("<option value='无'>无</option>");//添加第一个option值
                        $("#smx-select").append("<option value="+ e.smxcode +">" + e.waterline + "</option>");

            var poly = turf.polygon([turfPolygon])
            var pt = turf.point([point.LGTD, point.LTTD])
            return turf.booleanPointInPolygon(pt, poly)
                        if (e.smxcode == defaultId){
                            $("#smx-select option[value="+e.smxcode + "] ").attr("selected",true)
                            console.log($('#smx-select'))
                            $('#smx-select').trigger("change")
                        }
                    })

                }
            });
        },

        //清除框内数据
        clearData:function (){
            $('#dong_max_height').val(0);
            $('#dong_min_height').val(0);
        },
        //获取点数据
        getPointData(smxcode){
            const self = this
            let url = "http://192.168.0.207:82/blade-ycreal/water/childpage"
            $.ajax({
                url: url,
                type: 'post',
                dataType: 'json',
                jsonp: 'callback',
                jsonpCallback: 'data',
                data: {
                    parentId:smxcode
                },
                success: function (res) {
                    let data = res.data
                    console.log(data,"----")
                }
            });
        }


    });
});

 widgets/FloodAnalysis/css/style copy2.css

New file
@@ -0,0 +1,250 @@
.jimu-widget-FloodAnalysis {
    width: 440px !important;
    height: 100%;
    position: fixed !important;
    left: 30px !important;
    top: 75px !important;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    background: rgba(31, 39, 48, .7);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
}

.jimu-widget-FloodAnalysis div,
.jimu-widget-FloodAnalysis i,
.jimu-widget-FloodAnalysis ul,
.jimu-widget-FloodAnalysis li,
.jimu-widget-FloodAnalysis span,
.jimu-widget-FloodAnalysis input,
.jimu-widget-FloodAnalysis h2 {
    margin: 0;
    padding: 0;
}

.jimu-widget-FloodAnalysis div.analysis-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.jimu-widget-FloodAnalysis div.analysis-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
}

.jimu-widget-FloodAnalysis div.dong {
    margin: 8px 17px;
}

.jimu-widget-FloodAnalysis ul li {
    margin: 5px 0;
    list-style: none;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
}



.jimu-widget-FloodAnalysis li span {
    display: inline-block;
    width: 51%;
    text-align: left;
}

.jimu-widget-FloodAnalysis li input {
    display: inline-block;
    width: 49%;
    height: 42px;
    border: 0;
    color: #fff;
    vertical-align: middle;
    background: rgba(140, 151, 165, 0.7);
    padding: 0 10px;
}

.jimu-widget-FloodAnalysis li:nth-child(5) input {
    width: 49%;
}

.jimu-widget-FloodAnalysis li:nth-child(5) input:nth-child(1) {
    margin-right: 2%;
}

.jimu-widget-FloodAnalysis li:nth-child(1) input,
.jimu-widget-FloodAnalysis li:nth-child(5) input {
    cursor: pointer;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}

.jimu-widget-FloodAnalysis .dong-echarts {
    display: none;
    position: absolute;
    top: 360px;
    background: rgba(90, 87, 87, 0.7);
    width: 560px;
    height: 360px;
    z-index: 55;
}

.jimu-widget-FloodAnalysis p {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 368px;
    left: 12px;
    width: 150px;
    height: 200px;
    color: #fff;
    line-height: 20px;
    text-indent: 2em;
    letter-spacing: 1.5px;
    font-size: 16px;
    word-break: break-all;
    text-align-last: left;
    text-align: justify;
    text-justify: distribute-all-lines;
    z-index: 56;
}

.jimu-widget-FloodAnalysis .dong-progress {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 0px;
    z-index: 33;
    background: rgba(59, 59, 59, 0.7);

}

.jimu-widget-FloodAnalysis .dong-progress h2 {
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
}

.jimu-widget-FloodAnalysis .dong-progress .container {
    display: inline-block;
    width: 100%;
    height: 20px;
    padding-right: 10px;
    border: 1px solid #999;
    border-radius: 5px;
}

.jimu-widget-FloodAnalysis .dong-progress .container .h-100P {
    height: 100%;
}

.jimu-widget-FloodAnalysis .dong-progress .container .bar {
    display: inline-block;
    background: linear-gradient(to right, #ff4343, #48adff);
    color: white;
    font-weight: bold;
    padding: 0 5px;
    text-align: right;
    border-radius: 5px;
    border-right: 1px solid #999;
}



.jimu-widget-FloodAnalysis .storage-capacity-curve {
    display: none;
    padding-top: 10px;
    position: absolute;
    top: 360px;
    left: 580px;
    background: rgba(206, 204, 204, 0.7);
    width: 500px;
    height: 360px;
    z-index: 55;
}

.jimu-widget-FloodAnalysis .storage-name {
    display: none;
    position: absolute;
    top: 686px;
    left: 780px;
    width: 100px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: rgba(40, 37, 161, 0.7);
    z-index: 111 !important;
}

/**淹没详情**/
.flood-detail{
    position: fixed;
    top: 420px;
    width: 440px;
    height: 200px;
    left: 30px !important;
    overflow-x: hidden;
    background: rgba(31, 39, 48, .7);
    font-size: 14px;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    display: none;
}

.flood-detail-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.flood-detail-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
}

.flood-detail-content{
    height: 45%;
    text-align: center;
    margin: 12px 17px 10px 17px;
}

.flood-detail-text{
    height: 95%;
    font-size: 20px;
}

.flood-detail-button input{
    margin: 5px 0;
    width: 48%;
    height: 36px;
    color: #fff;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}

 widgets/FloodAnalysis/css/style.css

@@ -1,5 +1,5 @@
.jimu-widget-FloodAnalysis {
    width: 440px !important;
    width: 570px !important;
    height: 100%;
    position: fixed !important;
    left: 30px !important;
@@ -9,6 +9,7 @@
    background: rgba(31, 39, 48, .7);
    z-index: 41 !important;
    color: rgb(255, 255, 255);
    font-size: 22px;
}

.jimu-widget-FloodAnalysis div,
@@ -22,229 +23,128 @@
    padding: 0;
}

.jimu-widget-FloodAnalysis div.analysis-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.jimu-widget-FloodAnalysis div.analysis-header i {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
}

.jimu-widget-FloodAnalysis div.dong {
    margin: 8px 17px;
}

.jimu-widget-FloodAnalysis ul li {
    margin: 5px 0;
    list-style: none;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
}



.jimu-widget-FloodAnalysis li span {
    display: inline-block;
    width: 51%;
    text-align: left;
}

.jimu-widget-FloodAnalysis li input {
    display: inline-block;
    width: 49%;
    height: 42px;
    border: 0;
    color: #fff;
    vertical-align: middle;
    background: rgba(140, 151, 165, 0.7);
    padding: 0 10px;
}

.jimu-widget-FloodAnalysis li:nth-child(5) input {
    width: 49%;
}

.jimu-widget-FloodAnalysis li:nth-child(5) input:nth-child(1) {
    margin-right: 2%;
}

.jimu-widget-FloodAnalysis li:nth-child(1) input,
.jimu-widget-FloodAnalysis li:nth-child(5) input {
    cursor: pointer;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
}

.jimu-widget-FloodAnalysis .dong-echarts {
    display: none;
    position: absolute;
    top: 360px;
    background: rgba(90, 87, 87, 0.7);
    width: 560px;
    height: 360px;
    z-index: 55;
}

.jimu-widget-FloodAnalysis p {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 368px;
    left: 12px;
    width: 150px;
    height: 200px;
    color: #fff;
    line-height: 20px;
    text-indent: 2em;
    letter-spacing: 1.5px;
    font-size: 16px;
    word-break: break-all;
    text-align-last: left;
    text-align: justify;
    text-justify: distribute-all-lines;
    z-index: 56;
}

.jimu-widget-FloodAnalysis .dong-progress {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 500px;
    height: 0px;
    z-index: 33;
    background: rgba(59, 59, 59, 0.7);

}

.jimu-widget-FloodAnalysis .dong-progress h2 {
    margin: 10px 0;
.flood-top{
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    margin-left: 32% !important;
}

.jimu-widget-FloodAnalysis .dong-progress .container {
    display: inline-block;
    width: 100%;
    height: 20px;
    padding-right: 10px;
    border: 1px solid #999;
    border-radius: 5px;
.flood-middle .select-box{
    margin: 5% 0 0 25%;
}

.jimu-widget-FloodAnalysis .dong-progress .container .h-100P {
    height: 100%;
}

.jimu-widget-FloodAnalysis .dong-progress .container .bar {
    display: inline-block;
    background: linear-gradient(to right, #ff4343, #48adff);
    color: white;
    font-weight: bold;
    padding: 0 5px;
    text-align: right;
    border-radius: 5px;
    border-right: 1px solid #999;
}



.jimu-widget-FloodAnalysis .storage-capacity-curve {
    display: none;
    padding-top: 10px;
    position: absolute;
    top: 360px;
    left: 580px;
    background: rgba(206, 204, 204, 0.7);
    width: 500px;
    height: 360px;
    z-index: 55;
}

.jimu-widget-FloodAnalysis .storage-name {
    display: none;
    position: absolute;
    top: 686px;
    left: 780px;
.flood-top input{
    width: 100px;
    height: 20px;
    line-height: 20px;
    height: 25px;
    cursor: pointer;
}

.flood-top .choose-button{
    background-color: #1f81e0;
    border: none;
    color: white;
}

.flood-top .unchoose-button{
    background-color: white;
    border: none;
    color: #1f81e0;
}

.search-button{
    width: 50px;
    height: 28px;
    background-color: white;
    border: none;
    cursor: pointer;
}

.flood-middle .select-box select,.flood-middle .select-box input,.search-name-input{
    height: 30px;
    width: 260px;
}

.flood-middle .radio-box{
    text-align: center;
    font-size: 14px;
    color: rgba(40, 37, 161, 0.7);
    z-index: 111 !important;
    margin-top: 5%;
}

/**淹没详情**/
.flood-detail{
    position: fixed;
    top: 420px;
    width: 440px;
    height: 200px;
    left: 30px !important;
    overflow-x: hidden;
    background: rgba(31, 39, 48, .7);
    font-size: 14px;
    border: 1px solid rgb(69, 154, 251);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    display: none;
.flood-middle .tip{
    font-size: 1px;
    color: #ff3737;
}

.flood-detail-header {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.flood-detail-header i {
.select-box label{
    display: inline-block;
    margin-left: 6px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../../../images/toolbox.png ) no-repeat 0 -20px;
    background-size: 20px;
    text-align: justify;
    text-align-last: justify;
}

.flood-detail-content{
    height: 45%;
/**表格**/
.flood-middle .table-box{
    margin-top: 3%;
}

.flood-middle .table-box table{
    width: 100%;
}

.flood-table-thead tr th {
    text-align: center;
    margin: 12px 17px 10px 17px;
    border-top: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
    background: rgb(39, 118, 172);
}

.flood-detail-text{
    height: 95%;
    font-size: 20px;
.flood-tbody tr td {
    text-align: center;
    border-right: 1px solid #CFCFCF;
    border-bottom: 1px solid #CFCFCF;
    color: #ffffff;
}

.flood-detail-button input{
    margin: 5px 0;
    width: 48%;
    height: 36px;
    color: #fff;
    background: rgb(2,24,55);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
.flood-history .search-box{
    text-align: center;
    margin-top: 2%;
}




/*.hd {*/
/*    position: relative;*/
/*}*/

/*.hd input {*/
/*    width: 167px;*/
/*    !* top: 9px; *!*/
/*    outline: none;*/
/*    border: 0pt;*/
/*    !* position: absolute; *!*/
/*    line-height: 30px;*/
/*    !* left: 8px; *!*/
/*    height: 30px;*/
/*    border: 1px solid #999;*/
/*}*/

/*.hd select {*/
/*    position: absolute;*/
/*    left: 0;*/
/*    width: 167px;*/
/*    height: 106px !important;*/
/*    margin-left: 86px;*/
/*    outline: none;*/
/*    border: 1px solid #999;*/
/*    margin-top: 31px;*/
/*}*/

/*.hd select option:hover {*/
/*    background: #1388ff;*/
/*    color: white;*/
/*}*/

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

@@ -1,5 +1,5 @@
define(
   ({
    _widgetLabel: "洪水淹没风险"
    _widgetLabel: "洪水淹没分析"
  })
);

 widgets/Tool/Widget.js

@@ -162,4 +162,4 @@
            }

        });
    });
    });