arcgis 做闪烁定位
在 做地图定位时候 往往都是高亮边框的方式来做样式展示，今天通过gl-matrix 结合做 闪烁定位，有点像照相机 闪了一下的感觉
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>闪烁定位</title>
<link href="https://fonts.googleapis.com/css?family=Gruppo|Orbitron&display=swap" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<style type="text/css" media="screen">
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;
}
</style>
<script id="features-vs" type="x-shader/x-vertex">
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);
}
</script>
<script id="features-fs" type="x-shader/x-fragment">
precision highp float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script id="edges-vs" type="x-shader/x-vertex">
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);
}
</script>
<script id="edges-fs" type="x-shader/x-fragment">
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;
}
</script>
<script id="blur-vs" type="x-shader/x-vertex">
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);
}
</script>
<script id="blur-fs" type="x-shader/x-fragment">
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;
}
</script>
<script id="lighting-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_position;
varying vec2 v_texcoord;
更多消息参考小专栏https://xiaozhuanlan.com/topic/4816923075
