本文介绍了如何在Vue项目中接入和使用超图SuperMap，包括二维地图的配置、HTML结构、TS代码实现，以及如何导入地形图和影像。强调面试前的准备和前端学习的重要性，并提供了相关前端面试题及学习资源。
总结一下
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。
为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’), resolve(‘node_modules/webpack-dev-server/client’), resolve(‘node_modules/@supermap’)]
},
这样应该就没有问题了，然后二维的相对简单，我们简单来一个案例。
引库
首先在需要使用超图的页面引入一些库。
import Map from ‘ol/Map’;
import View from ‘ol/View’;
import TileLayer from ‘ol/layer/Tile’;
import * as control from ‘ol/control’;
import { Logo, TileSuperMapRest } from ‘@supermap/iclient-ol’;
这些库是根据官网文档里面给的引入的，也就是OpenLayers API文档。
具体引入什么库，我们可以根据需要，从官网上去抄几个案例，然后案例上面用到的库，我们就可以去 OpenLayers API文档里面对应的去查。
比如说在官网的案例里面有这样一段代码， var layer = new ol.layer.Tile 不知道转换成vue应该引入什么库的时候，我们可以去opealayers查一下。
就是类似这样查。
HTML
接来编写一个html用来展示地图。
TS
然后是 ts 代码。
var url = “https://iserver.supermap.io/iserver/services/map-world/rest/maps/World”;
this.map = new Map({
target: ‘map’,
controls: control.defaults({ attributionOptions: { collapsed: false } }).extend([new Logo()]),
view: new View({
center: [106.86, 39.71],
// maxZoom: 18,
// minZoom: 2,
zoom: 5,
projection: ‘EPSG:4326’,
})
});
var layer = new TileLayer({
source: new TileSuperMapRest({
url: url,
wrapX: true
}),
projection: ‘EPSG:4326’
});
this.map.addLayer(layer);
然后二维的就可以正常显示出来了。
如果需要其他的功能可以去官网案例查看，直接拿过来使用，但是需要将js代码转换成vue的语法，ok！
3D的话稍微费劲一些，可以参考一下超图3D文档。官网上使用的都是js的方式，vue安装的话需要一个包，这个自己可以找时间下载一下子。
下载下来之后，我把他放进了 static 文件夹下面。
然后在 index.html 中引入 widgets.css、Cesium.js 和 zlib.min.js 文件。
然后就没有了，直接在需要使用超图3D的界面编写就可以了，同样，可以参照超图3D官网提供的3D案例进行测试，需要将js代码转换为vue的代码。
这里呢，我就简单介绍几个图层引入的demo吧，还是需要一个div用来展示地图，忘记说了， 这个div一定要记得设置宽度和高度哈，不然的话可能显示不出来，切记切记！
然后是ts代码，这个不需要像二维一样引入这种各样的库，直接编码就行。
简单的，创建一个三维的地球
var viewer = new Cesium.Viewer(‘map’)
就这一行代码，如果可以显示一个三维地球的话，就说明引入的成功，没有问题，可以继续向下开发了。
然后详细的代码我就不分享了，需要的话从案例上面找着转换。
我分享一下常见的几种图层的引入吧，其实官网也有说过，我都测试过，所以说直接给大家看一下。
第一种导入地形图和影像
比如说我要导入北京某一个地方的GIS信息，想百度只能看平面图，那是二维的，看不到高度，但是超图引入地形图之后可以看到地势信息，比如说高度之类的，这个时候我们需要一个某区域地形的链接，还有这个区域的影像链接，然后地形在下面，具有高度，把铺在上面的影像地图给支棱起来，我应该说明白了是吧？代码如下：
添加地形图
var viewer = new Cesium.Viewer(‘map’, {
//创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
terrainProvider: new Cesium.CesiumTerrainProvider({
url: ‘http://localhost:8090/iserver/services/3D-DiXing/rest/realspace/datas/地形_Terrain’, // 加载地形图，是datas下面的链接
isSct: true,//地形服务源自SuperMap iServer发布时需设置isSct为true
invisibility: true
}),
});
添加影像
// 添加底层影像
var layer = new Cesium.SuperMapImageryProvider({
url: ‘http://localhost:8090/iserver/services/YingXiang/rest/maps/影像底图’ //影像服务的地址 rest格式
});
var imgLayer = this.viewer.imageryLayers.addImageryProvider(layer)
这样的话，地形和影像就加载进去了。
然后可以定位一下相机位置，就是我们一加载时候看哪个部分，不然看到的是一个地球，需要我们自己放大找。
// 简单定义相机视角位置
this.scene.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(108.19, 40.39, 1000000)
});
文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
性能
linux
前端资料汇总
扫一扫
1608