cesium(绘制管道)

在上文中,我们给出了官方中实现地图透明的例子.该例子中,使用entity绘制了几条管道,通过该地下管道的是否可见表现透明的效果.但是在实际项目中,管道可能是通过几万几十万的点位数据进行绘制的,这个时候使用entity会导致页面崩溃(亲证!有兴趣的也可以自己再试一下.)因此在项目中通过cesium中的primitive来进行管道的绘制.以下仅提供此绘制方法.entity的实现方式在上篇官方的示例中就有,此处不再举例.

//假设此时你已经有了一个管道点位数据的数组.数组形式可能是下面的格式.
//data.json文件中
[
    {
        "coordinates": [
          {
            "diameter": 0.3,//管道的直径大小
            "dataList": [
              [
                116.30413998846797,//此处是管道点位的经纬度数据.
                39.95332714451584,
                -0.0499999999999999//此处是管道点位的深度数据
              ],
              [
                116.30412764001969,
                39.953295954136976,
                -0.05
              ]
            ]
           }
        ]
    }
]
//应用cesium的组件中--在这个组件中你需要找一个合适的时机去调用该方法.此处不附代码.
handleDrawPipe(data=pipeData){
      const Cesium = this.cesium
      let instances = []
      data.map(pipe=>{
        pipe.coordinates.map((coord,index)=>{
          let diameter = coord.diameter
          if(coord.dataList.length > 1){
            let arr = []
            coord.dataList.forEach(d=>{
              arr.push(d[0],d[1],d[2])
            })
            let volume = new Cesium.PolylineVolumeGeometry({
              polylinePositions:Cesium.Cartesian3.fromDegreesArrayHeights(arr),
              width:1,
              shapePositions:this.computerPipe(diameter),
              cornerType:Cesium.CornerType.ROUNDED,
              ellipsoid: Cesium.Ellipsoid.WGS84,
              vertexFormat: Cesium.VertexFormat.POSITION_AND_COLOR
            });
            let geometry = Cesium.PolylineVolumeGeometry.createGeometry(volume);
            if(!geometry) return 
            let color = Cesium.Color.fromCssColorString("#000000")//此处添加需要绘制的管道的颜色.fromCssColorString此方法使我们可以直接使用16进制的色值.
            //Cesium.Color.LIGHTSLATEGRAY此种方法可以使用颜色的英文单词.官方也给出了支持的单词列表.需注意:颜色单词的每一个字母都需要大写!!!
            let instance = new Cesium.GeometryInstance({
                geometry: geometry,
                attributes: {
                  color :new Cesium.ColorGeometryInstanceAttribute.fromColor(color),
                },
            });
            instances.push(instance)
          }
        })
      })
      let primitive = new Cesium.Primitive({
            geometryInstances: instances, // 多个instance组成的集合
            appearance: new Cesium.PerInstanceColorAppearance({
              translucent: false,   // 根据需要设置
              flat: true,           // 去除光照效果，显示实体颜色
              faceForward: false    
            }),
            asynchronous: false,//用于确定Primitive是否是异步创建.--不写则默认为true,运行此代码时报错:_workerName必须指定.
          });
        this._viewer.scene.primitives.add(primitive);
        //此处原本有定位至管道位置处,但是写了未生效.
    },
    //根据管道直径确定每一个面的位置--类似于three.js中使用一个面的四个点的位置来绘制一个四边形
    computerPipe(radius){
      let Cesium = this.cesium
      var positions = [];
        for (var i = 0; i < 360; i++) {
            var radians = Cesium.Math.toRadians(i);
            positions.push(
                new Cesium.Cartesian2(
                    radius * Math.cos(radians),
                    radius * Math.sin(radians)
                )
            );
        }
        return positions;
    }

官方颜色列表 cesium.com/learn/cesiu…