Arcgisjs结合threejs做动态线图层_arcgis.js接入three.js图层遮挡资源-CSDN文库

共2个文件

js：1个

html：1个

javascript

arcgis

需积分: 1 40 浏览量 2023-09-20 11:37:39 上传评论收藏 219KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

arcgis+threejs.rar （2个子文件）

iii.html 34KB

three.js 1.32MB

<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title> Animated lines with WebGL | Sample | ArcGIS Maps SDK for JavaScript 4.26 </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>  <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.26/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script type="module"> import * as THREE from './three.js'; require([ "esri/Map", "esri/request", "esri/core/reactiveUtils", "esri/geometry/support/webMercatorUtils", "esri/layers/GraphicsLayer", "esri/views/MapView", "esri/views/2d/layers/BaseLayerViewGL2D", "esri/views/layers/LayerView", "esri/views/3d/externalRenderers", "esri/geometry/geometryEngine", "esri/geometry/projection", "esri/geometry/Polyline", "esri/views/SceneView" ], ( Map, esriRequest, reactiveUtils, webMercatorUtils, GraphicsLayer, MapView, BaseLayerViewGL2D, LayerView, externalRenderers, geometryEngine, projection, Polyline, SceneView ) => { // Subclass the custom layer view from BaseLayerViewGL2D. const CustomLayerView2D = BaseLayerViewGL2D.createSubclass({ // Locations of the two vertex attributes that we use. They // will be bound to the shader program before linking. aPosition: 0, aOffset: 1, aDistance: 2, aSide: 3, aColor: 4, constructor: function () { // Geometrical transformations that must be recomputed // from scratch at every frame. this.transform = mat3.create(); this.extrude = mat3.create(); this.translationToCenter = vec2.create(); this.screenTranslation = vec2.create(); // Geometrical transformations whose only a few elements // must be updated per frame. Those elements are marked // with NaN. this.display = mat3.fromValues(NaN, 0, 0, 0, NaN, 0, -1, 1, 1); this.screenScaling = vec3.fromValues(NaN, NaN, 1); // Whether the vertex and index buffers need to be updated // due to a change in the layer data. this.needsUpdate = false; }, // Called once a custom layer is added to the map.layers collection and this layer view is instantiated. attach: function () { const gl = this.context; // We listen for changes to the graphics collection of the layer // and trigger the generation of new frames. A frame rendered while // `needsUpdate` is true may cause an update of the vertex and // index buffers. const requestUpdate = () => { this.needsUpdate = true; this.requestRender(); }; this.watcher = reactiveUtils.on( () => this.layer.graphics, "change", requestUpdate ); const vertexSource = ` precision highp float; uniform mat3 u_transform; uniform mat3 u_extrude; uniform mat3 u_display; attribute vec2 a_position; attribute vec2 a_offset; attribute float a_distance; attribute float a_side; attribute vec4 a_color; varying float v_distance; varying float v_side; varying vec4 v_color; void main(void) { gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0) + u_extrude * vec3(a_offset, 0.0))).xy; gl_Position.zw = vec2(0.0, 1.0); v_distance = a_distance; v_side = a_side; v_color = a_color; }`; const fragmentSource = ` precision highp float; uniform float u_current_time; varying float v_distance; varying float v_side; varying vec4 v_color; const float TRAIL_SPEED = 50.0; const float TRAIL_LENGTH = 300.0; const float TRAIL_CYCLE = 1000.0; void main(void) { float d = mod(v_distance - u_current_time * TRAIL_SPEED, TRAIL_CYCLE); float a1 = d < TRAIL_LENGTH ? mix(0.0, 1.0, d / TRAIL_LENGTH) : 0.0; float a2 = exp(-abs(v_side) * 3.0); float a = a1 * a2; gl_FragColor = v_color * a; }`; const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentSource); gl.compileShader(fragmentShader); // Create the shader program. this.program = gl.createProgram(); gl.attachShader(this.program, vertexShader); gl.attachShader(this.program, fragmentShader); // Bind attributes. gl.bindAttribLocation(this.program, this.aPosition, "a_position"); gl.bindAttribLocation(this.program, this.aOffset, "a_offset"); gl.bindAttribLocation(this.program, this.aDistance, "a_distance"); gl.bindAttribLocation(this.program, this.aSide, "a_side"); gl.bindAttribLocation(this.program, this.aColor, "a_color"); // Link. gl.linkProgram(this.program); // Shader objects are not needed anymore. gl.deleteShader(vertexShader); gl.deleteShader(fragmentShader); // Retrieve uniform locations once and for all. this.uTransform = gl.getUniformLocation( this.program, "u_transform" ); this.uExtrude = gl.getUniformLocation(this.program, "u_extrude"); this.uDisplay = gl.getUniformLocation(this.program, "u_display"); this.uCurrentTime = gl.getUniformLocation( this.program, "u_current_time" ); // Create the vertex and index buffer. They are initially empty. We need to track the // size of the index buffer because we use indexed drawing. this.vertexBuffer = gl.createBuffer(); this.indexBuffer = gl.createBuffer(); // Number of indices in the index buffer. this.indexBufferSize = 0; // Create a VAO for easier binding. Make sure to handle WebGL 1 and 2! if (gl.getParameter(gl.VERSION).startsWith("WebGL 2.0")) { this.vao = gl.createVertexArray(); this.bindVertexArray = (vao) => gl.bindVertexArray(vao); this.deleteVertexArray = (vao) => gl.deleteVertexArray(vao); } else { const vaoExt = gl.getExtension("OES_vertex_array_object"); this.vao = vaoExt.createVertexArrayOES(); this.bindVertexArray = (vao) => vaoExt.bindVertexArrayOES(vao); this.deleteVertexArray = (vao) => vaoExt.deleteVertexArrayOES(vao); } // Set up vertex attributes this.bindVertexArray(this.vao); gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.enableVertexAttribArray(this.aPosition);

评论收藏

内容反馈