gisviewer-vue3-arcgis
Version:
在应用中引入私服的包， 项目根目录下 新建文件 .npmrc 在 .npmrc 中对包源进行配置：
170 lines (161 loc) • 10.6 kB
JavaScript
import R from "@arcgis/core/layers/GraphicsLayer";
import T from "@arcgis/core/views/2d/layers/BaseLayerViewGL2D";
import { mat3 as h, vec2 as v, vec3 as U } from "gl-matrix";
import * as B from "@arcgis/core/core/reactiveUtils";
const V = T.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() {
this.transform = h.create(), this.extrude = h.create(), this.translationToCenter = v.create(), this.screenTranslation = v.create(), this.display = h.fromValues(NaN, 0, 0, 0, NaN, 0, -1, 1, 1), this.screenScaling = U.fromValues(NaN, NaN, 1), this.needsUpdate = !1;
},
// Called once a custom layer is added to the map.layers collection and this layer view is instantiated.
attach: function() {
const t = this.context, i = () => {
this.needsUpdate = !0, this.requestRender();
};
this.watcher = B.on(
() => this.layer.graphics,
"change",
i
);
const s = `
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;
}`, u = `
precision highp float;
uniform float u_current_time;
varying float v_distance;
varying float v_side;
varying vec4 v_color;
const float TRAIL_SPEED = 90.0;
const float TRAIL_LENGTH = 300.0;
const float TRAIL_CYCLE = 500.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;
}`, d = t.createShader(t.VERTEX_SHADER);
t.shaderSource(d, s), t.compileShader(d);
const m = t.createShader(t.FRAGMENT_SHADER);
if (t.shaderSource(m, u), t.compileShader(m), this.program = t.createProgram(), t.attachShader(this.program, d), t.attachShader(this.program, m), t.bindAttribLocation(this.program, this.aPosition, "a_position"), t.bindAttribLocation(this.program, this.aOffset, "a_offset"), t.bindAttribLocation(this.program, this.aDistance, "a_distance"), t.bindAttribLocation(this.program, this.aSide, "a_side"), t.bindAttribLocation(this.program, this.aColor, "a_color"), t.linkProgram(this.program), t.deleteShader(d), t.deleteShader(m), this.uTransform = t.getUniformLocation(this.program, "u_transform"), this.uExtrude = t.getUniformLocation(this.program, "u_extrude"), this.uDisplay = t.getUniformLocation(this.program, "u_display"), this.uCurrentTime = t.getUniformLocation(this.program, "u_current_time"), this.vertexBuffer = t.createBuffer(), this.indexBuffer = t.createBuffer(), this.indexBufferSize = 0, t.getParameter(t.VERSION).startsWith("WebGL 2.0"))
this.vao = t.createVertexArray(), this.bindVertexArray = (l) => t.bindVertexArray(l), this.deleteVertexArray = (l) => t.deleteVertexArray(l);
else {
const l = t.getExtension("OES_vertex_array_object");
this.vao = l.createVertexArrayOES(), this.bindVertexArray = (A) => l.bindVertexArrayOES(A), this.deleteVertexArray = (A) => l.deleteVertexArrayOES(A);
}
this.bindVertexArray(this.vao), t.bindBuffer(t.ARRAY_BUFFER, this.vertexBuffer), t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.indexBuffer), t.enableVertexAttribArray(this.aPosition), t.enableVertexAttribArray(this.aOffset), t.enableVertexAttribArray(this.aDistance), t.enableVertexAttribArray(this.aSide), t.enableVertexAttribArray(this.aColor), t.vertexAttribPointer(this.aPosition, 2, t.FLOAT, !1, 28, 0), t.vertexAttribPointer(this.aOffset, 2, t.FLOAT, !1, 28, 8), t.vertexAttribPointer(this.aDistance, 1, t.FLOAT, !1, 28, 16), t.vertexAttribPointer(this.aSide, 1, t.FLOAT, !1, 28, 20), t.vertexAttribPointer(this.aColor, 4, t.UNSIGNED_BYTE, !0, 28, 24), this.bindVertexArray(null), this.centerAtLastUpdate = v.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: function() {
this.watcher.remove();
const t = this.context;
t.deleteBuffer(this.vertexBuffer), t.deleteBuffer(this.indexBuffer), this.deleteVertexArray(this.vao), t.deleteProgram(this.program);
},
// Called every time a frame is rendered.
//@ts-ignore
render: function(t) {
const i = t.context, s = t.state;
if (this.updatePositions(t), this.indexBufferSize === 0)
return;
h.identity(this.transform), this.screenTranslation[0] = s.pixelRatio * s.size[0] / 2, this.screenTranslation[1] = s.pixelRatio * s.size[1] / 2, h.translate(this.transform, this.transform, this.screenTranslation), h.rotate(
this.transform,
this.transform,
Math.PI * s.rotation / 180
), this.screenScaling[0] = s.pixelRatio / s.resolution, this.screenScaling[1] = -s.pixelRatio / s.resolution, h.scale(this.transform, this.transform, this.screenScaling), h.translate(this.transform, this.transform, this.translationToCenter), h.identity(this.extrude), h.rotate(this.extrude, this.extrude, Math.PI * s.rotation / 180);
const u = 8;
h.scale(this.extrude, this.extrude, [u, -u, 1]), this.display[0] = 2 / (s.pixelRatio * s.size[0]), this.display[4] = -2 / (s.pixelRatio * s.size[1]), i.useProgram(this.program), i.uniformMatrix3fv(this.uTransform, !1, this.transform), i.uniformMatrix3fv(this.uExtrude, !1, this.extrude), i.uniformMatrix3fv(this.uDisplay, !1, this.display), i.uniform1f(this.uCurrentTime, performance.now() / 1e3), this.bindVertexArray(this.vao), i.enable(i.BLEND), i.blendFunc(i.ONE, i.ONE_MINUS_SRC_ALPHA), i.drawElements(i.TRIANGLES, this.indexBufferSize, i.UNSIGNED_SHORT, 0), this.requestRender();
},
// Called internally from render().
//@ts-ignore
updatePositions: function(t) {
const i = t.context, s = t.stationary, u = t.state;
if (!s) {
v.sub(this.translationToCenter, this.centerAtLastUpdate, u.center), this.requestRender();
return;
}
if (!this.needsUpdate && this.translationToCenter[0] === 0 && this.translationToCenter[1] === 0)
return;
this.centerAtLastUpdate.set(u.center), this.translationToCenter[0] = 0, this.translationToCenter[1] = 0, this.needsUpdate = !1;
const d = this.layer.graphics;
let m = 0, l = 0;
for (let p = 0; p < d.items.length; ++p) {
const x = d.items[p].geometry.paths[0];
m += x.length * 2, l += (x.length - 1) * 6;
}
const A = new ArrayBuffer(7 * m * 4), a = new Float32Array(A), o = new Uint8Array(A), n = new Uint16Array(l);
let r = 0, f = 0;
for (let p = 0; p < d.items.length; ++p) {
const y = d.items[p], x = y.geometry.paths[0], c = y.attributes.color, e = {};
for (let g = 0; g < x.length; ++g) {
const b = x[g];
if (e.current) {
e.delta = [b[0] - e.current[0], b[1] - e.current[1]];
const L = Math.sqrt(
//@ts-ignore
e.delta[0] * e.delta[0] + e.delta[1] * e.delta[1]
);
e.direction = [e.delta[0] / L, e.delta[1] / L];
const _ = [-e.direction[1], e.direction[0]];
if (e.normal) {
e.offset = [e.normal[0] + _[0], e.normal[1] + _[1]];
const E = Math.sqrt(
//@ts-ignore
e.offset[0] * e.offset[0] + e.offset[1] * e.offset[1]
);
e.offset[0] /= E, e.offset[1] /= E;
const S = e.normal[0] * e.offset[0] + e.normal[1] * e.offset[1];
e.offset[0] /= S, e.offset[1] /= S;
} else
e.offset = [_[0], _[1]];
a[r * 7 + 0] = //@ts-ignore
e.current[0] - this.centerAtLastUpdate[0], a[r * 7 + 1] = //@ts-ignore
e.current[1] - this.centerAtLastUpdate[1], a[r * 7 + 2] = e.offset[0], a[r * 7 + 3] = e.offset[1], a[r * 7 + 4] = e.distance, a[r * 7 + 5] = 1, o[4 * (r * 7 + 6) + 0] = c[0], o[4 * (r * 7 + 6) + 1] = c[1], o[4 * (r * 7 + 6) + 2] = c[2], o[4 * (r * 7 + 6) + 3] = 255, a[r * 7 + 7] = //@ts-ignore
e.current[0] - this.centerAtLastUpdate[0], a[r * 7 + 8] = //@ts-ignore
e.current[1] - this.centerAtLastUpdate[1], a[r * 7 + 9] = -e.offset[0], a[r * 7 + 10] = -e.offset[1], a[r * 7 + 11] = e.distance, a[r * 7 + 12] = -1, o[4 * (r * 7 + 13) + 0] = c[0], o[4 * (r * 7 + 13) + 1] = c[1], o[4 * (r * 7 + 13) + 2] = c[2], o[4 * (r * 7 + 13) + 3] = 255, r += 2, g >= 2 && (n[f + 0] = r - 4, n[f + 1] = r - 3, n[f + 2] = r - 2, n[f + 3] = r - 3, n[f + 4] = r - 1, n[f + 5] = r - 2, f += 6), e.normal = _, e.distance += L;
} else
e.distance = 0;
e.current = b;
}
e.offset = [e.normal[0], e.normal[1]], a[r * 7 + 0] = e.current[0] - this.centerAtLastUpdate[0], a[r * 7 + 1] = e.current[1] - this.centerAtLastUpdate[1], a[r * 7 + 2] = e.offset[0], a[r * 7 + 3] = e.offset[1], a[r * 7 + 4] = e.distance, a[r * 7 + 5] = 1, o[4 * (r * 7 + 6) + 0] = c[0], o[4 * (r * 7 + 6) + 1] = c[1], o[4 * (r * 7 + 6) + 2] = c[2], o[4 * (r * 7 + 6) + 3] = 255, a[r * 7 + 7] = e.current[0] - this.centerAtLastUpdate[0], a[r * 7 + 8] = e.current[1] - this.centerAtLastUpdate[1], a[r * 7 + 9] = -e.offset[0], a[r * 7 + 10] = -e.offset[1], a[r * 7 + 11] = e.distance, a[r * 7 + 12] = -1, o[4 * (r * 7 + 13) + 0] = c[0], o[4 * (r * 7 + 13) + 1] = c[1], o[4 * (r * 7 + 13) + 2] = c[2], o[4 * (r * 7 + 13) + 3] = 255, r += 2, n[f + 0] = r - 4, n[f + 1] = r - 3, n[f + 2] = r - 2, n[f + 3] = r - 3, n[f + 4] = r - 1, n[f + 5] = r - 2, f += 6, e.current = null;
}
i.bindBuffer(i.ARRAY_BUFFER, this.vertexBuffer), i.bufferData(i.ARRAY_BUFFER, A, i.STATIC_DRAW), i.bindBuffer(i.ELEMENT_ARRAY_BUFFER, this.indexBuffer), i.bufferData(i.ELEMENT_ARRAY_BUFFER, n, i.STATIC_DRAW), this.indexBufferSize = n.length;
}
}), F = R.createSubclass({
//@ts-ignore
createLayerView: function(t) {
if (t.type === "2d")
return new V({
view: t,
layer: this
});
}
});
export {
F as default
};