基于AcrGIS平台实现三维场景下的积水效果动态模拟_城市三维高程怎么做资源-CSDN下载

共8个文件

json：6个

html：1个

js：1个

需积分: 49 186 浏览量 2019-07-15 17:33:47 上传评论 2 收藏 35KB RAR 举报

在本项目中，我们主要探讨如何利用AcrGIS平台实现三维场景下的积水效果动态模拟。AcrGIS是一款强大的地理信息系统（GIS），它提供了丰富的工具和技术，用于处理、分析和展示地理空间数据。在这个特定的应用中，我们将关注WebScene功能，这是ArcGIS Online和ArcGIS Enterprise的一部分，用于创建和分享交互式的三维地图体验。让我们了解ArcGIS WebScene的基本概念。WebScene是一种可以在Web浏览器中展示三维地理信息的方式，它支持多源数据，包括地形、影像、矢量图层和3D对象。WebScene可以集成到网页或应用程序中，使用户能够探索复杂的地理环境，如城市景观、建筑物以及自然现象，如洪水或积水。在实现积水效果动态模拟时，我们需要以下步骤： 1. **数据准备**：我们需要收集与积水相关的地理空间数据。这可能包括地形高程数据、降雨量数据、排水系统信息等。这些数据可以通过遥感卫星图像、地形测绘、气象站观测等方式获取。 2. **创建三维场景**：在ArcGIS Online或ArcGIS Desktop中，我们可以利用地形数据构建三维地形模型。这通常涉及导入高程数据并将其转化为三维表面。 3. **积水模拟**：为了模拟积水效果，我们需要将降雨数据与地形数据相结合。通过计算降雨量在地形上的积累，可以预测可能出现积水的区域。这一过程可能涉及到流体力学的简化模型，如水文学中的流域分析。 4. **数据可视化**：使用ArcGIS的3D渲染功能，我们可以将积水区域以颜色、透明度或高度差的形式显示出来，从而形成动态的积水效果。这可以通过编程接口（如ArcGIS API for JavaScript）来实现，根据时间序列数据动态更新积水图层。 5. **交互式体验**：在WebScene中，用户可以自由旋转、缩放和导航场景，查看积水在不同时间点的变化。此外，还可以添加其他信息，如降雨强度、时间轴控制等，增强用户体验。 6. **发布与分享**：将完成的WebScene发布到ArcGIS Online，使得其他人可以通过共享链接在Web浏览器中查看和交互这个积水模拟。压缩包内的"Dynamic_Simulation"可能包含了实现上述功能所需的所有资源，如HTML页面（作为用户界面）、JSON文件（可能存储了积水模拟的数据或配置信息）。开发者需要将这些资源与ArcGIS API结合，编写JavaScript代码来驱动积水效果的动态模拟。基于AcrGIS平台实现三维场景下的积水效果动态模拟是一项综合了地理信息科学、数据处理和Web开发技术的任务。通过这种方式，我们可以更好地理解和预警潜在的水灾风险，对城市规划和防洪管理提供有力支持。

资源推荐

资源详情

资源评论

收起资源包目录

Dynamic_Simulation.rar （8个子文件）

Dynamic_Simulation

assets

data

2019-03-01-16-20.json 3KB

2019-03-01-16-30.json 3KB

2019-03-01-16-10.json 3KB

2019-03-01-16-50.json 2KB

2019-03-01-16-00.json 2KB

2019-03-01-16-40.json 3KB

jquery-2.1.1.min.js 82KB

Dynamic_Simulation.html 9KB

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>三维场景下的积水效果动态模拟</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #timeSlider { position: absolute; left: 200px; right: 200px; bottom: 30px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/dark/main.css" /> <script src="https://js.arcgis.com/4.12/"></script> <script src="assets/js/jquery-2.1.1.min.js"></script> <script> require([ "esri/Map", "esri/layers/GeoJSONLayer", "esri/layers/FeatureLayer", "esri/views/SceneView", "esri/views/MapView", "esri/WebScene", "esri/config", "esri/widgets/TimeSlider", ], function (Map, GeoJSONLayer, FeatureLayer, SceneView, MapView, WebScene, esriConfig, TimeSlider) { // 此处可使用ArcGIS Pro发布的场景服务(包含Ground Layer、2D Layer) // esriConfig.portalUrl = "https://myHostName.esri.com/arcgis"; // var map = new WebScene({ // portalItem: { // autocasts as new PortalItem() // id: "0614ea1f9dd043e9ba157b9c20d3c538" // ID of the WebScene on the on-premise portal // } // }); var map = new Map({ basemap: "hybrid", ground: "world-elevation" //使用ArcGIS自带高程图层 }); var view = new SceneView({ container: "viewDiv", map: map, camera: { position: [ 117.147, // lon 39.06, // lat 328 // elevation in meters ], tilt: 78, //倾斜角. 垂直地面为0 heading: 6 //方位角，正北为0 ，0-360 } }); view.on("click", function (event) { console.log(view); console.log("click event: ", event.mapPoint.x + ',' + event.mapPoint.y + ',' + event.mapPoint.z); }); const timeSlider = new TimeSlider({ container: "timeSlider", mode: "instant", stops: { interval: { value: 10, unit: "minutes" } } }); view.ui.add(timeSlider, "manual"); // FeatureLayer的渲染器 var renderer = { type: "simple", // autocasts as new SimpleRenderer() symbol: { type: "polygon-3d", // autocasts as new PolygonSymbol3D() symbolLayers: [ { type: "extrude", // autocasts as new ExtrudeSymbol3DLayer() material: { color: "#4ec2cd" } } ] }, visualVariables: [ //视觉变量，elevation字段控制拉伸高度 { type: "size", field: "elevation", valueUnit: "meters" } ] }; let features = []; var layer = new FeatureLayer({ fields: [ { name: "ObjectID", alias: "ObjectID", type: "oid" }, { name: "elevation", alias: "elevation", type: "double" }], objectIdField: "ObjectID", // source: features, // autocast as a Collection of new Graphic() geometryType: "polygon", spatialReference: { wkid: 3857 }, renderer: renderer, outFields: ["*"] }); //根据GeoJson文件名，设置时间滑块范围 var dateString = "2019-03-01-16-00"; var dateArr = dateString.split("-"); dateArr = dateArr.map(date => { return parseInt(date); }); timeSlider.fullTimeExtent = { start: new Date(dateArr[0], dateArr[1] - 1, dateArr[2], dateArr[3], dateArr[4]), end: new Date(dateArr[0], dateArr[1] - 1, dateArr[2], dateArr[3], dateArr[4] + 50) }; timeSlider.values = [timeSlider.fullTimeExtent.start]; // 先添加开始时刻的积水数据 $.get('assets/data/2019-03-01-16-00.json', function (geoJson) { var featureCollections = geoJson.features;//获取积水区域 featureCollections.forEach(function (element) { let feature = { geometry: { type: "polygon", //不可省略 rings: element.geometry.coordinates, spatialReference: { wkid: 3857 }, //不可省略 }, attributes: { ObjectID: element.id, elevation: element.properties.elevation, } }; features.push(feature); }, this); layer.source = features;//设置featurelayer数据源 map.add(layer); }); // watch for time slider timeExtent change timeSlider.watch("timeExtent", function (timeExtent) { console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end); // 动态修改featureLayer数据源 var fileName = dateUtil(timeExtent.end); $.get(`assets/data/${fileName}.json`, function (geoJson) { features = [];//清空 var featureCollections = geoJson.features; featureCollections.forEach(function (element) { let feature = { geometry: { type: "polygon", //不可省略 rings: element.geometry.coordinates, spatialReference: { wkid: 3857 }, //不可省略 }, attributes: { ObjectID: element.id, elevation: element.properties.elevation, } }; features.push(feature); }, this); layer.source = features; //重置FeatureLay

评论收藏

内容反馈