WebGIS面试（第二期）

一、简介

近期看到好多小伙伴在寻找WebGIS方面的面试题，正好本人之前也因自己面试分享过一些面试题，秋招目前逐步也快结束了，所以我现在慢慢整理一些包括自己面试以及网上公开的一些我认为有用的面试题，仅供参考，大多面试主要会围绕你自己简历上的项目以及其他进行展开提问，所以说自己的简历才是最重要的。以下内容作为辅助。（本期为第二期分享。第一期分享：WebGIS面试（中海达））

二、部分题（这里只是部分面试题，所有面试题请关注公众号：GISer世界）

注意webgis面试不一定只问一些GIS相关的，还会提问众多技术相关问题；本人的答案也不一定正确，仅供参考！！！

1、说一说路由生命周期（也叫导航守卫）

路由生命周期，也叫导航守卫，是指在前端Web应用中，控制路由的跳转和导航过程中的一系列事件和钩子函数，用于实现路由的权限控制、数据加载、页面渲染等操作。这些生命周期事件和钩子函数可以根据需要在路由跳转前、跳转时、跳转后执行不同的操作，以确保应用的正确运行和用户体验。

在Vue.js和Vue Router中，通常有三种导航守卫：

1. 全局前置守卫：这些守卫会在路由跳转之前触发，允许你执行一些全局的操作，比如权限检查、全局数据加载等。常见的全局前置守卫包括beforeEach。

2. 路由独享的守卫：这些守卫是路由配置中独立于全局守卫的守卫，它们会在特定路由跳转时触发。常见的路由独享守卫包括beforeEnter。

3. 全局后置守卫：这些守卫会在路由跳转完成后触发，允许你执行一些全局的操作，比如页面统计、日志记录等。常见的全局后置守卫包括afterEach。

以下是这些守卫的主要用途和执行时机：

• beforeEach：在路由跳转前执行，通常用于权限控制和全局数据加载。如果在beforeEach中返回false，则路由跳转将被中止。

• beforeEnter：在路由配置中独享的守卫，用于特定路由的权限控制和数据加载。

• afterEach：在路由跳转完成后执行，通常用于页面切换动画、页面统计等全局操作。

此外，还有一些其他的路由守卫，比如：

• beforeResolve：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后触发。

• beforeRouteEnter：在路由进入前触发，但无法访问组件实例，通常用于异步路由组件。

• beforeRouteUpdate：在当前路由改变，但路由参数未改变时触发，用于复用组件。

• beforeRouteLeave：在路由离开前触发，通常用于确认离开或取消导航。

这些守卫可以在Vue Router的路由配置中使用，以便更好地控制前端应用的路由导航和行为。根据具体需求，你可以选择使用不同的守卫来实现路由的各种功能，如权限控制、数据加载、页面切换动画等。

2、关于你在简历中提到的项目,都使用了那些技术栈来进行开发?

这个需要结合自己擅长的技术栈以及以及自己的简历。

3、说一下天地图这个服务是什么格式的类型,具体是怎样加载出来的?

"天地图"是中国国家测绘局（National Administration of Surveying, Mapping, and Geoinformation）推出的一套在线地图服务，提供了中国地图的相关数据。这些地图数据通常以标准的Web地图瓦片格式提供，常见的格式包括瓦片图层（Tile Layers）和矢量图层（Vector Layers）。

1. 瓦片图层（Tile Layers）：这是最常见的地图数据加载方式，天地图提供了标准的瓦片图层，以瓦片（tiles）的形式分割地图，每个瓦片包含一小块地图数据，通常是图片格式，如PNG。你可以通过URL获取这些瓦片并将它们加载到地图上，以显示地图数据。通常，这些URL包括瓦片的x、y坐标和缩放级别，以确保你获取到正确的地图数据。

2. 矢量图层（Vector Layers）：除了瓦片地图，天地图还提供一些矢量地图数据，通常以矢量图层的形式提供。这些数据可以是GeoJSON、KML、WMS等格式。你可以使用前端地图库（如Leaflet、OpenLayers、Mapbox等）加载这些矢量数据，并在地图上绘制要素，如道路、河流、建筑物等。

加载天地图服务通常需要以下步骤：

1. 获取访问权限：首先，你需要获取访问天地图服务的权限，通常需要在天地图官方网站注册并获取API密钥或访问令牌。

2. 选择地图类型：天地图提供了多种地图类型，如卫星地图、道路地图、地形地图等。根据你的需求选择适合的地图类型。

3. 加载地图库：使用前端地图库，如Leaflet、OpenLayers等，加载地图。你需要在你的网页中引入相应的地图库文件，并创建一个地图容器。

4. 添加图层：根据你的选择，添加天地图的瓦片图层或矢量图层到地图上。如果是瓦片地图，你需要设置天地图瓦片服务的URL，包括x、y坐标和缩放级别。如果是矢量地图，你需要加载相应的矢量数据。

5. 设置地图视图：根据你的需求，设置地图的初始中心点和缩放级别，以及其他交互行为，如缩放、拖动等。

6. 处理用户交互：根据需要，添加交互控件，如放大缩小按钮、信息弹出框等，以增强用户体验。

7. 部署到网页：将配置好的地图应用嵌入到你的网页中，用户可以通过浏览器访问并与地图进行交互。

天地图服务提供了中国地图数据，可以通过瓦片图层或矢量图层的形式加载到前端地图库中，以在网页中显示地图数据并提供交互功能。

4、在 openLayers 中如何加载 WMTS 服务?

在 OpenLayers 中加载WMTS（Web Map Tile Service）服务涉及一系列步骤，包括设置图层、创建地图、配置WMTS图层和视图。面试可简单回答：

1. 创建地图容器：首先，需要在HTML中创建一个<div>容器，用于显示地图。
2. 初始化地图对象：使用OpenLayers，初始化一个地图对象，并指定地图的目标容器。
3. 配置WMTS图层：设置WMTS图层的参数，包括服务URL、图层名称、图像格式、投影、瓦片网格等。确保提供正确的URL和其他相关信息。
4. 创建WMTS图层：基于配置的WMTS源，创建一个WMTS图层。
5. 将图层添加到地图：将WMTS图层添加到地图对象中，以便在地图上显示相关地图数据。
6. 设置地图视图：配置地图的初始视图，包括中心点和缩放级别。确保投影和坐标系设置正确。
7. 加载地图：确保地图被成功加载到页面中，可以添加额外的交互控件，如缩放按钮。

强调在步骤3中需要注意WMTS图层的配置，包括URL、图层名称、图像格式、投影、瓦片网格等，这些是加载WMTS服务的关键参数。

以下是详细的介绍，

1. 引入 OpenLayers 库：首先，确保你在网页中引入了OpenLayers库的JavaScript文件。你可以从OpenLayers的官方网站下载最新版本的库文件并在HTML中引入。

<script src="https://cdn.jsdelivr.net/npm/ol@6.10.1/dist/ol.js"></script>

2. 创建地图容器：在HTML中创建一个用于显示地图的<div>容器。

<div id="map" class="map"></div>

3. 初始化地图对象：在JavaScript中，初始化OpenLayers地图对象，并指定地图的目标容器。

var map = new ol.Map({
  target: 'map', // 这里的'map'是你创建的地图容器的ID
});

4. 配置WMTS图层：设置WMTS图层的相关参数，包括图层来源（source）、投影（projection）、瓦片网格（tile grid）等。

// 创建WMTS源
var wmtsSource = new ol.source.WMTS({
  url: 'http://your-wmts-service-url.com', // 替换为你的WMTS服务URL
  layer: 'your-wmts-layer', // 替换为你的WMTS图层名
  format: 'image/png', // 图像格式，根据服务配置
  matrixSet: 'your-matrix-set', // 替换为你的矩阵集
  projection: 'EPSG:4326', // 替换为你的投影
  tileGrid: new ol.tilegrid.WMTS({
    origin: [-180, 90], // 瓦片网格的原点
    resolutions: [0.703125, 0.3515625, 0.17578125, ...], // 分辨率数组，根据服务配置
    matrixIds: ['0', '1', '2', ...], // 矩阵ID数组，根据服务配置
  }),
});

// 创建WMTS图层
var wmtsLayer = new ol.layer.Tile({
  source: wmtsSource,
  opacity: 1,
});

5. 添加图层到地图：将创建的WMTS图层添加到地图对象中。

map.addLayer(wmtsLayer);

6. 设置地图视图：配置地图的初始视图，包括中心点、缩放级别等。

var view = new ol.View({
  center: [0, 0], // 中心点坐标
  zoom: 2, // 初始缩放级别
  projection: 'EPSG:4326', // 投影
});
map.setView(view);

7. 加载地图：最后，确保地图被正确加载到页面中。

// 如果有需要，可以添加其他交互控件，如缩放按钮、导航控件等
map.addControl(new ol.control.Zoom());

通过上述步骤，可以成功加载WMTS服务并显示在OpenLayers地图中。记得替换示例代码中的URL、图层名称、矩阵集、分辨率、矩阵ID等参数，以适应的具体WMTS服务。

5、刚才有提到 WMS,可以具体说一下 WMS和 WMTS 两者的区别吗?

当涉及到地理信息系统（GIS）和地图服务时，WMS（Web Map Service）和WMTS（Web Map Tile Service）是两种不同的标准，它们有一些重要的区别：

1. 数据传输方式：

   • WMS：WMS是基于请求-响应模式的。每次请求地图数据时，WMS服务器会动态生成地图图像，然后将整个地图图像作为响应传送给客户端。这意味着每次请求都生成新的地图图像，适用于动态数据和图层的情况，但可能会导致性能较差。
   • WMTS：WMTS采用了瓦片式数据传输，地图被分成小块瓦片，每个瓦片都是一个预先生成的图像。这些瓦片在服务器端预先渲染，客户端通过直接请求这些瓦片来加载地图数据。这种方式通常更高效，尤其适用于静态地图数据，因为无需在每次请求时生成新的地图图像。

2. 性能：

   • WMS：由于动态生成地图图像，WMS可能在性能上不如WMTS，尤其是在大规模地图和高并发请求的情况下。
   • WMTS：WMTS的性能通常更好，因为瓦片数据是预先生成的，服务器只需提供瓦片即可，不需要在每次请求时进行渲染。

3. 缓存：

   • WMS：WMS通常需要客户端自行管理图像的缓存，因为每次请求都会生成新的图像。这可能导致客户端性能问题，因为需要存储大量的图像数据。
   • WMTS：WMTS的瓦片式数据天然适合缓存，因为瓦片是静态的，可以被有效地缓存。客户端可以从缓存中加载瓦片，减轻了服务器和客户端的负担。

4. 灵活性：

   • WMS：WMS提供更多的灵活性，因为它可以在每次请求时动态生成地图图像，允许对地图进行实时操作和渲染。适用于需要动态数据的应用场景。
   • WMTS：WMTS提供了稳定和可预测的地图显示，但通常不支持实时数据更新或动态渲染，因为瓦片是静态的。

总结来说，WMS和WMTS都是用于在Web上提供地图数据的标准，但它们的工作方式和适用场景有所不同。选择哪种标准取决于你的具体需求。如果需要实时渲染和动态数据，WMS可能更合适。如果需要更高的性能和稳定性，以及静态地图数据，WMTS可能是更好的选择。

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