【Cesium】cesium的一些模块

446 阅读3分钟

Api一张图

结构图.png

# viewer:一切API入口

控件配置

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYjM3YmViOC05MzVkLTQ3ZDEtODU1ZS1hOWI0YmZjMGRjM2QiLCJpZCI6OTE3NzgsImlhdCI6MTY1MTIyNjE4NX0.E90WFKiWipKEiwSBBH3mhw9C3W7ezVMhvriTNeKueZY';
        const viewer=new Cesium.Viewer("cesiumContainer",{
                //关闭动画小组件(左下角仪表盘)
                animation:false,
                //设置以何种方式进行初始化
                //包括:
                //MORPHING	        数字	在模式之间变形,例如,3D 到 2D。
                // COLUMBUS_VIEW	数字	哥伦布视图模式。一个 2.5D 透视图,其中地图平放,其上方绘制了非零高度的对象。
                // SCENE2D	        数字	二维模式。使用正交投影自上而下查看地图。
                // SCENE3D	        数字	3D模式。地球的传统 3D 透视图。
                sceneMode : Cesium.SceneMode.SCENE3D,
                //球体表面提供地形
                terrainProvider : Cesium.createWorldTerrain(),
                //基础图层选择,如交通图、卫星图等
                //底图数据展示
                //图层放大到最大显示的街景图
                imageryProvider : new Cesium.OpenStreetMapImageryProvider({
                    url : 'https://a.tile.openstreetmap.org/'
                }),
                //场景周围的天空盒,用于绘制星星。天空盒是使用真赤道平均春分 (TEME) 轴定义的。
                //这仅在 3D 中受支持。变形为 2D 或哥伦布视图时,天空盒会淡出。天空盒的大小不能超过Scene#maximumCubeMapSize。
                skyBox : new Cesium.SkyBox({
                    sources : {
                    positiveX : "Asstes/Testures/SkyBox/tycho2t3_80_px.jpg",
                    negativeX : "Asstes/Testures/SkyBox/tycho2t3_80_mx.jpg",
                    positiveY : "Asstes/Testures/SkyBox/tycho2t3_80_py.jpg",
                    negativeY : "Asstes/Testures/SkyBox/tycho2t3_80_my.jpg",
                    positiveZ : "Asstes/Testures/SkyBox/tycho2t3_80_pz.jpg",
                    negativeZ : "Asstes/Testures/SkyBox/tycho2t3_80_mx.jpg"
                    }
                }),
                // 定义椭球体转换成哥伦布2.5D图像时如何转换
                mapProjection : new Cesium.WebMercatorProjection(),

                //Cesium小组件,用于搜索位置
                geocoder:false,
                //
                homeButton:false,
                //展示模式切换
                sceneModePicker:false,
                //图层选择
                baseLayerPicker : false,
                //帮助按钮
                navigationHelpButton:false,
                // creditContainer:"credit",
                //时间轴
                timeline:false,
                //全屏按钮
                fullscreenButton:false,
                //VR按钮
                vrButton:false,
        });

自定义默认视角

        //定义默认视点
        //转弧度
        const extent=Cesium.Rectangle.fromDegrees(0.0, 20.0, 10.0, 30.0);
        //相机在创建时将查看的默认矩形。
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE=extent;
        //设置为查看矩形的标量,可乘以摄像机位置,然后将其重新添加。
        //零值表示相机将查看整个 Camera#DEFAULT_VIEW_RECTANGLE ,该值大于零会使它远离范围,而小于零的值会使它接近范围。
        Cesium.Camera.DEFAULT_VIEW_FACTOR =0;

全球地形和谷歌影像

        //全球地形和谷歌影像
        viewer.imageryLayers.removeAll();
        const guge=new Cesium.ImageryLayer(new Cesium.UrlTemplateImageryProvider({
            url:"http://www.google.cn/maps/vt?lyrs=s@800&x={x}&y={y}&z={z}",
            tilingScheme:new Cesium.WebMercatorTilingScheme(),
            minimumLevel:1,
            maximumLevel:1,
            credit:"www.bjxbsj.cn"

        }),{
            show:true
        });
        viewer.imageryLayers.add(guge);

Cesium全球地形

        const terrain=Cesium.createWorldTerrain({
            requestWaterMask:true,
            requestVertexNormals:true
        });
        viewer.terrainProvider=terrain;

坐标系统

WGS84坐标系定义 长半轴:6378137.0 Cartographic 制图坐标(longitude, latitude, height),对应经纬度坐标,不过是弧度表示,此类主要用在用户接口上,理解起来更直观。 Cartesian3 笛卡尔直角坐标系(x,y,z) 做空间计算使用 Cartographic -> Cartesian3 Cartographic . toCartesian Cartesian3-> Cartographic Cartographic .fromCartesian 理解Cartesian3.dot、 cross、 normalize, 注意result参数

image-20220530135749333

Camera

var camera = viewer.camera; position 相机位置 heading(朝向)、pith(俯仰) 、 roll(翻滚) flyTo 直接操作相机参数 自动正北 flyToBoundingSphere Viewer.flyTo 和 zoomTo 依据对象位置计算相机参数

image-20220530140726547

lookat

HeadingPitchRange(heading, pitch, range) lookAt(target, offset)

image-20220530140824880image-20220530140830992

Entity

添加一个最简单的图标点 position,name,description 添加一个三维模型

image-20220530140927127

3Dtile

3d tiles的特点 cesium.com/blog/2015/0… 协议完全开放:任何组织机构都可以用此标准来定义自己的数据。 渐进加载和渲染:这是3dtiles的主要目的,采用HLOD技术,保证只加载和渲染和当前精度匹配的数据。 面向三维空间:定义在三维空间中,不仅仅是点、线、面等常规二维数据 可交互:支持鼠标选择和高亮 样式可配置:根据对象属性修改对象的显示样式。 更强的适应性:空间索引不仅仅支持常规四叉树,可以根据数据内容动态构建索引树。 更强的灵活性:动态调整数据加载精度 更广泛的数据支持:点云(pnts)、三维模型(b3dm,i3dm)、甚至地形、矢量(vctr)都可以用3d tiles格式定义。 精度:使用矩阵偏移解决大坐标值的漂移问题 实时的:支持动态数据

使用

使用Cesium3DTileset readyPromise 高度调整 fromTranslation 中心位置调整 eastNorthUpToFixedFrame 鼠标点选&属性输出 Cesium3DTileFeature

image-20220530141055328

鼠标交互

scene.pick,InputAction,scene.pickPosition

image-20220530142018165

image-20220530142044815

image-20220530142048984