cesium-learning-examples
/
cesium空间数据加载.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MzJiNzYwNC1lNjNkLTQxNTctOGRmMi1hYWI0YzdmNzU5NjciLCJpZCI6MTIwMjYwLCJpYXQiOjE2NzI4MjE1NTZ9.92plPvDAcuXNNGm2-NsbEMdODDP9bYVnmlNsAtUsD8g";
        // 配置地图地形
        const viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false, //  隐藏默认的地图按钮，否则会影响新地图的加载
            terrainProvider: new Cesium.CesiumTerrainProvider({  // 加载地形数据，搜索 珠穆朗玛峰,查看山川地形效果
                url: Cesium.IonResource.fromAssetId(1),
                requestVertexNormals: true,   // 设置为true,可以增加法线，用于提高光照效果，
                requestWaterMask: true,   // 设置为true,可以增加水面特效
            }),
        });
        // 设置相机位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2500.0), // 目的地位置
            orientation: {  // 设置相机视口的方向
                heading: Cesium.Math.toRadians(0),  // heading控制视口方向的水平旋转，也就是沿着Y轴旋转，当数值为0则代表是正北方向
                pitch: Cesium.Math.toRadians(-90.0),  // pitch控制视口的上下旋转，即沿X轴进行旋转，当数值为-90则是俯视朝向地面
                roll: 0.0   // roll控制视口的翻转角度，即沿着Z轴进行旋转，当数值为0则表示不翻转
            }
        })

        // 重点
        // cesium 中使用到的数据一般分为矢量数据和栅格数据
        // 前面使用的地形和地图数据就是栅格数据
        // 矢量数据包括几何体、模型、标签等


        const position = new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 0)
        // 1.加载圆点
        // const entity = viewer.entities.add({
        //     position:position, //设置几何体的位置
        //     point:{  // point属性用于绘制一个圆点
        //         pixelSize:100, //设置圆点大小
        //         color:new Cesium.Color(1,0,0)  // 设置物体颜色
        //     }
        // })


        // 2.加载线条
        // const entity = viewer.entities.add({
        //     polyline: { // polyline属性用于绘制一条线
        //         show:true,  // 设置为可见
        //         positions:new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.40,39.91]), // 线条是由多个点连接起来的，需要放入一个经纬度坐标集合
        //         width:5,
        //         material:new Cesium.Color(0,0,1,1),  //材质颜色设置为蓝色
        //     }
        // })


        // 3.加载面
        // const entity = viewer.entities.add({
        //     position: position, //设置几何体的位置
        //     plane: { // plane属性用于绘制一个面
        //         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_Z,0.0), // 设置面的朝向,设置为沿着Z轴平铺，轴向需要参考笛卡尔坐标
        //         dimensions:new Cesium.Cartesian2(400,300), // 设置面的长度和宽度
        //         material:new Cesium.Color(0,0,1,0.5), //材质颜色设置为蓝色，不透明度为0.5,
        //         outline:true, // 设置是否显示边框
        //         outlineColor:Cesium.Color.BLACK, // 将边框的颜色设置为黑色
        //     }
        // })


        // 4.加载飞机模型
        const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(-90, 0, 0))  // 设置飞机模型的朝向，第一个参数是位置信息，第二参数是旋转角度信息(这里设置垂直旋转和翻转均为0，已到达飞行的效果)
        const entity = viewer.entities.add({
            position:  new Cesium.Cartesian3.fromDegrees(116.39, 39.91, 2000),
            orientation: orientation, // 设置飞机的朝向和翻转角度
            model: { // 存储模型的各种信息
                uri: './model/Cesium_Air.glb',
                minimumPixelSize: 100, // 设置模型最小情况下的大小
                maximumScale: 10000, // 设置模型最大缩放的比例
                show: true,
            }
        });
        viewer.trackedEntity = entity;   // trackedEntity将相机视口快速绑定（锁定）到飞机位置

        // 5.加载标签，当我们需要将文字说明加载到地图中是使用
        // const entity = viewer.entities.add({
        //     position:position,
        //     label:{
        //         text:'测试文本内容',
        //         font:'50px Helvetica',
        //         fillColor:Cesium.Color.SKYBLUE,  // 文本颜色设置
        //     }
        // })
    </script>
</body>

</html>