Cesium环境实现Geojson河流效果并实现贴地(任何Polygon均可)

成果演示:

官方河流效果

primitive和entity之间的区别与应用

河流材质效果 Cesium.Material

看了这个文档我尝试加载geojson然后遍历设置每个Entity的材质,发现两个材质新建的对象不一样

Entity中材质设置是new Cesium.MaterialProperty()

Primitive中材质设置是new Cesium.Material()

明显可以发现二者的材质是有区别的,主要是因为Entity用法简单偏向数据,基于底层的封装。Primitive更接近webgl底层,没有entity各种各样的附加属性。

GroundPrimitive和Primitive区别就是一个是贴地一个没有贴地(其中之一)

参数:

id:这里没有看到id使用,代码中有个字典,key就是id(图层id),用来标识图层,Cesium有的时候想获取某个图层(里面没有图层的概念,这里用字典来存放所有的图层)。

data:Geojson面数据

//data就是geojson数据  
AddWaterLayer(id, data) {
    let promise = Cesium.GeoJsonDataSource.load(data);
    //数据加载后渲染
    promise.then((ds) => {
      let instances = [];
      let entitys = ds.entities.values;
      entitys.forEach((e) => {
        let geometry = new Cesium.GeometryInstance({
          geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(
              e.polygon.hierarchy.getValue().positions
            ),
            extrudedHeight: 0,
            height: 0,
            vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
          }),
          attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(
              Cesium.Color.fromRandom({
                alpha: 0.5,
              })
            ),
          },
        });
        instances.push(geometry);
      });
      let primitive = new Cesium.GroundPrimitive({
        geometryInstances: instances, //合并
        //某些外观允许每个几何图形实例分别指定某个属性
        appearance: new Cesium.EllipsoidSurfaceAppearance({
          aboveGround: true, //在椭球面上
          material: new Cesium.Material({
            fabric: {
              type: "Water",
              uniforms: {
                normalMap: "./Image/waterNormals.jpg",
                frequency: 8000.0, // 控制波数的数字。
                animationSpeed: 0.02, // 控制水的动画速度的数字。
                amplitude: 5.0, // 控制水波振幅的数字。
                specularIntensity: 0.8, // 控制镜面反射强度的数字。
              },
            },
          }),
        }),
      });
      this._viewer.scene.primitives.add(primitive);
      this._viewer.zoomTo(primitive);
    });
    //this._viewer.dataSources.add(promise);
  }

normalMap: "./Image/waterNormals.jpg"代码对应的图片即为下面这个。

QQ群(GIS开发交流、数据共享、软件使用):993836992

  • 5
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
实现动态河流效果,你可以使用Cesium Material Image这个库来创建一个河流的材质,然后将其应用于Cesium的Primitive对象上。 以下是实现效果的步骤: 1. 创建一个河流的材质 你可以使用Cesium Material Image库中的Cesium.Material.fromType()方法来创建一个河流的材质。以下是一个示例: ```javascript var riverMaterial = Cesium.Material.fromType('Image', { image: 'path/to/river/texture.jpg', repeat: new Cesium.Cartesian2(10.0, 1.0), // 河流纹理的重复次数 color: new Cesium.Color(1.0, 1.0, 1.0, 1.0) // 河流颜色 }); ``` 2. 创建一个Primitive对象 你可以使用Cesium.Primitive库中的Cesium.Primitive.fromGeometry()方法来创建一个Primitive对象。以下是一个示例: ```javascript var geometry = new Cesium.PlaneGeometry({ vertexFormat: Cesium.VertexFormat.POSITION_AND_ST }); var riverPrimitive = new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: geometry, attributes: { st: new Cesium.GeometryInstanceAttribute({ componentDatatype: Cesium.ComponentDatatype.FLOAT, componentsPerAttribute: 2, value: new Float32Array([0.0, 0.0, 10.0, 1.0]) // 河流纹理的重复次数 }) }, id: 'river' }), appearance: new Cesium.MaterialAppearance({ material: riverMaterial }) }); ``` 3. 将Primitive对象添加到场景中 你可以使用Cesium的Scene对象中的scene.primitives.add()方法将Primitive对象添加到场景中。以下是一个示例: ```javascript viewer.scene.primitives.add(riverPrimitive); ``` 4. 动态更新河流效果 你可以通过修改Primitive对象的属性来实现动态更新河流效果。例如,你可以通过修改GeometryInstance的st属性来实现纹理的滚动。 ```javascript var riverInstance = riverPrimitive.getGeometryInstanceAttributes('river'); var currentTime = viewer.clock.currentTime; var seconds = currentTime.secondsOfDay; var delta = seconds * 0.01; // 河流滚动速度 var repeat = riverInstance.st.value; repeat.x += delta; repeat.y += delta; riverInstance.st.value = repeat; ``` 注意:以上示例中的代码仅用于说明如何使用Cesium Material Image库实现动态河流效果,并且可能需要根据你的具体应用进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值