cesium 加载管道数据

文章介绍了如何使用Cesium.js库在Web应用中处理GeoJson数据,添加和移除管道,以及根据视图级别调整管道宽度的实现方法。

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

/*

 * @Date: 2023-09-14 13:34:16

 * @LastEditors: gaoxd

 * @LastEditTime: 2023-09-14 17:59:27

 * @Description:

 */

const pipeArr = [] // 所有的管道数据

var handler = null;

/**

 * @description 添加管道

 * @param {* geojson 地址} url

 * @param {* 管道名称 } name

 * @param {* 管道颜色 } color

 */

export function addPolylineVolume(url, name, color) {

  if (!handler) {

    handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

  }

  addWheelHeight()

  var geojsonPromise = Cesium.GeoJsonDataSource.load(url);

  viewer.dataSources.add(geojsonPromise).then((dataSource) => {

    var entities = dataSource.entities.values;

    for (var i = 0; i < entities.length; i++) {

      var entity = entities[i];

      if (entity.polyline && entity.polyline.positions) {

        var positions = entity.polyline.positions.getValue();

        entity.polylineVolume = new Cesium.PolylineVolumeGraphics({

          positions: positions,

          shape: computedCircle(130),

          material: Cesium.Color.fromCssColorString(color),

        })

        entity.nameForDelete = name

      }

    }

    pipeArr.push({

      name,

      entities

    })

  });

}

/**

 * @description 移除管道

 */

export function removePolylineVolume(name) {

  pipeArr.forEach(el => {

    if (el.name == name) {

      el.entities.forEach(enty => {

        enty.show = false

      })

    }

  })

}

function updateWidth(width = 10) {

  pipeArr.forEach(el => {

    el.entities.forEach(enty => {

      if (enty.polylineVolume) {

        enty.polylineVolume.shape = computedCircle(width)

      }

      console.log('enty :>> ', enty);

    })

  })

}

function addWheelHeight() {

  viewer.camera.moveEnd.addEventListener(() => {

    // 视高 km

    let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);

    // 方位角

    let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);

    // 俯仰角

    let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);

    // 翻滚角

    let roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);

    // 级别

    let level = 0;

    let tileRender = viewer.scene._globe._surface._tilesToRender;

    if (tileRender && tileRender.length > 0) {

      level = viewer.scene._globe._surface._tilesToRender[0]._level;

    }

    let str = `级数:${level} 视高:${alt}km  方位角:${heading}° 俯仰角:${pitch}° 翻滚角:${roll}°`;

    console.log('str :>> ', str);

    if (level > 14) {

      updateWidth(10)

    } else if (level > 11 && level < 13) {

      updateWidth(50)

    }

  })

}


 

/**

 * @description 设置管道半径

 * @radius 管道半径

 */

function computedCircle(radius) {

  var positions = [];

  for (var i = 0; i < 36; i++) {

    var radian = Cesium.Math.toRadians(i * 10);

    var x = radius * Math.cos(radian);

    var y = radius * Math.sin(radian);

    positions.push(new Cesium.Cartesian2(x, y));

  }

  return positions;

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值