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

最新推荐文章于 2025-03-06 12:34:36 发布

mouka~

最新推荐文章于 2025-03-06 12:34:36 发布

阅读量6.5k

点赞数 5

分类专栏： Cesium 文章标签： html5

本文链接：https://blog.youkuaiyun.com/qq_38370387/article/details/118668228

版权

Cesium 专栏收录该内容

24 篇文章

订阅专栏

本文探讨了Cesium中Entity和Primitive的区别及其在材质应用上的差异。Entity更注重数据封装，而Primitive更接近WebGL底层。通过示例展示了如何使用GeoJSON数据创建GroundPrimitive，并应用水波纹材质，强调了材质属性如normalMap、frequency等的设置。同时，提到了GroundPrimitive与Primitive在贴地特性上的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

成果演示:

官方河流效果

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"代码对应的图片即为下面这个。