2022-03-10----cesium实现渐变边界墙

473 阅读1分钟

先上效果: image.png 代码:

  axios.get('/data/provinceboundary.json').then((res) => {
    const geometries = res.data.geometries
    const geometryInstances: any[] = []
    geometries.forEach((geometry: any) => {
      const coordinates = geometry.coordinates
      for (let i = 0; i < coordinates.length; i++) {
        coordinates[i].push(10000)
      }

      const geometryInstance = new GeometryInstance({
        geometry: new WallGeometry({
          positions: Cartesian3.fromDegreesArrayHeights(coordinates.flat()),
        }),
      })
      geometryInstances.push(geometryInstance)
      // console.log(coordinates.length)
      // // console.log(coordinates.length)

      // console.log(coordinates)
      // provinceBoundaryDataSource.entities.add(
      //   new Entity({
      //     wall: new WallGraphics({
      //       positions: Cartesian3.fromDegreesArrayHeights(coordinates.flat()),
      //       material: Color.GREEN,
      //       fill: true,
      //       outline: false,

      //       shadows: ShadowMode.ENABLED,
      //     }),
      //   })
      // )
    })
    provinceBoundaryPrimitive = viewer.scene.primitives.add(
      new Primitive({
        geometryInstances: geometryInstances,
        appearance: new EllipsoidSurfaceAppearance({
          material: Material.fromType('Fade', {
            fadeInColor: new Color(22 / 255, 132 / 255, 129 / 255, 0.0),
            fadeOutColor: Color.BISQUE,
            repeat: false,
            fadeDirection: new Cartesian2(0.0, 1.0),
            maximumDistance: 1.0,
            time: {
              x: 0.0,
              y: 0.0,
            },
          }),
          aboveGround: true,
        }),
      })
    )

    // viewer.dataSources.add(provinceBoundaryDataSource)
    // changeTime()
  })