Cesium实现垂直空心圆柱（竖直管道）

cty1897

已于 2024-03-28 18:12:46 修改

阅读量1.5k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签：前端 javascript webgl web vue.js 前端框架 html

于 2024-03-28 18:11:30 首次发布

本文链接：https://blog.youkuaiyun.com/cty1897/article/details/137118985

cesium 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在项目中使用Turf.js库和Cesium库生成具有厚度的垂直空心管道的方法，通过内外圈多边形圆的计算和Cesium的polygon实体创建实现。

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

在项目中，有时会有实现 垂直空心圆柱（管道）的需求；

对于倾斜的或水平的管道实现起来比较容易，网上也有一些教程，但是对于垂直的管道就会发现生成的管道没有厚度，网上对于竖直管道生成的分享也几乎没有，这里就给大家分享一下我的实现思路。

先上代码：

温馨提示：此方法需要借助 turf.js 库

turf 库官网链接：GET START | Turf.js中文网

var center = [112.044137, 38.708863]; // 圆柱中心
var radius_out = 0.005; //外圈半径
var radius_in = 0.003; //内圈半径
var options = {
  steps: 1000, //几边形圆，4，四边形
  units: 'kilometers', //千米
  properties: { foo: 'bar' },
};
//外圈
var circle_wai = turf.circle(center, radius_out, options);
let waiquan = circle_wai.geometry.coordinates[0].flat();
waiquan.splice(waiquan.length - 2, 2);
//内圈
var circle_nei = turf.circle(center, radius_in, options);
let neiquan = circle_nei.geometry.coordinates[0].flat();
neiquan.splice(neiquan.length - 2, 2);
//生成带孔多边形
const polygonHoles = viewer.entities.add({
  polygon: {
    hierarchy: {
      positions: Cesium.Cartesian3.fromDegreesArray(waiquan),
      holes: [
        {
          positions: Cesium.Cartesian3.fromDegreesArray(neiquan),
        },
      ],
    },
    extrudedHeight: 1545, //圆柱底部高度
    material: Cesium.Color.fromCssColorString('#1ca5ff').withAlpha(0.8),
    height: 1570, //圆柱顶部高度
  }
 });
viewer.zoomTo(polygonHoles);

思路：

该方法是借助 turf 库的 turf.circle(）方法，基于一个点坐标，内、外圈半径，生成两组多边形圆坐标，只要指定边数越大，生成的多边形圆就越接近圆形。拿到两组多边形圆的坐标后使用 Cesium 方法生成带孔的 polygon 实体即可。

如果对你有帮助, 就请点一个赞吧