WebGIS面试题：GIS篇（七）

慢吞云雾缓吐愁  金牌会员 | 2024-12-18 22:56:56 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 902|帖子 902|积分 2706

本系列内容重要先容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用于设置相机的位置。  
  1. Cesium.Cartesian3.fromDegrees(经纬,纬度,⾼程)
复制代码
 orientation用于设定相机的方向。
orientation是用来控制相机的heading（偏航角） pitch（仰俯角） roll（翻滚角）。最简朴的理解就是相机镜头当前浏览器窗口所在的位置。
可以通过HeadingPitchRoll API设置相干的参数
如下图所示，Cesium中设置相机方向orientation设定原理遵循右手笛卡尔坐标系统。 




heading 偏航角，是水平方向的旋转 
pitch 俯仰角默认旋转角度为-90度，即朝向地⾯。正角为片面之上，负角度为平面之上。即上下旋转，也叫俯仰角 
roll：旋转角默以为0度，左右旋转，也叫翻转角。

heading 偏航角-->Y 


pitch俯仰⻆-->x 




roll 旋转⻆--z 


  1. var camera = viewer.camera;
  2. - position 相机的位置
  3. - heading 偏航⻆ //默认值为0
  4. - pitch   俯仰⻆ //默认值为-90
  5. - roll    翻滚⻆ //默认值为0
复制代码
4、setView 
设置相机目标地和方向之后，可以将视角直接切换到所设定的视域范围内，适用于快速切换视角。 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>
  7.     <script src="../Cesium/Cesium.js"></script>
  8.     <script src="../config/ion.js"></script>
  9.     <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
  10.     <link rel="stylesheet" href="../css/index.css">
  11. </head>
  12. <body>
  13.     <div id="cesium_container">
  14.     </div>
  15.     <script>
  16.         // 1、加载arcgis作为底图
  17.         const esri = new Cesium.ArcGisMapServerImageryProvider({             url: 'https://services.arcgisonline.com/ArcGIS/rest/services/W orld_Imagery/MapServer'
  18. })
  19.         const viewer = new Cesium.Viewer("cesium_container", {             timeline: false,
  20.             animation: false,
  21.             baseLayerPicker: false,
  22.             imageryProvider: esri
  23. })
  24.         var initialPosition = new Cesium.Cartesian3.fromDegrees(-74, 40.67 ,
  25. 3000);
  26.         var homeCameraView = {
  27.             destination: initialPosition,
  28.             orientation:{
  29.               heading:Cesium.Math.toRadians(0), //默认值
  30.               pitch:Cesium.Math.toRadians(-90), //默认值
  31.               roll:0 //默认值
  32. }
  33. };
  34.         // Set the initial view
  35.         viewer.scene.camera.setView(homeCameraView);
  36.     </script>
  37. </body>
  38. </html>
复制代码
  1. Cesium.HeadingPitchRoll.fromDegrees(heading,pitch,roll);
复制代码

4、flyTo 带有飞行视角

  1. // Create an initial camera view
  2. var initialPosition = new Cesium.Cartesian3.fromDegrees(-74, 40.67, 3000);
  3. var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -90, 0);
  4. var homeCameraView = {
  5.     destination: initialPosition,
  6.     orientation:initialOrientation,
  7.     duration:5,
  8.     complete:function(){
  9.       //⻜⾏成功要调⽤的函数
  10. },
  11.     cancle:function(){
  12.       //取消⻜⾏调⽤的函数
  13. }
  14. };
  15. // Set the initial view
  16. viewer.scene.camera.flyTo(homeCameraView);
复制代码

5、lookAt⼀般用于锁定某⼀个场景

  1. const center = Cesium.Cartesian3.fromDegrees(114.30,30.50);//设置相机的位置
  2. const heading = Cesium.Math.toRadians(0)
  3. const pitch = Cesium.Math.toRadians(-90);
  4. const range = 2500;//中⼼点距离地⾯的距离
  5. viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,rang e));
复制代码
在局部框架中定义航向角，俯仰角和范围
   Cesium.HeadingPitchRange() 
  
6、viewBoundingSphere

viewBoundingSphere适用于浏览室内场景。将相机固定到实体上，进行360度的观察。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Cesium App</title>
  7.     <script src="../Cesium/Cesium.js"></script>
  8.     <link rel="stylesheet" href="../Cesium/Widgets/widgets.css">
  9.     <script src="../config/ion.js"></script>
  10.     <link rel="stylesheet" href="../css/index.css">
  11. </head>
  12. <body>
  13.     <div class="container" id="cesium_container">
  14.     </div>
  15.     <script>
  16.         //查看器,场景,实体,数据源的介绍
  17.         const viewer = new Cesium.Viewer("cesium_container",{             animation:false,
  18.             timeline:false,
  19.             shouldAnimate:true
  20. })
  21.         const position = Cesium.Cartesian3.fromDegrees(114.30,30.50,1000);         //以提供的原点为中⼼,根据航向-俯仰-横滚⻆计算的轴
  22.         /* 第⼀个参数是位置信息,第⼆个参数是选中⻆度信息 */
  23.         const orientation = Cesium.Transforms.headingPitchRollQuaternion(p osition,
  24.         new Cesium.HeadingPitchRoll.fromDegrees(0,0,0))
  25.         var entity = viewer.entities.add({
  26.             position:position,
  27.             orientation:orientation,
  28.             model:{
  29.                 uri:'../lib/Cesium_Air.glb',
  30.                 minimumPixelSize:100,
  31.                 maximunScale:10000,
  32.                 show:true
  33. }
  34. })
  35.         //需要对物体进⾏多⻆度观察 使⽤viewBoundingSphere⽅法
  36.         //第⼀个参数传递观察的位置，及距离 第⼆参数传观察的⻆度
  37.        viewer.camera.viewBoundingSphere(new Cesium.BoundingSphere(positio n,30),
  38.         new Cesium.HeadingPitchRoll.fromDegrees(0,0,0))
  39.         )
  40.     </script> </body>
  41. </html>
复制代码

7、Cesium中点击某实体后表现自定义弹框怎么实现

在Cesium中，要实现点击某实体后表现⾃定义弹框，可以通过以下步骤实现： 
1.   ⾸先需要监听⿏标的左键点击变乱，可以使⽤Cesium的Viewer对象的pick⽅法来实现：
  1. viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement ){
  2. var pickedObject = viewer.scene.pick(movement.position);
  3. if (Cesium.defined(pickedObject) && pickedObject.id) {
  4. // 在这⾥实现点击实体后的操作
  5. }
  6. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
复制代码
2.   在点击变乱中，可以根据点击的实体的属性信息，创建⼀个⾃定义的HTML弹框，可以使用Cesium 的Infobox对象来实现： 
  1. viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movemen t) {
  2. var pickedObject = viewer.scene.pick(movement.position);
  3. if (Cesium.defined(pickedObject) && pickedObject.id) {
  4. // 获取实体的属性信息
  5. var entity = pickedObject.id;
  6. var name = entity.name;
  7. var description = entity.description;
  8. // 创建⾃定义的HTML弹框
  9. var element = document.createElement('div');
  10. element.innerHTML = '<h2>' + name + '</h2><p>' + description + '</
  11. p>';
  12. // 设置弹框的位置和偏移量
  13. var position = Cesium.Cartesian3.fromDegrees(entity.position.longi
  14. tude, entity.position.latitude, entity.position.height);
  15. var offset = new Cesium.Cartesian2(0, -50);
  16. // 显示弹框
  17. viewer.selectedEntity = entity;
  18. viewer.infoBox.viewModel.container.appendChild(element);
  19. viewer.infoBox.viewModel.updateForSelectedEntity();
  20. viewer.infoBox.viewModel.position = position;
  21. viewer.infoBox.viewModel.offset = offset;
  22. }
  23. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
复制代码

8、Cesium怎样画圆?

  1. // 创建场景
  2. var viewer = new Cesium.Viewer('cesiumContainer');
  3. // 定义圆的参数
  4. var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); var radius = 100000.0;
  5. // 创建圆的⼏何体
  6. var circle = viewer.entities.add({
  7. name : 'Circle',
  8. position : center,
  9. ellipse : {
  10. semiMinorAxis : radius,
  11. semiMajorAxis : radius,
  12. material : Cesium.Color.RED.withAlpha(0.5),
  13. outline : true,
  14. outlineColor : Cesium.Color.BLACK
  15. }
  16. });
复制代码
使用Cesium.Cartesian3.fromDegrees方法创建了圆的中心点，并指定了圆的半径。然后，我们创建了⼀个名为“Circle”的实体，并在其属性中设置了椭圆几何体的参数，包括椭圆的半长轴和半短轴，材料，轮廓等。
最后将实体添加参加景中，可看到绘制的圆形。 

9、Cesium中怎样修改geojson数据的颜色

可以使用GeoJsonDataSource类和Entity对象。以下是⼀ 个基本的示例，演示怎样将GeoJSON数据加载到Cesium中，并将其颜⾊修改为红色：
  1. // 创建场景
  2. var viewer = new Cesium.Viewer('cesiumContainer');
  3. // 加载GeoJSON数据源
  4. var dataSource = new Cesium.GeoJsonDataSource();
  5. dataSource.load('path/to/your/geojson/file.geojson').then(function() { // 获取数据源中的所有实体
  6. var entities = dataSource.entities.values;
  7. // 循环遍历每个实体
  8. for (var i = 0; i < entities.length; i++) {
  9. // 获取实体的材料
  10. var material = entities[i].polygon.material;
  11. // 修改材料的颜⾊为红⾊
  12. material.color = Cesium.Color.RED;
  13. }
  14. });
  15. // 将数据源添加到场景中
  16. viewer.dataSources.add(dataSource);
复制代码
⾸先创建⼀个Cesium场景，并使用GeoJsonDataSource类加载了⼀个 GeoJSON数据源。
然后使用entities.values方法获取数据源中的所有实体，并使用for循环遍历每 个实体。对于每个实体，获取其多边形（polygon）实体的材料，并将其颜色修改为红色。
最后将数据源添加参加景中，这样就可以看到修改后的颜色。

10、怎样在CesiumJS中添加⼀个3D模型？ 

要在CesiumJS中添加⼀个3D模型，可以使⽤Model类。⾸先需要加载模型⽂件（如glTF或OBJ格式）， 然后创建⼀个Model实例并将其添加参加景中。 
示例代码：
  1. // 加载模型⽂件（例如：sample.gltf）
  2. var modelUrl = 'path/to/your/model.gltf';
  3. var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesia n3.fromDegrees(longitude, latitude, height));
  4. var model = viewer.scene.primitives.add(new Cesium.Model({ url: modelUrl }) );
  5. model.transform = modelMatrix;
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

慢吞云雾缓吐愁

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表