From 3ea9a42dfb1f6ef13a9a4c81f5843383a3be3e1c Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Thu, 09 Feb 2023 08:46:52 +0800
Subject: [PATCH] 洪水淹没静态页面
---
widgets/FloodAnalysis/Widget.html | 112 ++-
widgets/Tool/Widget.js | 2
widgets/FloodAnalysis/css/style.css | 312 +++-----
widgets/FloodAnalysis/nls/zh-cn/strings.js | 2
widgets/FloodAnalysis/Widget.js | 686 ++++---------------
widgets/FloodAnalysis/css/style copy2.css | 250 +++++++
widgets/FloodAnalysis/Widget copy2.html | 48 +
widgets/FloodAnalysis/Widget copy2.js | 642 ++++++++++++++++++
8 files changed, 1,279 insertions(+), 775 deletions(-)
diff --git a/widgets/FloodAnalysis/Widget copy2.html b/widgets/FloodAnalysis/Widget copy2.html
new file mode 100644
index 0000000..f44f4f0
--- /dev/null
+++ b/widgets/FloodAnalysis/Widget copy2.html
@@ -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>
diff --git a/widgets/FloodAnalysis/Widget copy2.js b/widgets/FloodAnalysis/Widget copy2.js
new file mode 100644
index 0000000..7b042a4
--- /dev/null
+++ b/widgets/FloodAnalysis/Widget copy2.js
@@ -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);
+ },
+ });
+});
diff --git a/widgets/FloodAnalysis/Widget.html b/widgets/FloodAnalysis/Widget.html
index f44f4f0..36c85f5 100644
--- a/widgets/FloodAnalysis/Widget.html
+++ b/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>
diff --git a/widgets/FloodAnalysis/Widget.js b/widgets/FloodAnalysis/Widget.js
index 7b042a4..3182c94 100644
--- a/widgets/FloodAnalysis/Widget.js
+++ b/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,"----")
+ }
+ });
+ }
+
+
});
});
diff --git a/widgets/FloodAnalysis/css/style copy2.css b/widgets/FloodAnalysis/css/style copy2.css
new file mode 100644
index 0000000..677f7db
--- /dev/null
+++ b/widgets/FloodAnalysis/css/style copy2.css
@@ -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;
+}
diff --git a/widgets/FloodAnalysis/css/style.css b/widgets/FloodAnalysis/css/style.css
index 677f7db..b5fda1e 100644
--- a/widgets/FloodAnalysis/css/style.css
+++ b/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;*/
+/*}*/
diff --git a/widgets/FloodAnalysis/nls/zh-cn/strings.js b/widgets/FloodAnalysis/nls/zh-cn/strings.js
index 06e0acc..d7a4967 100644
--- a/widgets/FloodAnalysis/nls/zh-cn/strings.js
+++ b/widgets/FloodAnalysis/nls/zh-cn/strings.js
@@ -1,5 +1,5 @@
define(
({
- _widgetLabel: "洪水淹没风险"
+ _widgetLabel: "洪水淹没分析"
})
);
diff --git a/widgets/Tool/Widget.js b/widgets/Tool/Widget.js
index 0e2169a..fa52113 100644
--- a/widgets/Tool/Widget.js
+++ b/widgets/Tool/Widget.js
@@ -162,4 +162,4 @@
}
});
- });
\ No newline at end of file
+ });
--
Gitblit v1.9.3