[JavaScript知识库]Cesium笔记记录

一、Cesium

1.1 什么是Cesium

Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。

二、设置影像

//加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"; 
var Google = new Cesium.UrlTemplateImageryProvider({url:url})

//Viewer第一个参数容器就是需要上面的div容器承载
var viewer = new Cesium.Viewer('cesiumContainer',{
    // 将图层选择的控件关掉，才能添加其他影像数据
    baseLayerPicker:false,
    imageryProvider:Google,
});

三、显示地形

设置后可以看到山峰轮廓

var viewer = new Cesium.Viewer('cesiumContainer',{
    terrainProvider:Cesium.createWorldTerrain()//显示地形
});

四、设置相机位置

4.1 setView(options)

4.1.1 参数介绍

options为object类型：{}

object有以下属性：

设置相机位置、方向和变换（加载时直接显示设置的位置）。

// 1. 通过top-down视图设置位置。
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2 通过方位角、俯仰角、滚动角设置视图。
viewer.camera.setView({
    destination : cartesianPosition,
   	//roll  是围绕 X 轴旋转；
    //pitch 是围绕 Y 轴旋转；
    //heading 是围绕 Z 轴旋转 
    orientation: {
		heading : Cesium.Math.toRadians(0.0), 
		pitch : Cesium.Math.toRadians(-90),   
		roll : 0.0                           
    }
});

// 3. 相机空间位置不变，改变方位角、俯仰角和滚动角。.
viewer.camera.setView({
    orientation: {
        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});


// 4. 通过自顶向下视图查看矩形。
viewer.camera.setView({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 5. 通过使用单位向量的方向(orientation)设置相机位置。.
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

4.2 flyTo(options)

相机从当前位置飞行到新的空间位置（显示设置的位置时会有个过度）。

// 1. 飞向通过top-down视图表示的位置
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2. 飞向通过top-down视图表示的矩形
viewer.camera.flyTo({
    destination : Cesium.Rectangle.fromDegrees(west, south, east, north)
});

// 3. 飞向利用单位向量表示方向(orientatin)的位置
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        direction : new Cesium.Cartesian3(-0.04231243104240401, -0.20123236049443421, -0.97862924300734),
        up : new Cesium.Cartesian3(-0.47934589305293746, -0.8553216253114552, 0.1966022179118339)
    }
});

// 4. 飞向利用方位角(heading)、俯仰角(pitch)、滚动角(roll)表示方向(orientatin)的位置
viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    }
});

4.3 orientation角度详解

roll 是围绕 X 轴旋转；
pitch 是围绕 Y 轴旋转；
heading 是围绕 Z 轴旋转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ytZfFEdO-1627047403797)(695334-20190326182805986-694175803.png)]

五、加载3dtiles数据

给建筑加载立体图形

// 坐标设置在纽约，这样会有默认的3dTiles数据
var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
viewer.scene.camera.setView({
    destination: initialPosition,
    orientation: initialOrientation,
    endTransform: Cesium.Matrix4.IDENTITY
});
// 加载3DTiles数据，纽约进行封装了
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(5741)}))

5.1 设置样式

//设置3DTiles样式
//方法一
// var transparentStyle = new Cesium.Cesium3DTileStyle({
// 	color:"color('white',0.3)",
// 	show: true
// })

//方法二（根据楼的高度设置不同颜色）
var heightStyle = new Cesium.Cesium3DTileStyle({
    color:{
        conditions:[
            ["${height} >= 300","rgba(45,0,75,0.5)"],
            ["${height} >= 200","rgb(102,71,151)"],
            ["${height} >= 100","rgb(170,162,204)"],
            ["${height} >= 50","rgb(224,226,238)"],
            ["${height} >= 25","rgb(252,230,200)"],
            ["${height} >= 10","rgb(248,176,87)"],
            ["${height} >= 5","rgb(198,106,11)"],
            ["true","rgb(102,71,151)"]
        ]
    }
});

city.style = heightStyle

六、加载czml文件

czml是官方自定义的文件格式

//加载czml文件
var dronePromise = Cesium.CzmlDataSource.load('SampleData/sampleFlight.czml')

//创建一个无人机对象
var drone;
dronePromise.then(function(dataSource){
    viewer.dataSources.add(dataSource)
    //根据id获取czml中的数据
    drone = dataSource.entities.getById('Aircraft/Aircraft1');
    drone.model = {
        // 模型路径
        uri : 'SampleData/Models/pla/客机模型.gltf',
        // uri : 'SampleData/Models/CesiumDrone.gltf',
        minimumPixelSize: 80,
        maximumScale: 500,
        silhouetteColor: Cesium.Color.WHITE,
        silhouetteSize:2
    }
    //基于采样位置的加法计算定向
    drone.orientation = new Cesium.VelocityOrientationProperty(drone.position)
    //平滑路径插值
    drone.position.setInterpolationOptions({
        interpolationAlgorithm:Cesium.HermitePolynomialApproximation,
        interpolationDegree:2
    })
    drone.viewFrom = new Cesium.Cartesian3(0,-30,30);

})

七、Entity类

官方文档中有一个 entity 的实体类对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ccKngGYQ-1627047403801)(image-20210705174552710.png)]

7.1 展示一个实体

可以通过设置一个 Entity 类（可以是一个模型、多边形、圆球等），

然后通过viewer.entities.add() 添加到页面当中

//添加一个实体
var entity = viewer.entities.add({
    name: ‘无人机’,
    //实体显示位置
    position: Cesium.Cartesian3.fromDegrees(
        -123.0744619,//经度
        44.0503706,//维度
        1500,//高度
    ),
    //表示这个实体代表的是一个实体
    model: {
        uri: 'SampleData/Models/CesiumDrone.gltf',
        minimumPixelSize: 128,
        maximumScale: 100,
        silhouetteSize:2
    },
    //在实体位置显示一个点
    point : new Cesium.PointGraphics({
        pixelSize : 10,
        color : Cesium.Color.YELLOW
    })
})
//获取或设置当前由相机跟踪的实体实例。 
viewer.trackedEntity = entity;

7.2 创建路线

根据设置的 一组经纬度 在地图上画出一条线

var dashedLine = viewer.entities.add({
  name: "航线",
  //线段
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -86.0,//经度
      40.0,//维度
      3300000,//高度
        
      -4.866987,
      31.979569,
      3300000,
        
      0.431435,
      69.439938,
      3300000,
        
      -86.256628,
      60.56546,
      3300000,
    ]),
    width: 4,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
    }),
  },
});

7.3 让实体移动