SuperMap iClient3D for Cesium请求geojson数据构造水面符号

作者：xkf

前言

大多数时候我们水面符号都是在iDesktop中构建然后前端使用的,但是有的项目上因为需要展现洪水的涨跌,导致水面的高度以及位置会出现变化,这种情况下不适用在桌面做好的水面，需要在前端根据水面数据实时构建水面,那么怎么构建呢？

1. 发布数据

首先需要通过后端接口或者是tomcat之类的将数据处理为一个接口,让前端可以正常进行请求,我这里就将数据直接放在SuperMap iServer下.如图：

接口地址为: http://172.16.15.203:8090/iserver/heliu.geojson，返回内容如下:

2. 前端获取接口数据并构建面坐标数组

主要代码如下:

$.ajax({
   type: "get",
     url: "http://172.16.15.203:8090/iserver/heliu.geojson",
     // data: queryData,
     success: function (result) {
         var resultObj = JSON.parse(result);
         console.log(resultObj);
         let tmpArr = []
         let positions = resultObj.features[0].geometry.coordinates[0][0]
         for (let i = 0; i < positions.length; i++) {
             for (let j = 0; j < positions[i].length; j++) {
                 if (j == 2) {
                     positions[i][j] = 5000
                 } tmpArr.push(positions[i][j])
             }
         } console.log(tmpArr) // if (resultObj.featureCount> 0) {
         onQueryComplete(tmpArr);
         // }
     },
     error: function (msg) {
         console.log(msg);
     },
 });

3. 通过primitive构建水面符号

主要代码如下:

let polygon = new Cesium.PolygonGeometry({
     polygonHierarchy: new Cesium.PolygonHierarchy(
         Cesium.Cartesian3.fromDegreesArrayHeights(features)
     ),
 });
 let geometry = Cesium.PolygonGeometry.createGeometry(polygon);
 // instances.push(new Cesium.GeometryInstance({
 // geometry: geometry,
 // }));
 let tmp = viewer.scene.primitives.add(
     new Cesium.Primitive({
         geometryInstances: new Cesium.GeometryInstance({
             geometry: geometry,
         }),
         asynchronous: false,
         appearance: new Cesium.EllipsoidSurfaceAppearance({
             material: new Cesium.Material({

                 fabric: {
                     type: "Water",
                     uniforms: {
                         baseWaterColor: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5), // 水面颜色
                         normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
                         diffuse: new Cesium.Color(64 / 255.0, 157 / 255.0, 253 / 255.0, 0.5),
                         frequency: 100, // 起伏程度
                         animationSpeed: 0.001, // 流动速度
                         amplitude: 5,
                         specularIntensity: 0.1, // 反射太阳光的强度 
                     }
                 }
             })
         }),
     })
 );

最终效果如图:
在这里插入图片描述