Cesium笔记记录，覆盖所有面试知识点，2024年前端开发书籍推荐

});

// 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 创建路线

---

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

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

…(img-VwPghOUp-1710760500147)]

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。