时序性淹没分析，基于真实数据制作的淹没分析资源-CSDN文库

共1个文件

html：1个

webgl

需积分: 2 61 浏览量 2023-12-04 09:56:53 上传评论 1 收藏 3KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

时序性淹没.rar （1个子文件）

时序性淹没

淹没效果.html 12KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <title>多时序淹没效果</title> <link href="../../../Build/SuperMap3Dbeta/Widgets/widgets.css" rel="stylesheet" /> <link href="./css/bootstrap.min.css" rel="stylesheet" /> <link href="../css/font-awesome.min.css" rel="stylesheet"> <link href="../css/pretty.css" rel="stylesheet" /> <link href="../css/style.css" rel="stylesheet"> <link href="../css/jquery.range.css" rel="stylesheet"> <script src="../js/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/bootstrap-select.min.js"></script> <script src="../js/tooltip.js"></script> <script src="../js/config.js"></script> <script src="../js/jquery.range.js"></script> <script type="text/javascript" src="../../../Build/SuperMap3Dbeta/SuperMap3D.js"></script> <style> .button-group { display: flex; justify-content: space-between; margin-bottom: 8px; margin-top: 10px; } .slider-container { margin-bottom: 15px; } #toolbar { position: absolute; left: 10px; top: 10px; } .btn2 { position: relative; } .titl { width: 100px; } label { display: inline-block; } </style> </head> <body> <div id="SuperMap3DContainer"></div> <div id="toolbar" style="display : none;"> <div class="titleBox"> <div class="titl">多时序淹没效果</div> </div> <div class="button-group"> <button type="button" class="btn2" id="ByLocation">开始</button> <button type="button" class="btn2" id="stop">暂停</button> <button type="button" class="btn2" id="play">继续</button> <button type="button" class="btn2" id="restart">重置</button> </div> <input id="setpInput" class="single-slider" type="range" value="0" /> </div> <div id='loadingbar' class="spinner"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> <script type="text/javascript"> function onload(SuperMap3D) { var obj = [6378137.0, 6378137.0, 6356752.3142451793]; SuperMap3D.Ellipsoid.WGS84 = Object.freeze(new SuperMap3D.Ellipsoid(obj[0], obj[1], obj[2])); var viewer = new SuperMap3D.Viewer("SuperMap3DContainer", { orderIndependentTranslucency: true, contextOptions: { requestWebgl2: false, }, timeline: true, infobox: false }); var widget = viewer.SuperMap3DWidget; var scene = viewer.scene; viewer.imageryLayers.addImageryProvider(new SuperMap3D.BingMapsImageryProvider({ url: 'https://dev.virtualearth.net', mapStyle: SuperMap3D.BingMapsStyle.AERIAL, key: URL_CONFIG.BING_MAP_KEY //当场景出现黑球时可至官网（https://www.bingmapsportal.com/）申请key })); try { var promise = scene.open("http://localhost:8090/iserver/services/3D-sssxxxxxxx/rest/realspace"); promise.then(function(layers) { layer = layers[0]; var colorTable = new SuperMap3D.ColorTable(); colorTable.insert(0, SuperMap3D.Color.fromCssColorString("#00A5EB")); colorTable.insert(10.630219, SuperMap3D.Color.fromCssColorString("#A6D9FF")); colorTable.insert(20, SuperMap3D.Color.fromCssColorString("#00A5EB")); colorTable.insert(25.945329, SuperMap3D.Color.fromCssColorString("#9AD1FF")); colorTable.insert(30.260439, SuperMap3D.Color.fromCssColorString("#8EC9FF")); colorTable.insert(35.575548, SuperMap3D.Color.fromCssColorString("#81C1FF")); colorTable.insert(40.890658, SuperMap3D.Color.fromCssColorString("#75B9FF")); colorTable.insert(45.205768, SuperMap3D.Color.fromCssColorString("#69B1FF")); colorTable.insert(50.890658, SuperMap3D.Color.fromCssColorString("#75B9FF")); colorTable.insert(55.205768, SuperMap3D.Color.fromCssColorString("#69B1FF")); colorTable.insert(60.520877, SuperMap3D.Color.fromCssColorString("#5CAAFF")); colorTable.insert(65.835987, SuperMap3D.Color.fromCssColorString("#50A2FF")); colorTable.insert(70.151097, SuperMap3D.Color.fromCssColorString("#449AFF")); colorTable.insert(75.466206, SuperMap3D.Color.fromCssColorString("#3792FF")); colorTable.insert(80.781316, SuperMap3D.Color.fromCssColorString("#2B8AFF")); colorTable.insert(85.096426, SuperMap3D.Color.fromCssColorString("#1F82FF")); colorTable.insert(90.411535, SuperMap3D.Color.fromCssColorString("#127AFF")); colorTable.insert(95.726645, SuperMap3D.Color.fromCssColorString("#0672FF")); colorTable.insert(100.041755, SuperMap3D.Color.fromCssColorString("#006CFA")); colorTable.insert(105.356865, SuperMap3D.Color.fromCssColorString("#0067F1")); colorTable.insert(110.671974, SuperMap3D.Color.fromCssColorString("#0062E8")); colorTable.insert(120.987084, SuperMap3D.Color.fromCssColorString("#005EDF")); colorTable.insert(125.302194, SuperMap3D.Color.fromCssColorString("#0059D6")); colorTable.insert(130.617303, SuperMap3D.Color.fromCssColorString("#0054CD")); colorTable.insert(140.932413, SuperMap3D.Color.fromCssColorString("#0050C4")); colorTable.insert(145.247523, SuperMap3D.Color.fromCssColorString("#004BBB")); colorTable.insert(150.562632, SuperMap3D.Color.fromCssColorString("#0047B2")); colorTable.insert(170.877742, SuperMap3D.Color.fromCssColorString("#0042A9")); // colorTable.insert(90.192852, SuperMap3D.Color.fromCssColorString("#003DA0")); // colorTable.insert(92.507961, SuperMap3D.Color.fromCssColorString("#003997")); // colorTable.insert(94.823071, SuperMap3D.Color.fromCssColorString("#00348E")); // colorTable.insert(97.138181, SuperMap3D.Color.fromCssColorString("#002f85")); // colorTable.insert(0,new SuperMap3D.Color(0, 0, 1, 0.8)); // colorTable.insert(50,new SuperMap3D.Color(0, 0, 1, 0.2)); colorTable.insert(100, new SuperMap3D.Color(0, 0, 1, 0.1)); //new SuperMap3D.Color(0.65, 0.65, 0.65, 1); // colorTable.insert(0, SuperMap3D.Color.fromCssColorString("#aefffa")); // colorTable.insert(10, SuperMap3D.Color.fromCssColorString("#a1f6ff")); // colorTable.insert(20, SuperMap3D.Color.fromCssColorString("#9cfeff")); // colorTable.insert(30, SuperMap3D.Color.fromCssColorString("#95e7ff")); // colorTable.insert(40, SuperMap3D.Color.fromCssColorString("#95c5ff")); // colorTable.insert(50, SuperMap3D.Color.fromCssColorString("#869cff")); // colorTable.insert(60, SuperMap3D.Color.fromCssColorString("#79caff")); // colorTable.insert(70, SuperMap3D.Color.fromCssColorString("#67a1ff")); // colorTable.insert(80, SuperMap3D.Color.fromCssColorString("#70c6ff")); // colorTable.insert(90, SuperMap3D.Color.fromCssColorString("#50aeff")); // colorTable.insert(100, SuperMap3D.Color.fromCssColorString("#acf7ff")); var hyp = new SuperMap3D.HypsometricSetting(); hyp.ColorTable = colorTable; hyp.DisplayMode = SuperMap3D.HypsometricSettingEnum.DisplayMode.FACE; hyp.Opacity = 1.0; hyp.LineInterval = 1.0; hyp.ColorTableMaxKey = layer._hypMaxCategory;

评论收藏

内容反馈