WebGIS开发求职必会|二三维GIS开发框架mapbox&cesium常见面试题及答案

1、MapboxGLJS和 Mapbox Studio区别和联系

Mapbox GL JS 和 Mapbox Studio 是 Mapbox 提供的两个产品，它们的主要区别在于：

• Mapbox GL JS 是一个 JavaScript 库，用于在 Web 应用程序中构建交互式地图。开发者可以使用Mapbox GL JS 构建具有交互性、可视化和数据分析功能的地图应用程序。

• Mapbox Studio 是一个基于 Web 的地图设计工具，开发者可以使用它创建、编辑和发布自定义地图样式。Mapbox Studio 提供了丰富的地图设计工具，使开发者能够自由设计地图样式，并实时预览和调试地图样式。

• Mapbox GL JS 和 Mapbox Studio 之间的关系是:开发者可以使用 Mapbox Studio 创建自定义地图样式，然后将这些样式用作 Mapbox GL JS 的输入数据，从而在 Web 应用程序中构建具有自定义外观和交互性的地图。Mapbox Studio 还提供了用于导出地图数据的工具，这些数据可以直接用于 MapboxGL JS 中。

• 因此，Mapbox Studio 和 Mapbox GL JS 都是 Mapbox 提供的用于创建自定义地图的工具，MapboxStudio 用于设计地图样式，而 Mapbox GL JS 用于在 Web 应用程序中构建交互式地图。两者之间密切相关，并通常一起使用来创建具有自定义外观和功能的地图应用程序。

2、MapboxGLJS 支持哪些地图样式和交互控件?

Mapbox GL JS 支持多种地图样式和交互控件，包括但不限于以下几种:

• 1. 地图样式：Mapbox GL JS 支持 Mapbox 提供的默认地图样式，如 Mapbox Streets、Satellite 和Outdoors 等。同时，开发者也可以使用 Mapbox Studio 创建自定义地图样式，并在 Mapbox GLJS 中使用这些样式。

• 2. 图层控制：Mapbox GL JS 提供了图层控制功能，开发者可以选择显示或隐藏特定图层。此外，开发者还可以更改图层的样式，如改变颜色、透明度、填充等，

• 3. 弹出窗口：开发者可以在 Mapbox GL JS 中添加弹出窗口，以显示与地图位置相关的信息。这些弹出窗口可以包含文本、图像和链接等信息

• 4. 缩放和平移：Mapbox GL JS 支持缩放和平移控制，用户可以通过鼠标滚轮或触摸屏幕进行缩放和平移操作。此外，开发者还可以使用 Mapbox GL JS API 中提供的方法控制缩放和平移。

• 5. 标记和图标：Mapbox GL JS 支持在地图上添加标记和图标，以标记特定位置或显示特定信息。标记和图标可以自定义样式，并可以与其他交互控件结合使用。

3、Mapbox Tilesets 的结构和用途

Mapbox Tilesets是一个基于云端的地图瓦片服务，它允许用户存储、管理和发布地图数据作为瓦片集合，供Mapbox GL JS和其他地图API使用。
Tilesets是一组由瓦片组成的层级结构。每个层级都包含许多瓦片，每个瓦片都是一个256x256像素的PNG或JPEG图片。瓦片的大小和缩放级别根据地图的分辨率而变化。瓦片可以包含各种不同的地图元素，如道路、建筑、地形和标签等。
Tilesets还包含了一些元数据，如名称、描述和地理坐标系信息。Tilesets还可以定义一些属性，如样式、渲染规则和样式信息等，以控制地图的显示和交互方式。
Tilesets可以通过Mapbox Studio、Mapbox CL和Mapbox APIs等方式创建和管理。用户可以将自己的地图数据上传到Mapbox Tilesets，并使用Mapbox GL JS和其他地图API来显示和交互地图数据。同时，Mapbox Tilesets还支持数据源和样式的版本控制和团队协作等功能，可以让多个开发者在同一数据源上进行编辑和开发。

4、Mapbox 如何处理地图数据的隐私和安全性问题?

Mapbox非常重视地图数据的隐私和安全性问题，采取了多种措施来确保用户数据的安全和保密首先，Mapbox使用SSL/TLS加密协议保护数据的传输过程。

所有数据在传输过程中都使用HTTPS协议进行加密，以防止数据在传输过程中被窃取或篡改。其次，Mapbox采用安全的存储方式来保护用户数据的安全性。Mapbox将所有用户数据存储在安全的云端服务器上，并对服务器进行了物理和网络安全措施，以保证数据的完整性和保密性。

此外，Mapbox还采取了多种技术手段来保护数据的隐私性。例如，Mapbox在瓦片生成过程中使用脱敏算法对敏感数据进行脱敏处理，以防止敏感数据被恶意使用。

同时，Mapbox还采用了安全的身份验证和访问控制机制，以确保只有经过授权的用户才能访问和使用数据，最后，Mapbox还遵守各种相关的隐私和安全法规，例如欧洲的GDPR(通用数据保护条例)和美国的CCPA(加州消费者隐私法)等。

Mapbox还为用户提供了强大的隐私和安全控制工具，用户可以根据自己的需求来调整和控制地图数据的隐私和安全等级。

5、openlayer,mapbox,cesium之间的区别

6、三维数据格式

下面是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等，开发者可以根据需求选择不同的数据格式。

7、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可以在不同的地形数据集上展示同一场景，提高应用的可视化效果和跨平台兼容性

8、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

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);

// 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);

9、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()

10、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>

11、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);

12、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.Cartesian3.fromDegrees方法创建了圆的中心点，并指定了圆的半径。然后，我们创建了⼀个名为“Circle”的实体，并在其属性中设置了椭圆几何体的参数，包括椭圆的半长轴和半短轴，材料，轮廓等。
最后将实体添加到场景中，可看到绘制的圆形。

13、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）实体的材料，并将其颜色修改为红色。
最后将数据源添加到场景中，这样就可以看到修改后的颜色。

14、如何在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;

持续更新webgis开发相关技术/面试/就业内容

关注我学习webgis开发不迷路👇👇👇