2024年前端最新Vue 项目接入使用超图 SuperMap(1)，2024年最新揭秘今年前端春招面试必问问题有哪些

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

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

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

OpeaLayers： 穿梭门

在这几个网站中你肯定可以找到对应的资料或者是API的接口，但是官网给出的案例都是js代码的，如果需要在vue项目里面用，可能需要将对应的js代码转换为vue的语法使用，其实转的时候不需要明白具体每一行代码的意思，因为案例里面的代码并没有具体的介绍，如果想搞清楚的话需要自己去单个查询api，但是这是一个很庞大的任务量，以后可以慢慢研究，如果着急的话只需要明白代码块就可以。

vue项目引入二维超图

---

接下来就是vue项目引入二维的超图。

我们以OpenLayers为例，文档。

文档里面介绍了很多的引入方式，然后如果是Vue项目的话请使用npm引入的方式。

npm install @supermap/iclient-ol

安装完成之后，node_modules 文件夹就会有一个 supermap 的文件夹，恭喜你，安装成功！

安装完成之后，再 index.html 文件中引入CSS文件。

然后就可以了，项目里面就成功的添加了 SuperMap。

但是有一个问题哈，就是项目ES6的语法能不能转为ES5的，这个可能需要配置一下，不然后期的项目在使用超图加载数据的时候会哐哐报错。

在 webpack.base.conf.js 文件中加入 supermap 的转换。

{

test: /.js$/,

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！

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’)

就这一行代码，如果可以显示一个三维地球的话，就说明引入的成功，没有问题，可以继续向下开发了。

然后详细的代码我就不分享了，需要的话从案例上面找着转换。

我分享一下常见的几种图层的引入吧，其实官网也有说过，我都测试过，所以说直接给大家看一下。

第一种导入地形图和影像

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

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

  

面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

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