WebGIS面试题（浙江中海达）

在这里插入图片描述

1、Cesium中有几种拾取坐标的方式，分别介绍

Cesium是一个用于创建3D地球和地理空间应用的JavaScript库。在Cesium中，你可以使用不同的方式来拾取坐标，以便与地球或地图上的对象进行交互。以下是Cesium中几种常见的拾取坐标的方式：

鼠标拾取（Mouse Picking）：
通过监听鼠标事件（例如鼠标单击或移动）并使用Cesium的API来检测鼠标指针在地球表面的位置。通常使用scene.pick函数来执行鼠标拾取。这个方法返回一个包含有关拾取位置和被选对象的信息的对象。你可以使用以下代码示例来执行鼠标拾取：

var viewer = new Cesium.Viewer('cesiumContainer');
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function (movement) {
    var pickedObject = viewer.scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject)) {
        // 在这里处理拾取到的对象
        console.log('Picked object:', pickedObject);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

键盘拾取（Keyboard Picking）：
类似于鼠标拾取，你还可以使用键盘事件来触发拾取操作。这通常用于处理键盘快捷键，以选择或操作场景中的对象。

空间拾取（Space Picking）：
空间拾取允许你在3D空间中选择对象，而不仅仅是地球表面。你可以使用scene.pickPosition方法来执行空间拾取。这允许你在地球表面之上或以下选择对象。

var viewer = new Cesium.Viewer('cesiumContainer');
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function (movement) {
    var cartesian = viewer.scene.pickPosition(movement.endPosition);
    if (Cesium.defined(cartesian)) {
        // 在这里处理拾取到的空间坐标
        console.log('Picked position:', cartesian);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

图元拾取（Primitive Picking）：
你还可以通过操作Cesium中的图元对象来实现拾取。图元是可渲染的3D对象，你可以将它们添加到场景中并监听事件以执行拾取操作。

创建图元：
首先，你需要创建一个或多个图元并将它们添加到Cesium的场景中。这可以通过使用Cesium提供的不同类型的图元类来完成，如Cesium.PointPrimitive, Cesium.Model, Cesium.Polyline, 等等。这些图元可以包含你要在地球上显示的内容。

var viewer = new Cesium.Viewer('cesiumContainer');

// 创建一个点图元
var point = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
    point: {
        pixelSize: 10,
        color: Cesium.Color.RED
    }
});

// 创建一个模型图元
var model = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
    model: {
        uri: 'path/to/3dmodel.gltf'
    }
});

监听拾取事件：
接下来，你需要为场景添加一个事件监听器，以便在用户与图元交互时执行拾取操作。通常，你会监听鼠标点击事件或键盘事件来触发拾取。

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function (click) {
    // 执行图元拾取操作
    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
        // 在这里处理拾取到的图元对象
        console.log('Picked object:', pickedObject);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

上述代码中，我们监听了左击事件（LEFT_CLICK），但你可以根据需要选择不同的事件类型。

处理拾取结果：
当拾取成功时，viewer.scene.pick将返回一个包含有关拾取结果的对象。你可以根据拾取结果来执行相关操作，如查看图元的属性、更改外观或执行其他操作。

handler.setInputAction(function (click) {
    var pickedObject = viewer.scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
        if (pickedObject.id === point) {
            // 用户点击了点图元
            console.log('Picked Point:', pickedObject);
        } else if (pickedObject.id === model) {
            // 用户点击了模型图元
            console.log('Picked Model:', pickedObject);
        }
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

通过以上步骤，你可以创建图元、监听拾取事件，并根据用户的交互来执行相应的操作。这使得你能够实现与地图上的图元对象的高度交互性。请注意，不同类型的图元可能会有不同的属性和方法可供使用，你可以根据你的具体需求来处理拾取结果。

这些是Cesium中一些常见的拾取坐标的方式。你可以根据你的应用需求选择合适的拾取方法来与地图上的对象进行交互。根据你的具体情况，还可以进一步定制拾取操作以实现更复杂的交互。

2、1TB级别的数据加载到Cesium中如何在浏览器上显示

将1TB级别的数据加载到Cesium中并在浏览器上显示需要经过一系列复杂的数据处理和性能优化步骤。以下是一般的操作流程和浏览器优化策略：

1. 数据处理和准备

在加载大规模数据之前，需要进行数据处理和准备，以减小数据量、提高加载性能，以及将数据转化为Cesium支持的格式。以下是一些可能需要考虑的数据处理步骤：

数据分块化： 将数据分成多个块，根据用户视图范围动态加载可见数据。
数据格式： 使用Cesium支持的数据格式，例如3D Tiles、glTF、Terrain Tiles、PointCloud格式等，以减小文件大小。
数据索引： 在数据中建立索引以便快速访问和查询数据。
数据压缩： 对数据进行压缩以减小传输和加载时间。
LOD策略： 对于多分辨率数据，实现LOD策略，只加载合适分辨率的数据。

2. 服务器端优化

在服务器端，你需要进行以下优化操作：

启用Gzip压缩： 配置服务器以使用Gzip或Brotli等压缩算法来减小数据传输大小。
HTTP缓存： 使用HTTP缓存头来缓存数据，以减少重复加载。
分布式存储： 如果可能，将数据存储在分布式存储系统中，以提高数据访问速度。

3. 数据加载策略

对于1TB级别的数据，必须采用适当的数据加载策略，以确保浏览器不会因为过大的数据而崩溃或变得非常缓慢。以下是一些加载策略：

分块加载： 只加载用户视图范围内的数据块，可以使用Cesium的Tileset来实现。
Web Workers： 利用Web Workers将数据加载和处理分离到后台线程，以防止阻塞主线程。
Streaming： 尝试流式加载数据，以便在需要时逐步加载数据。

4. 数据可视化和交互

一旦数据加载到Cesium中，你需要考虑如何可视化和交互，包括如何呈现大规模的数据以及如何处理用户的查询和拾取操作。这可能需要：

数据过滤： 实现数据过滤，以根据用户需求动态显示或隐藏部分数据。
Level of Detail (LOD)： 对于多分辨率数据，使用LOD策略以降低细节级别，提高性能。
GPU加速： 使用WebGL和GPU来加速渲染和处理大规模数据。
数据聚合： 对于密集数据，可以考虑聚合数据以减少可视化的复杂性。

5. 浏览器优化

在浏览器端，可以采取以下优化策略：

使用最新的浏览器： 确保用户使用支持WebGL 2.0和WebAssembly的最新浏览器版本，以获得更好的性能。
WebGL性能： 使用WebGL性能分析工具来监测和优化3D场景的性能。
内存管理： 谨慎管理内存，确保在加载大规模数据时不会超出浏览器的内存限制。
异步加载： 使用异步加载资源，以避免阻塞页面渲染。
用户体验优化： 提供用户友好的加载进度条和提示，以改善用户体验。

请注意，处理和显示1TB级别的数据在Web浏览器中是一个复杂的任务，可能需要深入的性能优化和分布式计算。最终的优化策略会根据你的数据类型、用户需求和项目预算而有所不同。建议在开始项目之前进行详细的性能分析和规划，以确保最终的应用程序能够如预期般运行。

3、VUE中兄弟组件之间如何传值

在Vue.js中，兄弟组件之间传递数据可以通过以下几种方法来实现：

使用事件总线（Event Bus）： 通过创建一个事件总线实例，兄弟组件可以通过该实例来进行通信。这是一种非常灵活的方法，适用于复杂的组件通信需求。
使用Vuex： Vuex是Vue.js的官方状态管理库，它可以用于在组件之间共享状态。虽然主要用于管理全局状态，但也可以用于兄弟组件之间的通信。
通过父组件传递属性： 兄弟组件可以共享一个共同的父组件，父组件可以通过props将数据传递给子组件，从而间接地传递给其他子组件。
使用自定义事件： 子组件可以触发自定义事件，而父组件可以监听这些事件来获取数据。

下面我将演示一种通过自定义事件来实现兄弟组件之间数据传递的方法。

示例代码：

假设有两个兄弟组件 SiblingA 和 SiblingB，我们要在它们之间传递数据。

创建一个名为 EventBus.js 的事件总线文件：

// EventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

在 SiblingA 组件中触发自定义事件来传递数据：

<template>
  <div>
    <button @click="sendData">Send Data to SiblingB</button>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    sendData() {
      const data = 'Hello from SiblingA';
      EventBus.$emit('data-sent', data);
    }
  }
}
</script>

在 SiblingB 组件中监听自定义事件来接收数据：

<template>
  <div>
    <p>Data received in SiblingB: {{ receivedData }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      receivedData: ''
    };
  },
  mounted() {
    EventBus.$on('data-sent', data => {
      this.receivedData = data;
    });
  }
}
</script>

这里的关键点是我们在 SiblingA 组件中使用 EventBus.$emit 来触发自定义事件，然后在 SiblingB 组件中使用 EventBus.$on 来监听同一个自定义事件，并在事件触发时接收数据。这样，数据就可以在兄弟组件之间传递了。

这是一种简单的方法来实现兄弟组件之间的数据传递。但请注意，对于大型应用程序，使用 Vuex 或通过父组件传递属性可能更有利于管理状态和数据传递。

4、LocalStorage、cookie、sessionStorage之间的区别

LocalStorage、Cookies和SessionStorage都是在Web开发中用于存储数据的客户端存储解决方案，但它们在使用方式、存储持久性和用途上有一些关键区别。下面是它们之间的区别以及各自的优缺点：

Cookies（HTTP Cookies）：

持久性： Cookies可以设置持久性，即可以在指定的过期时间之前一直存在。
存储容量： Cookies的存储容量通常较小，约为4KB左右。
访问： 可以通过JavaScript和后端服务器来访问和设置Cookies。
安全性： Cookies的安全性较低，因为它们可以被客户端修改，所以不适合存储敏感信息。
用途： Cookies通常用于存储用户身份验证令牌、会话标识、跟踪用户行为等。

LocalStorage：

持久性： LocalStorage是持久性的，数据不会在浏览器关闭后消失。
存储容量： LocalStorage的存储容量通常较大，一般为5-10MB左右（不同浏览器可能有不同限制）。
访问： 可以通过JavaScript来访问和设置LocalStorage。
安全性： LocalStorage的安全性较高，因为它不容易被客户端修改。
用途： LocalStorage通常用于长期存储用户首选项、应用程序设置等。

SessionStorage：

持久性： SessionStorage是会话级别的，数据在浏览器会话结束后会被清除。
存储容量： SessionStorage的存储容量通常与LocalStorage相似，也是5-10MB左右。
访问： 可以通过JavaScript来访问和设置SessionStorage。
安全性： SessionStorage的安全性较高，因为它不容易被客户端修改。
用途： SessionStorage通常用于在会话期间临时存储数据，例如在不同页面之间共享数据。

各自的优缺点：

Cookies：
- 优点：持久性、与服务器通信、广泛支持。
- 缺点：容量小、安全性差、会影响HTTP请求性能。
LocalStorage：
- 优点：持久性、较大的容量、安全性好。
- 缺点：仅在单个浏览器窗口/标签页中可用。
SessionStorage：
- 优点：临时存储、较大的容量、安全性好。
- 缺点：仅在会话期间可用，关闭浏览器会话后数据丢失。

在日常中的使用情况：

在日常Web开发中，LocalStorage和SessionStorage通常更常见，因为它们提供了比Cookies更大的存储容量和更好的安全性，而且不会在每个HTTP请求中自动发送到服务器，从而减少了带宽开销。LocalStorage通常用于长期存储用户首选项、缓存应用程序数据等。SessionStorage则适用于在单个浏览器会话期间共享数据，例如在不同页面之间传递数据。

Cookies通常用于存储身份验证令牌、会话标识和跟踪用户行为等需要在客户端和服务器之间传递的信息，但由于安全性较差，所以不适合存储敏感信息。总的来说，选择哪种客户端存储方式取决于具体的需求和安全考虑。

5、Cesium中如何处理建筑分层单体化

在Cesium中处理建筑分层单体化，即在一栋高层建筑中分割并展示不同楼层的内部结构，需要使用3D模型和一些技巧来实现。下面是一个简单的示例，演示如何处理建筑分层单体化。

注意： 这是一个高级的Cesium应用场景，需要合适的3D建模和数据准备。以下示例仅用于演示概念，实际实现可能更复杂。

1. 创建3D模型： 首先，你需要创建一个包含不同楼层内部结构的3D建模。这可以使用3D建模软件（例如Blender、SketchUp、3ds Max等）来完成。确保每个楼层都是独立的3D对象，并且模型中包含了每个楼层的几何形状和纹理。

2. 导出3D模型： 将建模好的3D建筑导出为支持的3D文件格式，例如glTF或3D Tiles。

3. 设置Cesium场景： 在Cesium中，你需要创建一个场景，并添加一个3D模型或tileset。

var viewer = new Cesium.Viewer('cesiumContainer');
var tileset = new Cesium.Cesium3DTileset({
    url: 'path/to/3dtileset'
});
viewer.scene.primitives.add(tileset);

4. 创建楼层选择器： 为了允许用户选择不同楼层，你可以创建一个楼层选择器界面，例如一个下拉菜单或按钮列表。

5. 控制楼层可见性： 当用户选择不同楼层时，通过Cesium的API来控制不同楼层的可见性。这可以通过设置show属性来实现。

// 假设楼层选择器是一个下拉菜单
var floorSelector = document.getElementById('floorSelector');

floorSelector.addEventListener('change', function () {
    var selectedFloor = floorSelector.value;
    
    // 设置不同楼层的可见性
    tileset.root.children.forEach(function (child) {
        var floorNumber = child.content.name; // 假设模型中包含楼层名称
        if (floorNumber === selectedFloor) {
            child.show = true;
        } else {
            child.show = false;
        }
    });
});

上述代码中，当用户选择不同的楼层时，通过遍历模型的子元素并根据用户选择设置不同楼层的可见性。

这是一个简化的示例，实际应用中可能需要更复杂的逻辑和用户界面来处理建筑的分层单体化。建筑分层单体化通常需要详细的3D建模、数据标注和前端开发工作，以确保用户能够方便地浏览建筑的不同楼层。 Cesium提供了强大的3D渲染和交互功能，可以用于实现这种类型的应用。

6、openlayer与leaflet之间的区别，优势

OpenLayers和Leaflet都是流行的开源JavaScript库，用于创建互动性地图应用程序。它们都提供了强大的地图渲染和交互功能，但在某些方面有一些区别和优势。下面是一个超详细的介绍，比较了OpenLayers和Leaflet之间的区别和各自的优势：

1. 历史和成熟度：

OpenLayers： OpenLayers是一个相对较早的开源地图库，于2006年首次发布。它有着长期的发展历史和广泛的用户社区，已经经历了多个版本迭代。
Leaflet： Leaflet相对较新，于2011年首次发布，但迅速获得了广泛的认可和用户社区支持。

2. 复杂性和学习曲线：

OpenLayers： OpenLayers在某些方面更复杂，有更多的功能和配置选项，这也导致了较陡峭的学习曲线。它更适合需要高度自定义和复杂地图应用的开发者。
Leaflet： Leaflet的设计更加简单和直观，具有较低的学习曲线，因此更适合初学者和快速开发。它的API设计注重易用性，但仍提供了强大的功能。

3. 社区和生态系统：

OpenLayers： OpenLayers拥有庞大的社区和插件生态系统，使得可以找到各种扩展和插件来满足不同需求。它也有更多的第三方资源和教程。
Leaflet： Leaflet虽然社区相对较小，但在可用插件和扩展方面也有不少选择。由于其简单性，一些开发者更喜欢自己编写自定义代码，而不是依赖于插件。

4. 性能和渲染：

OpenLayers： OpenLayers在处理大规模数据集时通常表现得更出色，因为它支持WebGL渲染，可以加速地图渲染和交互。
Leaflet： Leaflet的渲染性能也很好，但对于大规模数据集，可能会略逊于OpenLayers。但对于大多数应用程序而言，性能足够了。

5. 样式和外观：

OpenLayers： OpenLayers提供了更多样式和外观的自定义选项，使开发者可以更精细地控制地图的外观。
Leaflet： Leaflet也支持样式自定义，但通常要求更多的CSS技巧来实现复杂的外观。

6. 插件和扩展：

OpenLayers： OpenLayers拥有丰富的插件和扩展，允许你轻松添加各种功能，如地理编码、地图编辑和复杂的地图分析。
Leaflet： Leaflet也有一些插件，但数量和多样性相对较少。不过，你可以编写自定义代码来满足特定需求。

7. 项目目标：

OpenLayers： OpenLayers的目标是提供一个强大的、可高度自定义的地图库，适用于复杂的地理信息系统（GIS）应用。
Leaflet： Leaflet的目标是提供一个轻量级、易于使用的地图库，适用于快速开发交互性地图应用。

总的来说，选择使用OpenLayers还是Leaflet取决于你的项目需求和你的开发经验。如果你需要处理大规模数据、复杂的地理信息系统或需要高度自定义的地图外观和行为，OpenLayers可能更适合。如果你是初学者、需要快速构建简单地图应用或希望简化开发流程，Leaflet可能更适合你。在某些情况下，你还可以考虑结合使用它们，以充分利用各自的优势。

7、Threejs中如何做BIM分层分块展示

在Three.js中展示BIM（建筑信息模型）的分层分块，需要一些复杂的3D建模和渲染技巧。以下是一个一般性的步骤：

获取BIM数据： 首先，你需要获取BIM数据，通常以某种标准格式（如IFC）提供。你可以使用BIM软件（如Revit、AutoCAD）导出BIM模型为合适的格式，然后将数据导入到你的Three.js项目中。
加载BIM数据： 使用Three.js加载BIM数据，通常需要解析BIM文件格式并将其转换为Three.js场景中的对象。你可能需要寻找适当的库或工具来帮助你解析和加载BIM数据。
分层和分块： 一旦加载了BIM数据，你可以根据需要对模型进行分层和分块。这通常涉及到遍历BIM模型的数据结构，将不同的部分分组到不同的Three.js对象或组中。例如，你可以将每个楼层作为一个Three.js组，每个建筑元素（如墙、柱子、窗户等）作为另一个组。
设置显示和隐藏： 为了实现分层分块的展示，你需要提供用户界面或交互方式，以允许用户选择要显示或隐藏的特定层或块。当用户进行选择时，你可以通过设置相关对象或组的可见性来实现显示或隐藏。

以下是一个伪代码示例，演示如何在Three.js中实现基本的分层分块展示：

// 加载BIM数据并创建Three.js场景
const scene = new THREE.Scene();
const loader = new BIMLoader();
const bimModel = loader.loadBIMModel('path/to/bim-model.ifc');

// 将BIM模型中的不同部分分组到不同的对象中
const floorsGroup = new THREE.Group();
const wallsGroup = new THREE.Group();
// ...其他分组

bimModel.forEach(element => {
  if (element.type === 'floor') {
    floorsGroup.add(element);
  } else if (element.type === 'wall') {
    wallsGroup.add(element);
  }
  // ...其他类型的分组
});

scene.add(floorsGroup);
scene.add(wallsGroup);

// 设置交互方式，允许用户选择显示或隐藏不同的分组
function toggleLayer(layerGroup, visible) {
  layerGroup.visible = visible;
}

// 示例：当用户点击“显示墙”按钮时，显示或隐藏墙壁分组
showWallButton.addEventListener('click', () => {
  toggleLayer(wallsGroup, !wallsGroup.visible);
});

// 渲染Three.js场景
const renderer = new THREE.WebGLRenderer();
// ...设置渲染器和相机等

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();