devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 探测效果（地图探测、地图窥探）_arcgis maps sdk for javascript 地图显示中文 博客园

作者：黑客灵魂 | 2024-07-21 16:44:46

赞

踩

arcgis maps sdk for javascript 地图显示中文 博客园

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 探测效果（地图探测、地图窥探）

ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类，可以添加数据以及操作 FBO（ManagedFBO）；

通过操作 FBO，可以通过后处理实现很多效果，官方提供了几个示例，感兴趣可以看看。

本文介绍一下通过 FBO，实现鼠标探测效果。

本文包括核心代码、完整代码以及在线示例。

核心代码

原理也比较容易，即获取鼠标位置，转为 WebGL 位置，计算圆形范围，

经过判断，范围内外显示不同颜色。

需要注意的地方：鼠标位置归一化，y 轴位置翻转以及纠正圆形。

具体介绍详见代码注释。



// 监听鼠标离开图形事件
view.on("pointer-move", function (event) {
    // 获取视口尺寸
    const viewWidth = view.width;
    const viewHeight = view.height;

    // 计算中心点，这里归一化位置
    const centerX = event.x / viewWidth;
    // 翻转 y 轴
    const centerY = 1 - event.y / viewHeight;

    luminanceRenderNode.center = [centerX,centerY];
});
            

// The fragment shader program applying a greyscsale conversion
 const fshader = `#version 300 es

 precision highp float;
 out lowp vec4 fragColor;

 in vec2 uv;
 uniform sampler2D colorTex;

 // 圆参数
 uniform vec3 u_center;

 // 计算宽高比，纠正圆形
 vec2 calculateAspectRatio(vec2 size) {
     return vec2(size[1] / size[0], 1.0);
 }

 // 是否在圆内
 bool isInsideCircle(vec2 uv_) {

   // 纹理尺寸
   vec2 size = vec2(textureSize(colorTex, 0));

   // 纠正范围
   uv_ = (uv_ - u_center.rg)/calculateAspectRatio(size);

   // 计算UV坐标到圆心的距离
   float distance = length(uv_);

   // 判断距离是否小于圆的半径
   // 这里给一个最小圆形
   return distance < (u_center.b >= 0.3 ? 0.3: u_center.b);
}

 void main() {

     vec4 color = texture(colorTex, uv);

     if(isInsideCircle(uv)){
        // 圆内高亮
        fragColor = vec4(color.rgb * 1.2, color.a);
     }else{
        // 灰度化
        fragColor = vec4(vec3(dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)))*0.7, color.a);
     }
 }`;


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

完整代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Custom RenderNode - Color Spy | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css"/>
    <script src="https://js.arcgis.com/4.29/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.5.1/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.5.1/calcite.css"/>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script>
        require(["esri/Map", "esri/views/SceneView", "esri/views/3d/webgl/RenderNode",
            "esri/widgets/Slider","esri/geometry/Point",
            "esri/layers/IntegratedMesh3DTilesLayer",

        ], function (
            Map,
            SceneView,
            RenderNode,
            Slider,
            Point,
            IntegratedMesh3DTilesLayer,
        ) {

            const view = new SceneView({
                container: "viewDiv",
                map: new Map({basemap: "satellite"})
            });

            const layer = new IntegratedMesh3DTilesLayer({
                url: "http://openlayers.vip/cesium/3dtile/xianggang_1.1/tileset.json",
                title: "Utrecht Integrated Mesh 3D Tiles"
            });

            view.map.add(layer);

            view.when(() => {
                layer.when(function () {
                    view.extent = layer.fullExtent;
                });
            });

            // Create and compile WebGL shader objects
            function createShader(gl, src, type) {
                const shader = gl.createShader(type);
                gl.shaderSource(shader, src);
                gl.compileShader(shader);
                return shader;
            }

            // Create and link WebGL program object
            function createProgram(gl, vsSource, fsSource) {
                const program = gl.createProgram();
                if (!program) {
                    console.error("Failed to create program");
                }
                const vertexShader = createShader(gl, vsSource, gl.VERTEX_SHADER);
                const fragmentShader = createShader(gl, fsSource, gl.FRAGMENT_SHADER);
                gl.attachShader(program, vertexShader);
                gl.attachShader(program, fragmentShader);
                gl.linkProgram(program);
                const success = gl.getProgramParameter(program, gl.LINK_STATUS);
                if (!success) {
                    // covenience console output to help debugging shader code
                    console.error(`Failed to link program:
                      error ${gl.getError()},
                      info log: ${gl.getProgramInfoLog(program)},
                      vertex: ${gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)},
                      fragment: ${gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)}
                      vertex info log: ${gl.getShaderInfoLog(vertexShader)},
                      fragment info log: ${gl.getShaderInfoLog(fragmentShader)}`);
                }
                return program;
            }

            // Derive a new subclass from RenderNode called LuminanceRenderNode
            const LuminanceRenderNode = RenderNode.createSubclass({
                constructor: function () {
                    // consumes and produces define the location of the the render node in the render pipeline
                    this.consumes = {required: ["composite-color"]};
                    this.produces = "composite-color";
                },
                // Ensure resources are cleaned up when render node is removed
                destroy() {
                    if (this.program) {
                        this.gl?.deleteProgram(this.program);
                    }
                    if (this.positionBuffer) {
                        this.gl?.deleteBuffer(this.positionBuffer);
                    }
                    if (this.vao) {
                        this.gl?.deleteVertexArray(this.vao);
                    }
                },
                properties: {
                    // 修改中心点
                    center: {
                        set: function (value) {
                            // Setting produces to null disables the render node
                            this.viewCenter[0] = value[0];
                            this.viewCenter[1] = value[1];
                            this.requestRender();
                        }
                    },
                    // 修改半径
                    radius: {
                        set: function (value = 0.1) {
                            // Setting produces to null disables the render node
                            this.viewCenter[2] = value;
                            this.requestRender();
                        }
                    },
                    // Define getter and setter for class member enabled
                    enabled: {
                        get: function () {
                            return this.produces != null;
                        },
                        set: function (value) {
                            // Setting produces to null disables the render node
                            this.produces = value ? "composite-color" : null;
                            this.requestRender();
                        }
                    }
                },

                render(inputs) {
                    // The field input contains all available framebuffer objects
                    // We need color texture from the composite render target
                    const input = inputs.find(({name}) => name === "composite-color");
                    const color = input.getTexture();

                    // Acquire the composite framebuffer object, and bind framebuffer as current target
                    const output = this.acquireOutputFramebuffer();

                    const gl = this.gl;

                    // Clear newly acquired framebuffer
                    gl.clearColor(0, 0, 0, 1);
                    gl.colorMask(true, true, true, true);
                    gl.clear(gl.COLOR_BUFFER_BIT);

                    // Prepare custom shaders and geometry for screenspace rendering
                    this.ensureShader(this.gl);
                    this.ensureScreenSpacePass(gl);

                    // Bind custom program
                    gl.useProgram(this.program);

                    // console.log(color.glName)

                    // Use composite-color render target to be modified in the shader
                    gl.activeTexture(gl.TEXTURE0);
                    gl.bindTexture(gl.TEXTURE_2D, color.glName);
                    gl.uniform1i(this.textureUniformLocation, 0);

                    gl.uniform3fv(this.textureUniformCenter, this.viewCenter);

                    // Issue the render call for a screen space render pass
                    gl.bindVertexArray(this.vao);
                    gl.drawArrays(gl.TRIANGLES, 0, 3);

                    // use depth from input on output framebuffer
                    output.attachDepth(input.getAttachment(gl.DEPTH_STENCIL_ATTACHMENT));

                    return output;
                },

                program: null,
                textureUniformLocation: null,
                positionLocation: null,
                vao: null,
                positionBuffer: null,
                // 默认圆参数
                viewCenter: new Float32Array([0,0,0.1]),

                // Setup screen space filling triangle
                ensureScreenSpacePass(gl) {
                    if (this.vao) {
                        return;
                    }

                    this.vao = gl.createVertexArray();
                    gl.bindVertexArray(this.vao);
                    this.positionBuffer = gl.createBuffer();
                    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
                    const vertices = new Float32Array([-1.0, -1.0, 3.0, -1.0, -1.0, 3.0]);
                    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

                    gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 0, 0);
                    gl.enableVertexAttribArray(this.positionLocation);

                    gl.bindVertexArray(null);
                },

                // Setup custom shader programs
                ensureShader(gl) {
                    if (this.program != null) {
                        return;
                    }
                    // The vertex shader program
                    // Sets position from 0..1 for fragment shader
                    // Forwards texture coordinates to fragment shader
                    const vshader = `#version 300 es

                    in vec2 position;
                    out vec2 uv;

                    void main() {
                        gl_Position = vec4(position, 0.0, 1.0);
                        uv = position * 0.5 + vec2(0.5);
                    }`;

                    // The fragment shader program applying a greyscsale conversion
                    const fshader = `#version 300 es

                    precision highp float;
                    out lowp vec4 fragColor;

                    in vec2 uv;
                    uniform sampler2D colorTex;

                    // 圆参数
                    uniform vec3 u_center;

                    // 计算宽高比，纠正圆形
                    vec2 calculateAspectRatio(vec2 size) {
                        return vec2(size[1] / size[0], 1.0);
                    }

                    // 是否在圆内
                    bool isInsideCircle(vec2 uv_) {

                      // 纹理尺寸
                      vec2 size = vec2(textureSize(colorTex, 0));

                      // 纠正范围
                      uv_ = (uv_ - u_center.rg)/calculateAspectRatio(size);

                      // 计算UV坐标到圆心的距离
                      float distance = length(uv_);

                      // 判断距离是否小于圆的半径
                      return distance < (u_center.b >= 0.3 ? 0.3: u_center.b);
                  }

                    void main() {

                        vec4 color = texture(colorTex, uv);

                        if(isInsideCircle(uv)){
                           // 圆内高亮
                           fragColor = vec4(color.rgb * 1.2, color.a);
                        }else{
                           fragColor = vec4(vec3(dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)))*0.7, color.a);
                        }
                    }`;

                    this.program = createProgram(gl, vshader, fshader);
                    this.textureUniformLocation = gl.getUniformLocation(this.program, "colorTex");
                    this.textureUniformCenter = gl.getUniformLocation(this.program, "u_center");

                    this.positionLocation = gl.getAttribLocation(this.program, "position");
                }
            });

            // Initializes the new custom render node and connects to SceneView
            const luminanceRenderNode = new LuminanceRenderNode({view});

            // Toggle button to enable/disable the custom render node
            const renderNodeToggle = document.getElementById("renderNodeToggle");
            renderNodeToggle.addEventListener("calciteSwitchChange", () => {
                luminanceRenderNode.enabled = !luminanceRenderNode.enabled;
            });


            // 监听鼠标离开图形事件
            view.on("pointer-move", function (event) {
                // 获取视口尺寸
                const viewWidth = view.width;
                const viewHeight = view.height;

                // 计算中心点
                const centerX = event.x / viewWidth;
                const centerY = 1 - event.y / viewHeight;

                luminanceRenderNode.center = [centerX,centerY];
            });

            const slider = new Slider({
                container: "sliderDiv",
                min: 0,
                max: 0.3,
                values: [ 0.1 ],
                snapOnClickEnabled: false,
                visibleElements: {
                    labels: false,
                    rangeLabels: true
                }
            });


            slider.on("thumb-drag", (event) => {
                // 修改半径
                luminanceRenderNode.radius = slider.values[0];
            });

            view.ui.add("renderNodeUI", "top-right");

            view.ui.add(slider, {
                position: "top-right"
            });
        });
    </script>
</head>
<body>
<calcite-block open heading="Toggle Render Node" id="renderNodeUI">
    <calcite-label layout="inline">
        Color
        <calcite-switch id="renderNodeToggle" checked></calcite-switch>
        Grayscale
    </calcite-label>
</calcite-block>
<div id="viewDiv">
</div>
<div id="sliderDiv"></div>
</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341

在这里插入图片描述

在线示例

ArcGIS Maps SDK for JavaScript 在线示例：探测效果（地图探测）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/861533
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号