本系列内容主要介绍webgis开发过程中可能会遇到的常见面试题和答案，从前端到二维到三维，干货满满。记得关注我不走丢！
需要更多面试题、视频讲解、webgis教程的宝子戳↓↓↓
免费领取2024最新webgis学习教程
前几期内容点击下方链接：
WebGIS开发面试题：前端篇（一）
WebGIS开发面试题：前端篇（二）
WebGIS开发面试题：前端篇（三）
WebGIS开发面试题：前端篇（四）
WebGIS面试题：GIS篇（一）
WebGIS面试题：GIS篇（二）
WebGIS面试题：GIS篇（三）
WebGIS面试题：GIS篇（四）
WebGIS面试题：GIS篇（五）
WebGIS面试题：GIS篇（六）
1、三维数据格式
下面是Cesium中常用的几种三维数据格式：
gITF：
gITF(GL Transmission Format)是一种用于在WebGL、OpenGL ES和OpenXR等图形API中传输和加载3D动态场景的开放标准。Cesium中可以使用gITF格式的3D模型、纹理等信息。
3D Tiles：
3D Tiles是一种用于高效存储、传输和渲染大型3D地理空间数据集的开放标准，3D Tiles将地球表面划分成瓦片，每个瓦片包含一定数量的地理信息，可以使用Cesium加载并显示多个地球表面瓦片，从而构建出三维地球的模型。
KML(Keyhole Markup Language)：
KML是一种用于标注和呈现地图数据的XML格式，由Google Earth引入。Cesium可以使用KML格式的数据加载并显示3D模型、标注、图层等信息。
GeoJSON：
GeoJSON是一种基于JSON格式的地理空间数据交换格式，能够描述点、线、面等地理要素信息。Cesium中可以使用GeoJSON格式的数据加载并显示3D模型、标注、图层等信息。
OBJ(Wavefront OBJ)：
OBJ是一种广泛使用的3D图形格式，可描述点、线、面等三维网格几何信息。Cesium可以使用OBJ格式的数据加载并显示3D模型信息。除此之外，Cesium还支持许多其他格式的三维数据加载和可视化，例如COLLADA、CZML等，开发者可以根据需求选择不同的数据格式。
2、Cesium里面的Entity 和primitive有什么区别
在Cesium中，Entity和primitive是两个不同的概念，它们分别用于不同的场景。
Entity
Entity是Cesium中最重要的概念之一，它通常用于描述具有坐标位置的实际对象，例如飞机、汽车、楼房、人物等。每个Entity实例都有不同的属性，例如位置、姿态、缩放、颜色、贴图等，并且可以通过编程方式创建、修改、删除。
Entitv的优点是非常灵活和易于使用。由于Entity是更高层次的概念，因此它可以自动处理许多与底层图形和几何形状相关的复杂性，例如纹理贴图、光照、碰撞检测等。它还可以与其他Cesium组件集成，例如事件处理、拾取和相机控制等。
Primitive
与Entity相比，Primitive是Cesium的一种更低层次的图形概念，它通常用于描述一组简单的图形几何体。例如，我们可以使用Primitive来绘制点、线、多边形、体积、文本等基本图形。每个Primitive实例都可以设置不同的属性，例如颜色、边框、宽度、高度等。
Primitive的主要优点是它们非常高效，因为它们使用了GPU硬件加速，可以轻松地绘制大量的几何体。它们也比Entity更灵活，因为我们可以直接控制几何体的属性和细节，例如绘制线宽，选择不同的纹理贴图等等。但Primitive的使用需要较少的自动性和灵活性，因为需要手动处理许多问题，例如碰撞检测、高级光照和渲染技术等。
总的来说，Entity和Primitive都是Cesium中强大的图形概念，但它们用于不同的场景。如果我们需要描述具有复杂属性和行为的实际对象，那么我们应该使用Entity；如果我们只需要绘制简单的几何体，那么我们可以使用Primitive来获得更好的性能和控制。
什么情况使用Primitive
在Cesium中，Primitive是用于渲染三维场景的基本渲染单元，它可以表示多种类型的几何形状和纹理贴图。以下是在Cesium中使用Primitive的一些常见情况：
1、渲染几何形状：
Primitive可以表示各种几何形状，例如平面、立方体、球体、柱体、圆锥等。对于简单的形状，可以使用Cesium提供的预定义几何形状(如RectangleGeometry、BoxGeometry、SphereGeometry等)，对于更复杂的形状，可以使用三角形网格(TriangleMeshGeometry)来定义几何形状。
2、纹理贴图：
Primitive可以将纹理映射到几何形状上，以创建更真实的场景。可使用TextureAtlas或TextureCoordinateGenerator为Primitive指定纹理贴图。
3、投影：
Primitive可以被高效的投影到各种不同的地形数据集上，例如地形切片、3D Tiles和3D模型这使得Cesium可以在不同的地形数据集上展示同一场景，提高应用的可视化效果和跨平台兼容性
3、Cesium中的相机
在Cesium中，我们确定的视角，需要设置相机的位置和方向。
destination用于设置相机的位置。
Cesium.Cartesian3.fromDegrees(经纬,纬度,⾼程) orientation用于设定相机的方向。
orientation是用来控制相机的heading（偏航角） pitch（仰俯角） roll（翻滚角）。最简单的理解就是相机镜头当前浏览器窗口所在的位置。
可以通过HeadingPitchRoll API设置相关的参数
如下图所示，Cesium中设置相机方向orientation设定原理遵循右手笛卡尔坐标系统。
heading 偏航角，是水平方向的旋转
pitch 俯仰角默认旋转角度为-90度，即朝向地⾯。正角为片面之上，负角度为平面之上。即上下旋转，也叫俯仰角
roll：旋转角默认为0度，左右旋转，也叫翻转角。
heading 偏航角-->Y
pitch俯仰⻆-->x
roll 旋转⻆--z
var camera = viewer.camera; - position 相机的位置 - heading 偏航⻆ //默认值为0 - pitch 俯仰⻆ //默认值为-90 - roll 翻滚⻆ //默认值为0 4、setView
设置相机目的地和方向之后，可以将视角直接切换到所设定的视域范围内，适用于快速切换视角。
<!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> <script src="../config/ion.js"></script> <link rel="stylesheet" href="../Cesium/Widgets/widgets.css"> <link rel="stylesheet" href="../css/index.css"> </head> <body> <div id="cesium_container"> </div> <script> // 1、加载arcgis作为底图 const esri = new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/W orld_Imagery/MapServer' }) const viewer = new Cesium.Viewer("cesium_container", { timeline: false, animation: false, baseLayerPicker: false, imageryProvider: esri }) var initialPosition = new Cesium.Cartesian3.fromDegrees(-74, 40.67 , 3000); var homeCameraView = { destination: initialPosition, orientation:{ heading:Cesium.Math.toRadians(0), //默认值 pitch:Cesium.Math.toRadians(-90), //默认值 roll:0 //默认值 } }; // Set the initial view viewer.scene.camera.setView(homeCameraView); </script> </body> </html> Cesium.HeadingPitchRoll.fromDegrees(heading,pitch,roll);
4、flyTo 带有飞行视角
// Create an initial camera view var initialPosition = new Cesium.Cartesian3.fromDegrees(-74, 40.67, 3000); var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0); var homeCameraView = { destination: initialPosition, orientation:initialOrientation, duration:5, complete:function(){ //⻜⾏成功要调⽤的函数 }, cancle:function(){ //取消⻜⾏调⽤的函数 } }; // Set the initial view viewer.scene.camera.flyTo(homeCameraView);
5、lookAt⼀般用于锁定某⼀个场景
const center = Cesium.Cartesian3.fromDegrees(114.30,30.50);//设置相机的位置 const heading = Cesium.Math.toRadians(0) const pitch = Cesium.Math.toRadians(-90); const range = 2500;//中⼼点距离地⾯的距离 viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,rang e)); 在局部框架中定义航向角，俯仰角和范围
Cesium.HeadingPitchRange()
6、viewBoundingSphere
viewBoundingSphere适用于浏览室内场景。将相机固定到实体上，进行360度的观察。
<!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>Cesium App</title> <script src="../Cesium/Cesium.js"></script> <link rel="stylesheet" href="../Cesium/Widgets/widgets.css"> <script src="../config/ion.js"></script> <link rel="stylesheet" href="../css/index.css"> </head> <body> <div class="container" id="cesium_container"> </div> <script> //查看器,场景,实体,数据源的介绍 const viewer = new Cesium.Viewer("cesium_container",{ animation:false, timeline:false, shouldAnimate:true }) const position = Cesium.Cartesian3.fromDegrees(114.30,30.50,1000); //以提供的原点为中⼼,根据航向-俯仰-横滚⻆计算的轴 /* 第⼀个参数是位置信息,第⼆个参数是选中⻆度信息 */ const orientation = Cesium.Transforms.headingPitchRollQuaternion(p osition, new Cesium.HeadingPitchRoll.fromDegrees(0,0,0)) var entity = viewer.entities.add({ position:position, orientation:orientation, model:{ uri:'../lib/Cesium_Air.glb', minimumPixelSize:100, maximunScale:10000, show:true } }) //需要对物体进⾏多⻆度观察 使⽤viewBoundingSphere⽅法 //第⼀个参数传递观察的位置，及距离 第⼆参数传观察的⻆度 viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(positio n,30), new Cesium.HeadingPitchRoll.fromDegrees(0,0,0)) ) </script> </body> </html>
7、Cesium中点击某实体后显示自定义弹框怎么实现
在Cesium中，要实现点击某实体后显示⾃定义弹框，可以通过以下步骤实现：
1. ⾸先需要监听⿏标的左键点击事件，可以使⽤Cesium的Viewer对象的pick⽅法来实现：
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement ){ var pickedObject = viewer.scene.pick(movement.position); if (Cesium.defined(pickedObject) && pickedObject.id) { // 在这⾥实现点击实体后的操作 } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 2. 在点击事件中，可以根据点击的实体的属性信息，创建⼀个⾃定义的HTML弹框，可以使用Cesium 的Infobox对象来实现：
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movemen t) { var pickedObject = viewer.scene.pick(movement.position); if (Cesium.defined(pickedObject) && pickedObject.id) { // 获取实体的属性信息 var entity = pickedObject.id; var name = entity.name; var description = entity.description; // 创建⾃定义的HTML弹框 var element = document.createElement('div'); element.innerHTML = '<h2>' + name + '</h2><p>' + description + '</ p>'; // 设置弹框的位置和偏移量 var position = Cesium.Cartesian3.fromDegrees(entity.position.longi tude, entity.position.latitude, entity.position.height); var offset = new Cesium.Cartesian2(0, -50); // 显示弹框 viewer.selectedEntity = entity; viewer.infoBox.viewModel.container.appendChild(element); viewer.infoBox.viewModel.updateForSelectedEntity(); viewer.infoBox.viewModel.position = position; viewer.infoBox.viewModel.offset = offset; } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
8、Cesium如何画圆?
// 创建场景 var viewer = new Cesium.Viewer('cesiumContainer'); // 定义圆的参数 var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); var radius = 100000.0; // 创建圆的⼏何体 var circle = viewer.entities.add({ name : 'Circle', position : center, ellipse : { semiMinorAxis : radius, semiMajorAxis : radius, material : Cesium.Color.RED.withAlpha(0.5), outline : true, outlineColor : Cesium.Color.BLACK } }); 使用Cesium.Cartesian3.fromDegrees方法创建了圆的中心点，并指定了圆的半径。然后，我们创建了⼀个名为“Circle”的实体，并在其属性中设置了椭圆几何体的参数，包括椭圆的半长轴和半短轴，材料，轮廓等。
最后将实体添加到场景中，可看到绘制的圆形。
9、Cesium中如何修改geojson数据的颜色
可以使用GeoJsonDataSource类和Entity对象。以下是⼀ 个基本的示例，演示如何将GeoJSON数据加载到Cesium中，并将其颜⾊修改为红色：
// 创建场景 var viewer = new Cesium.Viewer('cesiumContainer'); // 加载GeoJSON数据源 var dataSource = new Cesium.GeoJsonDataSource(); dataSource.load('path/to/your/geojson/file.geojson').then(function() { // 获取数据源中的所有实体 var entities = dataSource.entities.values; // 循环遍历每个实体 for (var i = 0; i < entities.length; i++) { // 获取实体的材料 var material = entities[i].polygon.material; // 修改材料的颜⾊为红⾊ material.color = Cesium.Color.RED; } }); // 将数据源添加到场景中 viewer.dataSources.add(dataSource); ⾸先创建⼀个Cesium场景，并使用GeoJsonDataSource类加载了⼀个 GeoJSON数据源。
然后使用entities.values方法获取数据源中的所有实体，并使用for循环遍历每 个实体。对于每个实体，获取其多边形（polygon）实体的材料，并将其颜色修改为红色。
最后将数据源添加到场景中，这样就可以看到修改后的颜色。
10、如何在CesiumJS中添加⼀个3D模型？
要在CesiumJS中添加⼀个3D模型，可以使⽤Model类。⾸先需要加载模型⽂件（如glTF或OBJ格式）， 然后创建⼀个Model实例并将其添加到场景中。
示例代码：
// 加载模型⽂件（例如：sample.gltf） var modelUrl = 'path/to/your/model.gltf'; var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesia n3.fromDegrees(longitude, latitude, height)); var model = viewer.scene.primitives.add(new Cesium.Model({ url: modelUrl }) ); model.transform = modelMatrix;