@Cesium学习记录 -- 24/01/11

最新推荐文章于 2024-09-01 23:06:50 发布

lingang.li

最新推荐文章于 2024-09-01 23:06:50 发布

阅读量510

点赞数 8

分类专栏： Cesium 文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_45099497/article/details/135535842

版权

Cesium 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何利用Cesium.js库在3D地图中绘制带有自定义边框的环形区域，通过极坐标计算顶点并应用矩阵变换，强调了设置高度和边框参数的重要性。

摘要由CSDN通过智能技术生成

使用Cesium 绘制环形

效果图在这里插入图片描述

let  center = Cesium.Cartesian3.fromDegrees(116.61011, 40.08363); //扇形中心点坐标
let startAngle = Cesium.Math.toRadians(-22.5); //起始角度
let endAngle = Cesium.Math.toRadians(22.5); //结束角度
let granularity = 0.005; //精度
let radius = [30000,60000,120000]; //圆的半径单位米
for (let index = 0; index < radius.length; index++) {
                    const element = radius[index];
                    let  radius1 = index? radius[index-1]:0; // 内部弧线开始距离
                    var radius2 = element; // 外部弧线结束距离
                    console.log(radius1,radius2)
                          // 创建点的数组：内部弧线 -> 外部弧线 -> 连线连接
                               let  positions = [];
									// 先添加内部弧线的点
									for (var i = startAngle; i < endAngle; i += granularity) {
									 // 这个循环用于遍历内圈的角度，从起始角度开始到结束角度，每步以粒度大小递增
									    var relativePosition = new Cesium.Cartesian3(radius1 * Math.cos(i), radius1 * Math.sin(i), 0);  
									    // 对内圈每一个点，计算其在极坐标系下的位置
									    var position = new Cesium.Cartesian3();
									     // 定义一个新的笛卡尔坐标点，用于保存转换后的点位置
									    var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(center);
									     // 根据中心点坐标，计算出对应的4维转换矩阵
									    Cesium.Matrix4.multiplyByPoint(eastNorthUp, relativePosition, position); 
									    // 使用转换矩阵将极坐标系下的点转化为世界坐标系下的点
									    positions.push(position); 
									    // 将转换后的点加入到顶点数组中
									}
									// 再添加外部弧线的点，注意这里应该反向添加
									for (var i = endAngle; i > startAngle; i -= granularity) {
									 // 这个循环用于遍历外圈的角度，从结束角度开始到起始角度，每步以粒度大小递减，这是为了保证多边形的顶点是逆时针排列的
									    var relativePosition = new Cesium.Cartesian3(radius2 * Math.cos(i), radius2 * Math.sin(i), 0); 
									 	// 对外圈每一个点，计算其在极坐标系下的位置
									    var position = new Cesium.Cartesian3(); 
									    // 定义一个新的笛卡尔坐标点，用于保存转换后的点位置
									    var eastNorthUp = Cesium.Transforms.eastNorthUpToFixedFrame(center); 
									    // 根据中心点坐标，计算出对应的4维转换矩阵
									    Cesium.Matrix4.multiplyByPoint(eastNorthUp, relativePosition, position); 
									    // 使用转换矩阵将极坐标系下的点转化为世界坐标系下的点
									    positions.push(position); // 将转换后的点加入到顶点数组中
									}                    
									   	  // console.log(positions)
                            var entity = this.viewer.entities.add({
                                polygon: {
                             	   hierarchy:positions,//配置方式
                                  //  hierarchy:{
                                  //      positions:positions,
                                 //       holes: []
                                 //   } ,
                                    height:1,//这个地方必须设置不然下面边框设置不会生效
                                    // 这是颜色的透明度，你可以根据需要进行调整
                                    material: Cesium.Color.fromRandom({alpha : 0.5 }),//赋值为随机颜色
                                    outline: true,//边框是否开启
                                    outlineColor: new Cesium.Color(20, 52, 124, 0.5),//边框颜色
                                    outlineWidth:10//边框宽度
                                }
                            });
                }