Cesium边界掩膜、发光

最新推荐文章于 2025-07-29 01:46:31 发布

Jason9510

最新推荐文章于 2025-07-29 01:46:31 发布

阅读量748

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Cesium 文章标签： cesium javascript vue

本文链接：https://blog.csdn.net/qq_26610239/article/details/142833936

Cesium 专栏收录该内容

20 篇文章

订阅专栏

项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

核心代码

const glowBorder = new Cesium.Primitive({
  geometryInstances: instance,
  appearance: new Cesium.PolylineMaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        type: 'MyBorderColor',
        uniforms: {
          color: new Cesium.Color(0.2, 0.2, 0.8, 1.0),
          glowPower: 0.25,
          taperPower: 1
        },
        source: `
            uniform vec4 color;
            uniform float glowPower;
            uniform float taperPower;
            czm_material czm_getMaterial(czm_materialInput materialInput)
            {
              czm_material material = czm_getDefaultMaterial(materialInput);
              vec2 st = materialInput.st;
              float glow = glowPower / abs(st.t - 0.5) - (glowPower / 0.5);

              if (taperPower <= 0.99999) {
                  glow *= min(1.0, taperPower / (0.5 - st.s * 0.5) - (taperPower / 0.5));
              }

              vec4 fragColor;
              fragColor.rgb = max(vec3(glow - 1.0 + color.rgb), color.rgb);
              fragColor.a = clamp(0.0, 1.0, glow) * color.a;
              fragColor = czm_gammaCorrect(fragColor);

              material.emission = fragColor.rgb;
              material.alpha = fragColor.a;

              return material;
            }
          `
      }
    })
  }),
  allowPicking: false
})