arcgis-custom-rendering

用途

本技能面向 ArcGIS Maps SDK for JavaScript，用于创建自定义图层类型并实现 WebGL 渲染。适用于自定义图层、2D/3D WebGL 渲染、自定义瓦片源以及 SceneView 中的后处理效果。

主要能力

技能覆盖以下渲染类：

RenderNode：用于 SceneView 中的后处理效果（3D）。
BaseLayerView2D：自定义 2D 画布渲染。
BaseLayerViewGL2D：WebGL 加速的 2D 渲染。
BaseTileLayer：自定义瓦片源与处理（2D/3D）。
BaseDynamicLayer：按需动态渲染（2D/3D）。
BaseElevationLayer：自定义高程/地形数据（3D）。

使用方式

导入模式

ESM（npm）方式：

// 3D custom rendering
import RenderNode from "@arcgis/core/views/3d/webgl/RenderNode.js";

// 2D custom rendering
import BaseLayerView2D from "@arcgis/core/views/2d/layers/BaseLayerView2D.js";
import BaseLayerViewGL2D from "@arcgis/core/views/2d/layers/BaseLayerViewGL2D.js";

// Custom layer bases
import BaseTileLayer from "@arcgis/core/layers/BaseTileLayer.js";
import BaseDynamicLayer from "@arcgis/core/layers/BaseDynamicLayer.js";
import BaseElevationLayer from "@arcgis/core/layers/BaseElevationLayer.js";
import Layer from "@arcgis/core/layers/Layer.js";

// Utilities
import esriRequest from "@arcgis/core/request.js";
import Color from "@arcgis/core/Color.js";

CDN（动态导入）方式：

const RenderNode = await $arcgis.import(
  "@arcgis/core/views/3d/webgl/RenderNode.js",
);
const BaseTileLayer = await $arcgis.import(
  "@arcgis/core/layers/BaseTileLayer.js",
);
const BaseLayerViewGL2D = await $arcgis.import(
  "@arcgis/core/views/2d/layers/BaseLayerViewGL2D.js",
);

RenderNode（3D 后处理）

RenderNode 在 SceneView 的 WebGL 2 管线中创建自定义渲染通道。关键概念包括：consumes（节点所需的渲染目标输入）、produces（产出的渲染目标名称，设为 null 可禁用）、gl（只读的 WebGL 2 上下文）、view（SceneView 引用）、render(inputs)（重写以实现渲染逻辑）、acquireOutputFramebuffer()（获取用于渲染的帧缓冲）、requestRender()（请求新帧）。

可通过 properties 中的 enabled 属性实现启用/禁用，切换 produces 值并调用 requestRender()。

GLSL ES 3.0 片元着色器示例（亮度/灰度转换）：

#version 300 es
precision highp float;
out lowp vec4 fragColor;
in vec2 uv;
uniform sampler2D colorTex;

void main() {
  vec4 color = texture(colorTex, uv);
  // Luminance (grayscale) conversion
  fragColor = vec4(vec3(dot(color.rgb, vec3(0.2126, 0.7152, 0.0722))), color.a);
}

自定义 TileLayer

通过 BaseTileLayer.createSubclass 创建，关键方法包括 getTileUrl(level, row, col)（返回瓦片 URL 字符串）、fetchTile(level, row, col, options)（获取并处理瓦片，返回 canvas 或 image）、load()（图层加载时调用）、refresh()（重新加载所有瓦片）。可结合 reactiveUtils.watch 监听属性变化并触发 refresh()。

自定义 DynamicLayer

通过 BaseDynamicLayer.createSubclass 创建，实现 getImageUrl(extent, width, height)，在画布上按地理范围转换像素坐标并绘制内容。

自定义高程图层

通过 BaseElevationLayer.createSubclass 创建，在 load() 中加载底层 ElevationLayer，在 fetchTile 中对高程值进行夸张处理。

WebGL 自定义 2D 渲染（BaseLayerViewGL2D）

通过 BaseLayerViewGL2D.createSubclass 创建，在 attach() 中初始化着色器程序、缓冲与 VAO，在 render(renderParameters) 中使用 displayViewMatrix3 等状态绘制，在 detach() 中清理资源。自定义图层通过 Layer.createSubclass 并实现 createLayerView(view) 返回对应 LayerView。

BaseLayerView2D（基于 Canvas）

通过 BaseLayerView2D.createSubclass 创建，在 render 中可使用 state.size（视口尺寸）、state.resolution（每像素地图单位）、state.extent（当前可见范围）以及 state.toScreen 进行坐标转换。

LayerView 生命周期方法：attach()（加入视图时初始化资源）、render(renderParameters)（每帧绘制）、detach()（移除时清理资源）、requestRender()（请求下一帧重绘）。

LERC 解码

可结合 lerc 库对 LERC 数据进行解码，将像素值归一化后写入 ImageData 并返回画布。

自定义混合图层

通过 BaseTileLayer 子类，在 fetchTile 中并行获取多个图层的瓦片，使用 globalCompositeOperation = "multiply" 进行混合。

适用场景

自定义瓦片源与瓦片处理（如着色、混合）。
2D 画布或 WebGL 加速的自定义可视化。
SceneView 中的后处理效果（如颜色处理、景深）。
自定义高程/地形数据与高程夸张。
按需动态渲染。
LERC 数据解码可视化。
deck.gl 集成等复杂 WebGL 可视化。

限制与注意事项

CORS：外部瓦片服务器必须支持 CORS，才能进行基于画布的处理。
画布尺寸：必须与 tileInfo.size[0] 完全匹配，否则会产生渲染伪影。
内存管理：始终在 detach() 或 destroy() 中清理 WebGL 资源（程序、缓冲、VAO、纹理）。
中止信号：始终将 options?.signal 传给 esriRequest 以正确取消请求。
坐标系：像素对齐渲染使用 displayViewMatrix3，地图坐标渲染使用 viewMatrix3。
RenderNode WebGL 版本：SceneView 使用 WebGL 2，着色器必须使用 #version 300 es。
createSubclass 模式：使用 BaseTileLayer.createSubclass({...})，不要使用 ES6 class extends。

参考示例

layers-custom-tilelayer — 自定义着色瓦片图层
layers-custom-blendlayer — 多图层混合
layers-custom-lerc-2d — LERC 数据解码
layers-custom-elevation-exaggerated — 高程夸张
layers-custom-dynamiclayer — 动态按需渲染
custom-gl-tiles — WebGL 瓦片渲染
custom-gl-visuals — 复杂 WebGL 可视化
custom-gl-animated-lines — 动画线条渲染
custom-render-node-color — RenderNode 颜色后处理
custom-render-node-dof — 景深效果
custom-render-node-windmills — 3D 几何渲染
custom-lv-deckgl — deck.gl 集成

技能介绍

用途