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

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

2023-10-20 278
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
}
南木元元
目录
相关文章
zuoben
|
定位技术
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
zuoben
1564 0
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
baker_zhuang
|
2月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图，替换为自定义的图像或视频纹理。
baker_zhuang
113 1
Cesium修改地球的贴图为视频或者图片
朝阳39
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（一）
朝阳39
503 0
朝阳39
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（二）
canvas系列教程03 —— 线的样式、绘制文本、操作图片（图片的渲染、缩放、裁剪、切割、平铺、特效）、变换元素（平移、缩放、旋转）（二）
朝阳39
99 0
疯狂学习GIS
|
7月前
|
定位技术
ArcGIS面要素最小外接矩形、外接圆的绘制方法
ArcGIS面要素最小外接矩形、外接圆的绘制方法
疯狂学习GIS
113 1
前端杂货铺
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体（轨道控制器、坐标轴辅助器、移动缩放旋转）
【Three.js入门】渲染第一个场景及物体（轨道控制器、坐标轴辅助器、移动缩放旋转）
前端杂货铺
303 0
Mango易创
|
编译器 API 图形学
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
【unity细节】基于unity子对象(如相机)为什么无法进行z轴的拖拽移动和z轴自动归位的问题
Mango易创
156 0
zuoben
|
API
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
zuoben
480 0
使用Threejs创建几何体并添加材质、光源、阴影、动画，添加坐标轴
恬静的小魔龙Unity
|
图形学
鼠标控制物体旋转、移动、缩放（Unity3D）
Unity3D对于鼠标操作物体的旋转、移动、缩放的功能点使用的比较多。 今天就分享如何使用Unity实现鼠标对于物体的旋转、移动、缩放。
恬静的小魔龙Unity
1053 0
姚飞亮
three.js 坐标系、camera位置属性、点、线、面
three.js
姚飞亮
4662 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    47
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    110
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    38
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    42
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    47
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    32
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    107
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    262
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    158
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    36

    • 相关电子书

    更多
  • 3D动画的菜谱式灯光与云渲染
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks售前咨询