AI 助理
备案控制台
开发者社区 云计算 文章 正文

cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法

2023-10-20 272
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法

cesium中绘制立方体、设置材质、操作相机及获取鼠标经纬度和高度的方法


1. 绘制立方体


1.1 效果



1.2 实现


通过Entity和CZML来实现在cesium上绘制立方体。


1.2.1 Entity


通过Entity添加立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var redBox = viewer.entities.add({
            name : 'Red box with black outline',
            position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
            box : {
                dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material : Cesium.Color.RED.withAlpha(0.5),
                outline : true,
                outlineColor : Cesium.Color.BLACK
            }
        });
        viewer.zoomTo(viewer.entities);
    </script>
</body>
</html>


1.2.2 CZML


通过CZML添加立方体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
       //CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景
        var czml = [{
            "id" : "document",
            "name" : "box",
            "version" : "1.0"
        },{
            "id" : "shape2",
            "name" : "Red box with black outline",
            "position" : {
                "cartographicDegrees" : [-107.0, 40.0, 300000.0]
            },
            "box" : {
                "dimensions" : {
                    "cartesian": [400000.0, 300000.0, 500000.0]
                },
                "material" : {
                    "solidColor" : {
                        "color" : {
                            "rgba" : [255, 0, 0, 128]
                        }
                    }
                },
                "outline" : true,
                "outlineColor" : {
                    "rgba" : [0, 0, 0, 255]
                }
            }
        }];
        var viewer = new Cesium.Viewer('cesiumContainer');
        var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
    </script>
</body>
</html>


2. 设置材质


2.1 构造时赋材质


2.1.1 效果



2.1.2 代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var entity = viewer.entities.add({       //添加一个椭圆
            position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
            ellipse : {
                semiMinorAxis : 250000.0,
                semiMajorAxis : 400000.0,
                material : Cesium.Color.BLUE.withAlpha(0.5)//可设置不同的MaterialProperty
            }
        });
        viewer.zoomTo(viewer.entities);
    </script>
</body>
</html>


2.2 构造后赋材质


2.2.1 效果



2.2.2 代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var entity = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
            ellipse : {
                semiMinorAxis : 250000.0,
                semiMajorAxis : 400000.0,
            }
        });
        var ellipse = entity.ellipse;  
        ellipse.material = Cesium.Color.RED;
        ellipse.material = new Cesium.CheckerboardMaterialProperty({    //CheckerboardMaterialProperty设置棋盘纹理
            evenColor : Cesium.Color.WHITE,
            oddColor : Cesium.Color.BLACK,
            repeat : new Cesium.Cartesian2(4, 4)
        });
        ellipse.material = new Cesium.StripeMaterialProperty({  //StripeMaterialProperty设置条纹纹理
            evenColor : Cesium.Color.WHITE,
            oddColor : Cesium.Color.BLACK,
            repeat : 32,
            offset:20,
            orientation:Cesium.StripeOrientation.VERTICAL 
        });
        ellipse.material = new Cesium.GridMaterialProperty({    //GridMaterialProperty设置网格纹理
            color : Cesium.Color.YELLOW,
            cellAlpha : 0.2,
            lineCount : new Cesium.Cartesian2(8, 8),
            lineThickness : new Cesium.Cartesian2(2.0, 2.0)
        });
        viewer.zoomTo(viewer.entities);
    </script>
</body>
</html>


3.操作相机


cesium中提供三种方式对相机camera进行操作：

setView

flyto

lookAt


3.1 setView


setView有两种计算视角方式。


1.Cartesian3方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.camera.setView({
            destination : Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0),     
            orientation: {       //设置视角
                heading : Cesium.Math.toRadians(20.0), // east, default value is 0.0 (north)左右摆头
                pitch : Cesium.Math.toRadians(-90.0),    // default value (looking down)上下抬头 -90俯视 0平视 90仰视(默认俯视)
                roll : 0.0                             // default value
            }
        });
    </script>
</body>
</html>

2.Rectangle方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.camera.setView({
            destination: Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0),//west, south, east, north
            orientation: {
                heading : Cesium.Math.toRadians(20.0), // 方向
                pitch : Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll : 0
            } 
        });
    </script>
</body>
</html>


3.2 flyto


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        viewer.camera.flyTo({
            destination :Cesium.Cartesian3.fromDegrees(116.435314,39.960521, 15000.0), // 设置位置
            orientation: {
                heading :Cesium.Math.toRadians(20.0), // 方向
                pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
                roll :0
            },
            duration:5, // 设置飞行持续时间，默认会根据距离来计算
            complete:function () {
            // 到达位置后执行的回调函数
            },
            cancle:function () {
            // 如果取消飞行则会调用此函数
            },
            pitchAdjustHeight:-90, // 如果摄像机飞越高于该值，则调整俯仰俯仰的俯仰角度，并将地球保持在视口中。
            maximumHeight:5000, // 相机最大飞行高度
            flyOverLongitude:100, // 如果到达目的地有2种方式，设置具体值后会强制选择方向飞过这个经度(这个，很好用)
        });
    </script>
</body>
</html>


3.3 lookAt


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cxxx</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="Build/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="height: 100%"></div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer');
        var center = Cesium.Cartesian3.fromDegrees(114.44455, 22.0444);//camera视野的中心点坐标
        var heading = Cesium.Math.toRadians(50.0);
        var pitch = Cesium.Math.toRadians(-20.0);
        var range = 5000.0;
        viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
    </script>
</body>
</html>


4.cesium获取鼠标的实时经纬度和高度信息。


getPosition (viewer){
  var cesiumViewer = this.viewer;
  var canvas = cesiumViewer.scene.canvas;
  //得到当前三维场景的椭球体
  var ellipsoid = cesiumViewer.scene.globe.ellipsoid;
  // 定义当前场景的画布元素的事件处理
  var handler = new Cesium.ScreenSpaceEventHandler(canvas);
  //设置鼠标移动事件的处理函数，这里负责监听x,y坐标值变化
  handler.setInputAction(function(movement){
      //捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
      var cartesian = cesiumViewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);
      if(cartesian){
          //将笛卡尔三维坐标转为地图坐标（弧度）
          var cartographic = cesiumViewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          //将地图坐标（弧度）转为十进制的度数
          var lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
          var lng = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
          var height = (cesiumViewer.camera.positionCartographic.height/1000).toFixed(2);
          // console.log(lng+','+lat+","+height);
        _this.mousePosition = lng+", "+lat+", "+height;
      }
  },Cesium.ScreenSpaceEventType.MOUSE_MOVE) //此枚举类型用于对鼠标事件进行分类:向下、向上、单击、双击、按住按钮时移动和移动。具体参考文档Cesium.ScreenSpaceEventType
}
南木元元
目录
相关文章
不雨_亦潇潇
|
7月前
|
API C++ 计算机视觉
【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++
【opencv3】鼠标框选矩形并显示当前像素点坐标和矩形中心点坐标C++
不雨_亦潇潇
135 0
baker_zhuang
|
2月前
ThreeJs创建圆环
这篇文章介绍了如何在Three.js中创建一个圆环（torus），包括设置圆环的几何形状、材质以及将其添加到场景中的具体步骤。
baker_zhuang
55 0
ThreeJs创建圆环
baker_zhuang
|
2月前
ThreeJs绘制线
这篇文章详细说明了如何使用Three.js来绘制线条，包括创建线几何体、设置材质以及将线条添加到3D场景中的具体步骤。
baker_zhuang
33 1
爱你三千遍斯塔克
|
5月前
|
前端开发
Canvas绘画之多边形画板，绘制多边形，携带背景图和绘画功能，带有全部清除的功能，用这个
Canvas绘画之多边形画板，绘制多边形，携带背景图和绘画功能，带有全部清除的功能，用这个
爱你三千遍斯塔克
31 0
朝阳39
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）
朝阳39
483 0
朝阳39
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（二）
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（二）
朝阳39
91 0
疯狂学习GIS
|
7月前
|
定位技术
ArcGIS面要素最小外接矩形、外接圆的绘制方法
ArcGIS面要素最小外接矩形、外接圆的绘制方法
疯狂学习GIS
110 1
zuoben
|
API
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
zuoben
478 0
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
anny_4243
SwiftUI—通过Path路径绘制不规则的线条和图形
SwiftUI—通过Path路径绘制不规则的线条和图形
anny_4243
654 0
SwiftUI—通过Path路径绘制不规则的线条和图形
恬静的小魔龙Unity
|
图形学
鼠标控制物体旋转、移动、缩放（Unity3D）
Unity3D对于鼠标操作物体的旋转、移动、缩放的功能点使用的比较多。 今天就分享如何使用Unity实现鼠标对于物体的旋转、移动、缩放。
恬静的小魔龙Unity
1050 0

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    Nginx的启动、停止与重启
  • 3
    Hive之数据倾斜的原因和解决方法
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Node.js 中流操作实践
  • 6
    传奇龙版地图查看器
  • 7
    调整DC的网络对网络是否会有影响?
  • 8
    How to maintain Oracle10g Recyclebin?
  • 9
    你知道自己感染了恶意软件吗？
  • 10
    Groovy 快速入门
  • 1
    Python学习的自我理解和想法（9）
    89
  • 2
    Kimi 上线视觉思考模型，K1 系列强化学习模型正式开放，无需借助外部 OCR 处理图像与文本进行思考并回答
    99
  • 3
    CosyVoice 2.0：阿里开源升级版语音生成大模型，支持多语言和跨语言语音合成，提升发音和音色等的准确性
    78
  • 4
    Megrez-3B-Omni：无问芯穹开源最强端侧全模态模型，支持理解图像、音频和文本三种模态数据
    50
  • 5
    FreeScale：无需微调即可提升模型的图像生成能力，生成 8K 分辨率的高质量图像
    37
  • 6
    Freestyler：微软联合西工大和香港大学推出说唱音乐生成模型，支持控制生成的音色、风格和节奏等
    36
  • 7
    《C 语言与统计假设检验：洞察人工智能模型性能差异》
    82
  • 8
    《C 语言赋能：物联网环境下人工智能应用的能耗优化之道》
    21
  • 9
    《C 语言助力神经网络剪枝：优化模型的卓越之道》
    25
  • 10
    《C 语言复数运算：赋能人工智能信号处理新境界》
    20

    • 相关电子书

    更多
  • 3D动画的菜谱式灯光与云渲染
  • 360°全景视频播放器的实现原理
  • 低代码开发师（初级）实战教程
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。