zhoubichuan/web-cesium/project

Name: project
Author: zhoubichuan

Claude Code and agent skill by zhoubichuan/web-cesium

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Install

npx vskill@latest install zhoubichuan/web-cesium/project

SKILL.md

二.案例二

1.闪烁

:::demo

vue

<template>
  <createOpenStreetMapImageryProvider
    @cesiumBeforeCreate="cesiumBeforeCreate"
    @cesiumCreated="cesiumCreated"
    @cesiumBeforeMount="cesiumBeforeMount"
    @cesiumMounted="cesiumMounted"
    @cesiumBeforeDestory="cesiumBeforeDestory"
    @cesiumDestoryed="cesiumDestoryed"
  >
  </createOpenStreetMapImageryProvider>
</template>
 
<script>
export default {
  methods: {
    cesiumBeforeCreate() {},
    cesiumCreated() {},
    cesiumBeforeMount() {},
    cesiumMounted(viewer) {
      function computeCircle(radius) {
        let positions = []
        for (let i = 0; i < 360; i++) {
          let radians = Cesium.Math.toRadians(i)
          positions.push(
            new Cesium.Cartesian2(
              radius * Math.cos(radians),
              radius * Math.sin(radians)
            )
          )
        }
        return positions
      }
      let startTime = Cesium.JulianDate.now()
      let redTube = viewer.entities.add({
        name: "动态纹理",
        polylineVolume: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -85.0, 32.0, -85.0, 36.0, -89.0, 36.0,
          ]),
          shape: computeCircle(6000.0),
          material: new Cesium.ColorMaterialProperty(
            new Cesium.CallbackProperty(function () {
              return Cesium.Color.fromRandom({
                minimumRed: 0.75,
                minimumGreen: 0.75,
                minimumBlue: 0.75,
                alpha: 1.0,
              })
            }, false)
          ),
        },
      })
 
      viewer.zoomTo(viewer.entities)
    },
    cesiumBeforeDestory() {},
    cesiumDestoryed() {},
  },
}
</script>

:::

2.单目标雷达范围

:::demo

vue

<template>
  <createOpenStreetMapImageryProvider
    @cesiumBeforeCreate="cesiumBeforeCreate"
    @cesiumCreated="cesiumCreated"
    @cesiumBeforeMount="cesiumBeforeMount"
    @cesiumMounted="cesiumMounted"
    @cesiumBeforeDestory="cesiumBeforeDestory"
    @cesiumDestoryed="cesiumDestoryed"
  >
  </createOpenStreetMapImageryProvider>
</template>
 
<script>
export default {
  methods: {
    cesiumBeforeCreate() {},
    cesiumCreated() {},
    cesiumBeforeMount() {},
    cesiumMounted(viewer) {
      new Cesium.RadarPrimitive(viewer, {
        position: Cesium.Cartesian3.fromDegrees(117.224, 31.819, 128),
        angle: 50,
        radius: 300000,
        color: { red: 1, green: 0, blue: 0, alpha: 0.4 },
        lineColor: { red: 1, green: 1, blue: 1, alpha: 0.9 },
      })
    },
    cesiumBeforeDestory() {},
    cesiumDestoryed() {},
  },
}
</script>

:::

3.地形

:::demo

vue

<template>
  <urlTemplateImageryProvider
    @cesiumBeforeCreate="cesiumBeforeCreate"
    @cesiumCreated="cesiumCreated"
    @cesiumBeforeMount="cesiumBeforeMount"
    @cesiumMounted="cesiumMounted"
    @cesiumBeforeDestory="cesiumBeforeDestory"
    @cesiumDestoryed="cesiumDestoryed"
  >
  </urlTemplateImageryProvider>
</template>
 
<script>
export default {
  methods: {
    cesiumBeforeCreate() {},
    cesiumCreated() {},
    cesiumBeforeMount() {},
    cesiumMounted(viewer) {
      let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0.0)
      )
      viewer.scene.primitives.add(
        Cesium.Model.fromGltf({
          url: this.$withBase(
            "/Apps/SampleData/models/GroundVehicle/GroundVehicle.glb"
          ),
          modelMatrix: modelMatrix,
          scale: 10.0,
        })
      )
      //飞机
      viewer.entities.add({
        name: "飞机",
        position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2000),
        orientation: Cesium.Transforms.headingPitchRollQuaternion(
          Cesium.Cartesian3.fromDegrees(116.39, 39.91, 3000),
          new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), 0, 0)
        ), //和飞行姿态相关
        model: {
          uri: this.$withBase(
            "/Apps/SampleData/models/CesiumAir/Cesium_Air.glb"
          ),
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      })
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0.0),
        name: "绿色圆",
        ellipse: {
          semiMinorAxis: 10000.0,
          semiMajorAxis: 10000.0,
          height: 0.0,
          material: new Cesium.Color(0, 1, 1, 0.4),
        },
      })
      //      let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(90),
      //          Cesium.Math.toRadians(0),
      //          Cesium.Math.toRadians(0));
      //      let l = Cesium.Cartesian3.fromDegrees(116.39,39.91, 128);
      //      let sensorEntity = viewer.entities.add({
      //          position: l,
      //          orientation: Cesium.Transforms.headingPitchRollQuaternion(l, r),
      //          rectangularSensor: new Cesium.RectangularSensorGraphics({
      //              radius: 1000,
      //              xHalfAngle: Cesium.Math.toRadians(90),
      //              yHalfAngle: Cesium.Math.toRadians(90),
      //              material: new Cesium.Color(0, 1, 1, .4),
      //              lineColor: new Cesium.Color(0, 1, 1, 1),
      //              showScanPlane: true,
      //              scanPlaneColor: new Cesium.Color(0, 1, 1, 1),
      //              scanPlaneMode: "vertical",
      //              scanPlaneRate: 3,
      //              showThroughEllipsoid: !1
      //          })
      //      })
    },
    cesiumBeforeDestory() {},
    cesiumDestoryed() {},
  },
}
</script>

:::

4.地形开挖

:::demo

vue

<template>
  <urlTemplateImageryProvider
    @cesiumBeforeCreate="cesiumBeforeCreate"
    @cesiumCreated="cesiumCreated"
    @cesiumBeforeMount="cesiumBeforeMount"
    @cesiumMounted="cesiumMounted"
    @cesiumBeforeDestory="cesiumBeforeDestory"
    @cesiumDestoryed="cesiumDestoryed"
  >
  </urlTemplateImageryProvider>
</template>
 
<script>
export default {
  methods: {
    cesiumBeforeCreate() {},
    cesiumCreated() {},
    cesiumBeforeMount() {},
    cesiumMounted(viewer) {
      let terrainClipPlan = new Cesium.TerrainClipPlan(viewer, {
        height: 30,
        splitNum: 50,
        wallImg: this.$withBase("/Source/Images/excavate_side_min.jpg"),
        bottomImg: this.$withBase("/Source/Images/excavate_bottom_min.jpg"),
      })
      terrainClipPlan.updateData([
        { x: -2480825.779644006, y: 4823039.348573122, z: 3344998.9734951435 },
        { x: -2481057.6623671586, y: 4822939.719360245, z: 3344970.8291531955 },
        { x: -2481026.5803391673, y: 4823096.907581604, z: 3344768.5949868727 },
        { x: -2480854.0689538443, y: 4823168.905374106, z: 3344792.5711652176 },
      ])
    },
    cesiumBeforeDestory() {},
    cesiumDestoryed() {},
  },
}
</script>

:::

5.动态扩散点

:::demo

vue

<template>
  <createOpenStreetMapImageryProvider
    @cesiumBeforeCreate="cesiumBeforeCreate"
    @cesiumCreated="cesiumCreated"
    @cesiumBeforeMount="cesiumBeforeMount"
    @cesiumMounted="cesiumMounted"
    @cesiumBeforeDestory="cesiumBeforeDestory"
    @cesiumDestoryed="cesiumDestoryed"
  >
  </createOpenStreetMapImageryProvider>
</template>
 
<script>
export default {
  methods: {
    cesiumBeforeCreate() {},
    cesiumCreated() {},
    cesiumBeforeMount() {},
    cesiumMounted(viewer) {
 
      /*
          流动纹理线
           color 颜色
           duration 持续时间 毫秒
        */
      function EllipsoidFadeMaterialProperty(color, duration) {
        this._definitionChanged = new Cesium.Event()
        this._color = undefined
        this._colorSubscription = undefined
        this.color = color
        this.duration = duration
        this._time = new Date().getTime()
      }
      Cesium.defineProperties(EllipsoidFadeMaterialProperty.prototype, {
        isConstant: {
          get: function () {
            return false
          },
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged
          },
        },
        color: Cesium.createPropertyDescriptor("color"),
      })
      EllipsoidFadeMaterialProperty.prototype.getType = function (time) {
        return "EllipsoidFade"
      }
      EllipsoidFadeMaterialProperty.prototype.getValue = function (
        time,
        result
      ) {
        if (!Cesium.defined(result)) {
          result = {}
        }
        result.color = Cesium.Property.getValueOrClonedDefault(
          this._color,
          time,
          Cesium.Color.WHITE,
          result.color
        )
 
        result.time =
          ((new Date().getTime() - this._time) % this.duration) / this.duration
        return result
 
        // return Cesium.defined(result) || (result = {}),
        //     result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color),
        //     void 0 === this._time && (this._time = time.secondsOfDay),
        //     result.time = time.secondsOfDay - this._time,
        //     result
      }
      EllipsoidFadeMaterialProperty.prototype.equals = function (other) {
        return (
          this === other ||
          (other instanceof EllipsoidFadeMaterialProperty &&
            Property.equals(this._color, other._color))
        )
      }
      Cesium.EllipsoidFadeMaterialProperty = EllipsoidFadeMaterialProperty
      Cesium.Material.EllipsoidFadeType = "EllipsoidFade"
      Cesium.Material.EllipsoidFadeSource =
        "czm_material czm_getMaterial(czm_materialInput materialInput)\n" +
        "{\n" +
        "czm_material material = czm_getDefaultMaterial(materialInput);\n" +
        "material.diffuse = 1.5 * color.rgb;\n" +
        "vec2 st = materialInput.st;\n" +
        "float dis = distance(st, vec2(0.5, 0.5));\n" +
        "float per = fract(time);\n" +
        "if(dis > per * 0.5){\n" +
        "material.alpha = 0.0;\n" +
        "discard;\n" +
        "}else {\n" +
        "material.alpha = color.a  * dis / per / 1.0;\n" +
        "}\n" +
        "return material;\n" +
        "}"
      Cesium.Material._materialCache.addMaterial(
        Cesium.Material.EllipsoidFadeType,
        {
          fabric: {
            type: Cesium.Material.EllipsoidFadeType,
            uniforms: {
              color: new Cesium.Color(1.0, 0.0, 0.0, 1),
              time: 0,
            },
            source: Cesium.Material.EllipsoidFadeSource,
          },
          translucent: function (material) {
            return true
          },
        }
      )
 
      viewer.entities.add({
        name: "EllipsoidFade",
        position: Cesium.Cartesian3.fromDegrees(104.0, 30.0, 100.0),
        ellipse: {
          height: 0,
          semiMinorAxis: 30000.0,
          semiMajorAxis: 30000.0,
          material: new Cesium.EllipsoidFadeMaterialProperty(
            Cesium.Color.ORANGE,
            2000
          ),
        },
      })
 
      viewer.zoomTo(viewer.entities)
    },
    cesiumBeforeDestory() {},
    cesiumDestoryed() {},
  },
}
</script>

:::

Security

Security scanPassed, 95 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingsrc/base/project/2.skill.md

Popularity

Repository stars: 5
Repository forks: 1
7-day trend score: 9

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 20 Mar 2026, 7 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/zhoubichuan/web-cesium/project/badge)](https://verified-skill.com/skills/zhoubichuan/web-cesium/project)

Something wrong with this skill or its page? Tell us.