WebGIS面试题：GIS篇（七）

本系列内容主要介绍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中，要实现点击某实体后显示⾃定义弹框，可以通过以下步骤实现：

⾸先需要监听⿏标的左键点击事件，可以使⽤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);

在点击事件中，可以根据点击的实体的属性信息，创建⼀个⾃定义的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;

标签： cesium webgis 三维gis

本文转载自: https://blog.csdn.net/2301_78220461/article/details/142082055
版权归原作者 WebGIS开发 所有，如有侵权，请联系我们删除。

WebGIS面试题：GIS篇（七）

1、三维数据格式

2、Cesium里面的Entity 和primitive有什么区别

什么情况使用Primitive

3、Cesium中的相机

4、flyTo 带有飞行视角

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

6、viewBoundingSphere

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

8、Cesium如何画圆?

9、Cesium中如何修改geojson数据的颜色

10、如何在CesiumJS中添加⼀个3D模型？

发表评论

“WebGIS面试题：GIS篇（七）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航