arcgis结合threejs实现动态管网效果_arcgis雷达图资源-CSDN文库

共5个文件

png：3个

js：1个

html：1个

需积分: 38 129 浏览量 2022-09-23 18:18:54 上传评论 2 收藏 252KB ZIP 举报

在IT行业中，GIS（地理信息系统）与WebGL技术的结合为可视化提供了强大的工具。本话题主要探讨如何利用ArcGIS和Three.js这两个强大的库来实现动态管网的效果。ArcGIS是Esri公司开发的专业地理信息系统，而Three.js则是一个流行的JavaScript库，用于在浏览器中创建3D图形，特别适合构建交互式的、可视化的网络应用。 ArcGIS提供了丰富的地理数据处理和分析功能，包括地图制作、空间查询、地理编码等。在与Three.js结合时，ArcGIS通常作为后端服务，提供地图数据和地理空间操作。开发者可以使用ArcGIS REST API或者ArcGIS JavaScript API来获取地图信息并将其转换为Three.js能理解的格式。 Three.js则负责在前端展示这些数据，它基于WebGL，可以直接在浏览器中渲染3D场景。通过Three.js，我们可以创建管线模型，赋予它们不同的颜色和材质，以代表不同的管道类型。此外，Three.js还支持动画效果，使得管道可以动态流动，模拟水或气体在管道中的流动状态。要实现动态管网效果，首先需要将ArcGIS中的管网数据进行预处理，这可能涉及到数据格式转换，如将ESRI Shapefile或GeoJSON转换为Three.js能直接使用的几何形状。接着，使用Three.js的几何体对象（如TubeGeometry或CylinderGeometry）创建管道模型，并设置相应的参数，如半径、长度和分段数，以确保模型逼真度。动画部分，Three.js的动画系统可以用来更新管道的状态，例如改变管道的颜色来表示流动方向，或者使用粒子系统模拟流体。可以设置定时器或者根据某些事件（如用户交互）来触发动画。例如，通过更改管道上的材质颜色和透明度，可以创建水流流动的视觉效果。在描述中提到的版本范围"4.17到4.23版本"指的是ArcGIS JavaScript API的版本，这意味着这个方法已经在这些版本中得到了验证。每个版本可能有其特定的增强功能和改进，因此在实际开发中，应选择支持最新特性的稳定版本，以获得最佳性能和兼容性。结合ArcGIS和Three.js可以创建出交互性强、视觉效果丰富的动态管网应用。这种技术在城市规划、公用事业管理、环境监测等领域具有广泛的应用潜力。开发者需要熟悉这两种库的API，理解地理数据的结构，以及掌握3D图形编程技巧，才能有效地实现动态管网的展示。通过不断学习和实践，可以创造出更多创新的GIS可视化解决方案。

资源详情

资源评论

资源推荐

收起资源包目录

arcgis结合 three js 实现管网.zip （5个子文件）

流动线

img

line-interval.png 222B

lineTexture.png 7KB

line-arrow-dovetail.png 16KB

three.module.js 1.14MB

line.html 9KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>arcgis js 结合three js 实现流动线</title>  <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css"/> <script src="https://js.arcgis.com/4.23/"></script> <style> html, body, #mapContainer { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="mapContainer"></div> </body> <script type="module"> import * as THREE from './three.module.js'; require([ "esri/Map", "esri/views/SceneView", "esri/views/3d/externalRenderers", 'esri/geometry/support/webMercatorUtils', "esri/geometry/SpatialReference", "esri/geometry/Extent", 'esri/layers/GraphicsLayer', 'esri/Graphic', ],function (Map, SceneView, externalRenderers, webMercatorUtils, SpatialReference,Extent,GraphicsLayer,Graphic){ var pathForMash=[]; let path=[ [115.80895340787583, 30.92933111293343], [115.81947621477968,30.936026430486265], [115.85073577332635,30.952730603143078], [115.86830705038578,30.964969701156637], [115.87796494895557,30.970050440481813], [115.88263291871093,30.97587476869184], [115.88153549018487,30.97619308639916], [115.88860467181571,30.985581605596618], [115.89039457558401,30.99614115304192], [115.89037581420371,30.99986573852132], [115.88982453627196,31.003621647335926], [115.88822886767906,30.999078415194415], [115.88681216877917,30.997464365151867], [115.88286139825868,30.99686255666582], [115.87841763117079,30.999826971071514], [115.86308179931808,30.99584156461405], [115.85510630972263,30.993171784031908], [115.86174910808289,30.993473404196706], [115.86231959908358,30.99068362090549] ] var map = new Map({ basemap: "satellite", ground:'world-elevation' }); var view = new SceneView({ container: "mapContainer", map: map, viewingMode: "local", camera: { position: [115.9210717080402, 30.896913111159947, 13154.641086300715], fov: 55, heading: 318.70623732061983, tilt: 42.34234113203692 } }); view.on('click',function (evt){ console.log(evt.mapPoint); console.log(view) }) //添加线 view.graphics.add(new Graphic({ geometry:{ type:'polyline', paths:path, }, symbol:{ type: "simple-line", // autocasts as SimpleLineSymbol() color: [226, 119, 40], width: 2 } })) //引入three js const myRenderer = { view:view, renderer:null, // three js 渲染器 camera:null, //three js 相机 scene:null, //three js 场景 height:100, offest:0, map:null, setup:function (context){ this.renderer= new THREE.WebGLRenderer({ context:context.gl, premultipliedAlpha:false, //renderer 是否假设颜色有 premaultiplied alpha 默认为true }); this.renderer.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊 this.renderer.setViewport(0,0,view.width,view.height);//视图大小设置 //防止three.js 清除Arcgis JS API 提供的缓冲区 this.renderer.autoClearDepth = false; // 定义renderer是否清除深度缓存 this.renderer.autoClearStencil = false; // 定义renderer是否清除模板缓存 this.renderer.autoClearColor = false; // 定义renderer是否清除颜色缓存 // ArcGIS JS API渲染自定义离屏缓冲区，而不是默认的帧缓冲区。 // 我们必须将这段代码注入到three.js运行时中，以便绑定这些缓冲区而不是默认的缓冲区。 const originalSetRenderTarget = this.renderer.setRenderTarget.bind( this.renderer ); this.renderer.setRenderTarget = function (target) { originalSetRenderTarget(target); if (target == null) { // 绑定外部渲染器应该渲染到的颜色和深度缓冲区 context.bindRenderTarget(); } }; this.scene = new THREE.Scene();//场景 this.camera = new THREE.PerspectiveCamera();//相机 //添加坐标轴辅助工具 const axesHelper = new THREE.AxesHelper(10000000); this.scene.add(axesHelper); //创建几何体 let v3List=[]; path.forEach((item)=>{ var renderPos = [0, 0, 0]; externalRenderers.toRenderCoordinates(this.view, [item[0], item[1], 500], 0, SpatialReference.WGS84, renderPos, 0, 1); v3List.push(new THREE.Vector3(renderPos[0], renderPos[1], renderPos[2])); }) let curve = new THREE.CatmullRomCurve3(v3List, false); /** * path 管道的形状曲线 * tubularsSegements 管道分成多少段 * radius 管道的半径 * radialSegments 管道口是几边形分为多少段 * closed 收尾是否相连封闭 * @type {TubeGeometry} */ let tubeGeometry = new THREE.TubeGeometry(curve, 20, 100, 8, false); var textureLoader = new THREE.TextureLoader(); //设置纹理贴图 //this.map = textureLoader.load('img/lineTexture.png'); this.map = textureLoader.load('img/line-arrow-dovetail.png'); this.map.wrapS = THREE.RepeatWrapping; this.map.wrapT = THREE.RepeatWrapping; this.map.repeat.set( 20,4); let material = new THREE.MeshBasicMaterial({ color: 0x85A9A9, side:200, map:this.map, transparent: true, depthWrite: false, opacity: 1, }); let tube1 = new THREE.Mesh(tubeGeometry, material); this.scene.add(tube1); let tubeGeometry2 = new THREE.TubeGeometry(curve, 20, 120, 8, false); let tubeMaterial2 = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, transparent: true, opacity: 0.25, }); let tube2 = new THREE.Mesh(tubeGeometry2, tubeMaterial2); this.scene.add(tube2); var ambient = new THREE.AmbientLight(0xffffff, 1); ambient.position.set(0, 100, 0); this.scene.add(ambient); context.resetWebGLState(); }, render: function (context) { // 更新相机参数 const cam = context.camera; this.camera.position.set(cam.eye[0], cam.eye[1], cam