2024年前端最新Vue 项目接入使用超图 SuperMap(1)，给后辈的一点建议

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

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！

vue 引入 3D 超图

---

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)

});

然后第一种地图加载就可以了。

加载 S3M 图层

这个地方是将这个文件目录下的所有S3M图层全部加载进来，根据需要可以只加载某几个，可以参考一下官方文档。

// 添加河流S3M图层，open会将改文件路径下的所有图层信息导入地图

var promise = this.scene.open(“http://localhost:8090/iserver/services/CJ/rest/CJ”);

Cesium.when.all([promise], function (layers) {

let layer = that.scene.layers.find(‘长江’) // 根据名称查询图层 这个名字是图层连接对应的名字，不是自己起的

layer.style3D.bottomAltitude = 1150 // 设置该层在地图的高度，根据需要是否设置

this.viewer.zoomTo(layer); // 图层定位到该模型位置

})

官方解释：

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】