Arcgis 与 Pixi.js 可视化 glsl 特效篇（二十六）-526互联

这次我们用pixi.js和arcgis js结合

我们先定义一下传入数据结构 symbol 暂时不做

对于data 数据 ,
toScreen 方法参考链接提示
app 的构建参考链接提示

let data = this.options.data;
for(let item of data){
//转换屏幕坐标，获取颜色，半径和线条粗细样式
let geo = item.geometry
let XY1 = toScreen(geo);
const geometry = new PIXI.Geometry()
.addAttribute("position", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2)
.addAttribute('uv', // the attribute name
[0, 0, // u, v
1, 0, // u, v
1, 1,
0, 1], // u, v
2)
.addIndex([0, 1, 2, 0, 2, 3]);
const fragmentShader = `
uniform float iTime;
const vec2 iResolution = vec2(1.0,1.0);
varying vec2 vUv;
#define PASS_COUNT 1
vec4 iMouse = vec4(.0, 0, 0.2, 0);
float fBrightness = 2.5;
// Number of angular segments
float fSteps = 121.0;
float fParticleSize = 0.015;
float fParticleLength = 0.5 / 60.0;
// Min and Max star position radius. Min must be present to prevent stars too near camera
float fMinDist = 0.8;
float fMaxDist = 5.0;
float fRepeatMin = 1.0;
float fRepeatMax = 2.0;
// fog density
float fDepthFade = 0.8;
float Random(float x)
{
return fract(sin(x * 123.456) * 23.4567 + sin(x * 345.678) * 45.6789 + sin(x * 456.789) * 56.789);
}
vec3 GetParticleColour( const in vec3 vParticlePos, const in float fParticleSize, const in vec3 vRayDir )
{
vec2 vNormDir = normalize(vRayDir.xy);
float d1 = dot(vParticlePos.xy, vNormDir.xy) / length(vRayDir.xy);
vec3 vClosest2d = vRayDir * d1;