WebGIS面试题（第四期）（中煤）

WebGIS面试题（第四期）

以下题目为中煤地质下属公司面试题，题目仅为部分题目，全部题目在公众号{GISer世界}，答案仅供参考

1、详细说一下栅格瓦片和矢量瓦片的区别

栅格瓦片和矢量瓦片是两种不同类型的地图瓦片，它们在数据存储、处理方式和应用方面有一些显著的区别。

1. 栅格瓦片：

   • 数据类型：栅格瓦片使用栅格或像素的方式来表示地图数据。每个瓦片都是一个图像，通常是PNG或JPEG格式，包含了地图上的各种特征和信息。
   • 数据处理：栅格瓦片在制作过程中需要预先渲染地图图层，并将地图数据转换为图像。这些图像可以包含地图的各种样式、标注和特定的视觉效果。
   • 数据大小：由于栅格瓦片是图像，它们可能会占用较大的存储空间，尤其是在高分辨率下或者需要包含大量细节的地图。

2. 矢量瓦片：

   • 数据类型：矢量瓦片使用矢量数据格式来表示地图信息。矢量数据以几何对象（点、线、面等）和属性数据（例如名称、类别）的形式存储。
   • 数据处理：与栅格瓦片不同，矢量瓦片在制作过程中不需要事先渲染图像。它们包含了原始地图数据，并通过矢量绘图引擎动态渲染地图图层。
   • 数据大小：相比于栅格瓦片，矢量瓦片通常会更小，因为它们只包含地图的几何数据和属性，而不是像素化的图像数据。

3. 应用方面：

   • 栅格瓦片通常用于静态地图展示，尤其是对于需要高度定制化或特定样式的地图来说。它们适合于在离线环境中使用，或者在移动设备上显示地图。
   • 矢量瓦片更适用于需要动态地图渲染的场景，例如交互式地图应用程序。由于矢量瓦片可以在客户端动态绘制，因此它们可以根据用户的操作实现更灵活的地图交互和样式更改。

总的来说，栅格瓦片适合静态地图展示和高度定制化的场景，而矢量瓦片则更适合交互式地图应用和动态地图渲染的需求。

2、84坐标上有一堆点，如何将这些点的坐标转为2000坐标

要将一组点从84坐标系（通常指WGS 84坐标系，一种地理坐标系统）转换为2000坐标系（可能是其他地理坐标系统，比如CGCS2000或WGS 2000），你可以使用一些地理信息系统（GIS）软件或在线工具来完成。以下是一种可能的步骤：

1. 准备数据：将84坐标系下的所有点的经度和纬度坐标记录下来。

2. 选择转换工具：使用地理信息系统软件（如ArcGIS、QGIS）或在线坐标转换服务。这些工具通常支持从一种地理坐标系转换到另一种。

3. 进行转换：在所选的工具中，选择从WGS 84到目标2000坐标系的转换选项。输入每个点的经度和纬度，并执行转换。

4. 验证结果：转换完成后，验证转换是否正确。确保转换后的坐标与目标2000坐标系的期望值一致。

5. 应用转换后的坐标：将转换后的2000坐标应用到你的应用程序或项目中。

请注意，准确的转换需要使用正确的参数和算法，以确保转换的精度和准确性。

（[经纬度WGS84地理坐标系转换成CGCS2000坐标系步骤，必备！ - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/411828029#:~:text=1、 将图层从奥维中导出成shp文件， 2、 打开arcgis-arcmap,3、地理处理-arctoolbox-数据管理工具-投影和变换-要素-投影 4、WGS84坐标转换为地理坐标系-world-ITRF2000 5、打开ArcCatalog ，找到上一步中已经成ITRF2000坐标系的shp文件，单击右键-属性，将图层坐标重新定义成GCGS2000地理坐标系)）

3、Cesium中，飞机漫游初始状态的朝向

在Cesium中，飞机漫游的初始状态朝向通常由飞行的方向决定。这可以通过设置飞机的位置和方向来实现。Cesium提供了几种方式来定义飞机的初始状态朝向：

1. 使用方向向量：可以指定一个方向向量，表示飞机的初始朝向。在Cesium中，这可以通过设置飞机的朝向（heading）、俯仰（pitch）和滚转（roll）来实现。

// 设置飞机的位置
var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude);

// 设置飞机的朝向
var heading = Cesium.Math.toRadians(headingDegrees); // 将角度转换为弧度
var pitch = Cesium.Math.toRadians(pitchDegrees);
var roll = Cesium.Math.toRadians(rollDegrees);

var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

// 创建飞机实体
var airplaneEntity = viewer.entities.add({
    position: position,
    orientation: orientation,
    model: {
        uri: 'path/to/airplane.glb', // 飞机模型文件路径
        scale: 1.0
    }
});

2. 使用航迹：如果已经有飞机的航迹数据，可以直接使用航迹数据中的方向信息来设置飞机的初始朝向。

// 使用航迹数据设置飞机的位置和方向
var position = new Cesium.SampledPositionProperty();
var orientation = new Cesium.SampledProperty(Cesium.Quaternion);

// 添加航迹数据点
// ...

// 创建飞机实体
var airplaneEntity = viewer.entities.add({
    position: position,
    orientation: orientation,
    model: {
        uri: 'path/to/airplane.glb', // 飞机模型文件路径
        scale: 1.0
    }
});

无论选择哪种方式，都可以根据飞机的位置和方向来定义飞机漫游的初始状态朝向。

4、V-if和v-show的区别

在Vue.js中，v-if和v-show都是用于条件性地显示或隐藏DOM元素的指令，但它们有一些重要的区别：

1. 渲染方式：

   • v-if：当表达式为真（true）时，条件块内的元素才会被创建并插入到DOM中，当表达式为假（false）时，条件块内的元素将被从DOM中移除。因此，v-if在切换时是“真正的”条件渲染，会在DOM中销毁和重新创建元素。
   • v-show：无论表达式的值是真还是假，元素始终会被渲染到DOM中，只是通过CSS的display属性控制元素的显示与隐藏。因此，v-show不会销毁和重新创建元素，只是简单地在页面上切换元素的显示状态。

2. 性能影响：

   • v-if：由于在条件不满足时会销毁和重新创建DOM元素，因此适合在需要频繁切换的场景中使用，但会有一定的性能开销。
   • v-show：由于元素始终保持在DOM中，只是通过CSS进行显示和隐藏，因此在频繁切换时不会有额外的DOM操作，性能开销较小。

3. 适用场景：

   • v-if：适用于需要在条件满足时完全渲染新的DOM结构的场景，或者需要在条件不满足时销毁DOM结构以减少内存占用的场景。
   • v-show：适用于需要频繁切换显示状态，但不需要频繁重新渲染DOM结构的场景。

因此，在选择使用v-if还是v-show时，需要根据具体的情况来考虑渲染性能和页面交互的需求。

5、解释下深拷贝和浅拷贝

深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在编程中常见的两种拷贝数据的方法，它们的区别在于拷贝的深度和原始数据结构内部的拷贝方式。

浅拷贝（Shallow Copy）

浅拷贝是指创建一个新的数据结构，其中包含了原始数据结构中的所有元素的引用（或者是简单的值拷贝）。换句话说，浅拷贝只是复制了原始数据结构的顶层结构，而没有递归地复制内部的元素。

示例（JavaScript）：

let originalArray = [1, 2, [3, 4]];

// 浅拷贝
let shallowCopyArray = originalArray.slice();

// 修改原始数组的第二层元素
originalArray[2][0] = 'modified';

console.log(originalArray); // 输出：[1, 2, ['modified', 4]]
console.log(shallowCopyArray); // 输出：[1, 2, ['modified', 4]]

在这个示例中，虽然修改了原始数组中的第二层元素，但由于浅拷贝只是复制了引用，因此修改会同时反映在浅拷贝的数组中。

深拷贝（Deep Copy）

深拷贝是指创建一个新的数据结构，并且递归地复制原始数据结构中的所有元素，包括所有的嵌套层级。换句话说，深拷贝会创建一个完全独立于原始数据结构的新结构，修改新结构中的任何元素都不会影响原始数据结构。

示例（JavaScript，使用Lodash库）：

const _ = require('lodash');

let originalArray = [1, 2, [3, 4]];

// 深拷贝
let deepCopyArray = _.cloneDeep(originalArray);

// 修改原始数组的第二层元素
originalArray[2][0] = 'modified';

console.log(originalArray); // 输出：[1, 2, ['modified', 4]]
console.log(deepCopyArray); // 输出：[1, 2, [3, 4]]

在这个示例中，使用了Lodash库提供的cloneDeep函数进行深拷贝，因此修改原始数组的第二层元素不会影响到深拷贝的数组。

总结

• 浅拷贝只复制了原始数据结构的顶层结构，内部元素仍然是引用，因此修改内部元素会影响到其他拷贝。
• 深拷贝递归地复制了原始数据结构的所有层级，创建了一个完全独立的新数据结构，因此修改新数据结构中的任何元素都不会影响到原始数据结构。

此处只展示了部分面试题，剩余面试题请移步公众号【GISer世界】 欢迎您关注我的原创公众号【GISer世界】，不定期分享资源以及GIS面试题，本期分享到这里就结束了。