解析如下代码：
import BaseLayerViewGL2D from "@arcgis/core/views/2d/layers/BaseLayerViewGL2D.js";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer.js";
import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
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,
aTexcoord: 2,
aDistance: 3,
aUpright: 4,
constructor() {
// Geometrical transformations that must be recomputed
// from scratch at every frame.
this.transform = mat3.create();
this.rotation = mat3.create();
this.translationToCenter = vec2.create();
this.screenTranslation = vec2.create();
this.display = mat3.create();
// 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() {
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 = () => {
// Tessellate graphics.
this.promises = [];
this.layer.graphics.forEach(this.processGraphic.bind(this));
Promise.all(this.promises).then((meshes) => {
this.meshes = meshes;
this.needsUpdate = true;
this.requestRender();
});
};
this.watcher = reactiveUtils.watch(
() => this.layer.graphics,
requestUpdate,
{
initial: true
}
);
// Define and compile shaders.
const vertexSource = `
precision highp float;
uniform mat3 u_transform;
uniform mat3 u_rotation;
uniform mat3 u_display;
attribute vec2 a_position;
attribute vec2 a_offset;
attribute vec2 a_texcoord;
attribute float a_distance;
attribute float a_upright;
varying vec2 v_texcoord;
void main(void) {
vec3 transformedOffset = mix(u_rotation * vec3(a_offset, 0.0), vec3(a_offset, 0.0), a_upright);
gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0) + transformedOffset)).xy;
gl_Position.zw = vec2(0.0, 1.0);
v_texcoord = a_texcoord;
}`;
const fragmentSource = `
precision highp float;
varying vec2 v_texcoord;
void main(void) {
gl_FragColor = vec4(v_texcoord, 0.9, 0.5);
}`;
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.aTexcoord, "a_texcoord");
gl.bindAttribLocation(this.program, this.aDistance, "a_distance");
gl.bindAttribLocation(this.program, this.aUpright, "a_upright");
// 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.uRotation = gl.getUniformLocation(
this.program,
"u_rotation"
);
this.uDisplay = gl.getUniformLocation(this.program, "u_display");
// 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;
// When certain conditions occur, we update the buffers and re-compute and re-encode
// all the attributes. When buffer update occurs, we also take note of the current center
// of the view state, and we reset a vector called `translationToCenter` to [0, 0], meaning that the
// current center is the same as it was when the attributes were recomputed.
this.centerAtLastUpdate = vec2.fromValues(
this.view.state.center[0],
this.view.state.center[1]
);
},
// Called once a custom layer is removed from the map.layers collection and this layer view is destroyed.
detach() {
// Stop watching the `layer.graphics` collection.
this.watcher.remove();
const gl = this.context;
// Delete buffers and programs.
gl.deleteBuffer(this.vertexBuffer);
gl.deleteBuffer(this.indexBuffer);
gl.deleteProgram(this.program);
},
// Called every time a frame is rendered.
render(renderParameters) {
const gl = renderParameters.context;
const state = renderParameters.state;
// Update vertex positions. This may trigger an update of
// the vertex coordinates contained in the vertex buffer.
// There are three kinds of updates:
// - Modification of the layer.graphics collection ==> Buffer update
// - The view state becomes non-stationary ==> Only view update, no buffer update
// - The view state becomes stationary ==> Buffer update
this.updatePositions(renderParameters);
// If there is nothing to render we return.
if (this.indexBufferSize === 0) {
return;
}
// Update view `transform` matrix; it converts from map units to pixels.
mat3.identity(this.transform);
this.screenTranslation[0] = (state.pixelRatio * state.size[0]) / 2;
this.screenTranslation[1] = (state.pixelRatio * state.size[1]) / 2;
mat3.translate(
this.transform,
this.transform,
this.screenTranslation
);
mat3.rotate(
this.transform,
this.transform,
(Math.PI * state.rotation) / 180
);
mat3.scale(this.transform, this.transform, [
state.pixelRatio / state.resolution,
-state.pixelRatio / state.resolution
]);
mat3.translate(
this.transform,
this.transform,
this.translationToCenter
);
// Update view `rotate` matrix; it is the rotation component of the full `transform` matrix.
mat3.identity(this.rotation);
mat3.rotate(
this.rotation,
this.rotation,
(Math.PI * state.rotation) / 180
);
// Update view `display` matrix; it converts from pixels to normalized device coordinates.
mat3.identity(this.display);
mat3.translate(this.display, this.display, [-1, 1]);
mat3.scale(this.display, this.display, [
2 / (state.pixelRatio * state.size[0]),
-2 / (state.pixelRatio * state.size[1])
]);
// Draw.
gl.useProgram(this.program);
gl.uniformMatrix3fv(this.uTransform, false, this.transform);
gl.uniformMatrix3fv(this.uRotation, false, this.rotation);
gl.uniformMatrix3fv(this.uDisplay, false, this.display);
gl.uniform1f(this.uCurrentTime, performance.now() / 1000.0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.enableVertexAttribArray(this.aPosition);
gl.enableVertexAttribArray(this.aOffset);
gl.enableVertexAttribArray(this.aTexcoord);
gl.enableVertexAttribArray(this.aDistance);
gl.enableVertexAttribArray(this.aUpright);
gl.vertexAttribPointer(this.aPosition, 2, gl.FLOAT, false, 32, 0);
gl.vertexAttribPointer(this.aOffset, 2, gl.FLOAT, false, 32, 8);
gl.vertexAttribPointer(this.aTexcoord, 2, gl.FLOAT, false, 32, 16);
gl.vertexAttribPointer(this.aDistance, 1, gl.FLOAT, false, 32, 24);
gl.vertexAttribPointer(this.aUpright, 1, gl.FLOAT, false, 32, 28);
gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.disable(gl.CULL_FACE);
gl.drawElements(
gl.TRIANGLES,
this.indexBufferSize,
gl.UNSIGNED_SHORT,
0
);
// Request new render because markers are animated.
this.requestRender();
},
processGraphic(g) {
switch (g.geometry.type) {
case "extent":
this.promises.push(
this.tessellateExtent(g.geometry).then(
(mesh) => {
return {
mesh: mesh,
attributes: g.attributes,
symbol: g.symbol
};
}
)
);
break;
case "point":
this.promises.push(
this.tessellatePoint(g.geometry, {
x: (g.attributes && g.attributes.x != null) ? g.attributes.x : -16,
y: (g.attributes && g.attributes.y != null) ? g.attributes.y : 16,
width: (g.attributes && g.attributes.width != null) ? g.attributes.width : 32,
height: (g.attributes && g.attributes.height != null) ? g.attributes.height : 32,
}).then(
(mesh) => {
return {
mesh: mesh,
attributes: g.attributes,
symbol: g.symbol
};
})
);
break;
case "multipoint":
this.promises.push(
this.tessellateMultipoint(g.geometry, {
x: (g.attributes && g.attributes.x != null) ? g.attributes.x : -16,
y: (g.attributes && g.attributes.y != null) ? g.attributes.y : 16,
width: (g.attributes && g.attributes.width != null) ? g.attributes.width : 32,
height: (g.attributes && g.attributes.height != null) ? g.attributes.height : 32,
}).then(
(mesh) => {
return {
mesh: mesh,
attributes: g.attributes,
symbol: g.symbol
};
}
)
);
break;
case "polyline":
this.promises.push(
this.tessellatePolyline(
g.geometry,
(g.attributes && g.attributes.width != null) ? g.attributes.width : 20
).then(
(mesh) => {
return {
mesh: mesh,
attributes: g.attributes,
symbol: g.symbol
};
}
)
);
break;
case "polygon":
this.promises.push(
this.tessellatePolygon(g.geometry).then(
(mesh) => {
return {
mesh: mesh,
attributes: g.attributes,
symbol: g.symbol
};
}
)
);
break;
}
},
// Called internally from render().
updatePositions(renderParameters) {
const gl = renderParameters.context;
const stationary = renderParameters.stationary;
const state = renderParameters.state;
// If we are not stationary we simply update the `translationToCenter` vector.
if (!stationary) {
vec2.sub(
this.translationToCenter,
this.centerAtLastUpdate,
state.center
);
this.requestRender();
return;
}
// If we are stationary, the `layer.graphics` collection has not changed, and
// we are centered on the `centerAtLastUpdate`, we do nothing.
if (
!this.needsUpdate &&
this.translationToCenter[0] === 0 &&
this.translationToCenter[1] === 0
) {
return;
}
// Otherwise, we record the new encoded center, which imply a reset of the `translationToCenter` vector,
// we record the update time, and we proceed to update the buffers.
this.centerAtLastUpdate.set(state.center);
this.translationToCenter[0] = 0;
this.translationToCenter[1] = 0;
this.needsUpdate = false;
// Generate vertex data.
const vertexCount = this.meshes.reduce((vertexCount, item) => { return vertexCount + item.mesh.vertices.length; }, 0);
const indexCount = this.meshes.reduce((indexCount, item) => { return indexCount + item.mesh.indices.length; }, 0);
const vertexData = new Float32Array(vertexCount * 8);
const indexData = new Uint16Array(indexCount);
let currentVertex = 0;
let currentIndex = 0;
for (let meshIndex = 0; meshIndex < this.meshes.length; ++meshIndex) {
const item = this.meshes[meshIndex];
const mesh = item.mesh;
const upright = (item.attributes && item.attributes.upright) ? 1 : 0;
for (let i = 0; i < mesh.indices.length; ++i) {
const idx = mesh.indices[i];
indexData[currentIndex] = currentVertex + idx;
currentIndex++;
}
for (let i = 0; i < mesh.vertices.length; ++i) {
const v = mesh.vertices[i];
vertexData[currentVertex * 8 + 0] = v.x - this.centerAtLastUpdate[0];
vertexData[currentVertex * 8 + 1] = v.y - this.centerAtLastUpdate[1];
vertexData[currentVertex * 8 + 2] = v.xOffset;
vertexData[currentVertex * 8 + 3] = v.yOffset;
vertexData[currentVertex * 8 + 4] = v.uTexcoord;
vertexData[currentVertex * 8 + 5] = v.vTexcoord;
vertexData[currentVertex * 8 + 6] = v.distance;
vertexData[currentVertex * 8 + 7] = upright;
currentVertex++;
}
}
// Upload data to the GPU
gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indexData, gl.STATIC_DRAW);
// Record number of indices.
this.indexBufferSize = indexCount;
}
});
const CustomLayer = GraphicsLayer.createSubclass({
createLayerView: function (view) {
if (view.type === "2d") {
return new CustomLayerView2D({
view: view,
layer: this
});
}
}
});
export default CustomLayer;
本文介绍了C#中属性的概念及其使用方式。属性允许程序员为程序元素定义新的声明信息，并能在运行时环境中检索这些信息。文章还举例说明了如何通过自定义属性来增强程序的描述性和功能性。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
