arcgis 做闪烁定位

2022-01-23  本文已影响0人  haibalai

在 做地图定位时候 往往都是高亮边框的方式来做样式展示,今天通过gl-matrix 结合做 闪烁定位,有点像照相机 闪了一下的感觉

```html

闪烁定位

html,

body,

#viewDiv {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

}

#info {

position: absolute;

right: 100px;

bottom: 100px;

color: white;

font-family: 'Gruppo', cursive;

}

#info h1 {

font-family: 'Orbitron', sans-serif;

}

precision highp float;

uniform mat3 u_transform;

uniform mat3 u_display;

attribute vec2 a_position;

void main() {

gl_Position.xy = (u_display * (u_transform * vec3(a_position, 1.0))).xy;

gl_Position.zw = vec2(0.0, 1.0);

}

precision highp float;

void main() {

gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);

}

precision mediump float;

attribute vec2 a_position;

varying vec2 v_texcoord;

void main(void) {

gl_Position = vec4(a_position, 0.0, 1.0);

v_texcoord = 0.5 * (a_position + 1.0);

}

precision mediump float;

uniform sampler2D u_texture;

uniform ivec2 u_size;

varying vec2 v_texcoord;

vec4 sample(int dx, int dy) {

return texture2D(u_texture, v_texcoord + vec2(dx, dy) / vec2(u_size));

}

float height(int dx, int dy) {

return length(sample(dx, dy).ra);

}

void main(void) {

float dx = -(height(+1, 0) - height(-1, 0));

float dy = -(height(0, +1) - height(0, -1));

gl_FragColor = vec4(length(vec2(dx, dy)), 0.0, 0.0, 1.0) * texture2D(u_texture, v_texcoord).a;

}

precision mediump float;

attribute vec2 a_position;

varying vec2 v_texcoord;

void main(void) {

gl_Position = vec4(a_position, 0.0, 1.0);

v_texcoord = 0.5 * (a_position + 1.0);

}

precision mediump float;

uniform sampler2D u_texture;

uniform ivec2 u_size;

varying vec2 v_texcoord;

vec4 sample(int dx, int dy) {

return texture2D(u_texture, v_texcoord + vec2(dx, dy) / vec2(u_size));

}

void main(void) {

vec4 blurred = vec4(0.0, 0.0, 0.0, 0.0);

for (int i = -1; i <= 1; ++i) {

for (int j = -1; j <= 1; ++j) {

blurred += sample(i, j);

}

}

gl_FragColor = blurred / 9.0;

}

precision mediump float;

attribute vec2 a_position;

varying vec2 v_texcoord;

更多消息参考小专栏https://xiaozhuanlan.com/topic/4816923075

上一篇 下一篇

猜你喜欢

热点阅读