【vue-cesium】在vue上使用cesium开发三维地图(二)续

4,027 阅读5分钟

这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战

前言

上篇文章【vue-cesium】在vue上使用cesium开发三维地图(二)

只是直接把vue加载cesium的代码告诉大家,但是并没有说,为什么要这么弄?

这里,讲解下 vue 加载cesium 步骤,希望带大家学习方法,思路,去思考,而不是只copy代码,知其然不知其所以然

把vue 加载cesium 步骤写出来,更加有助于大家在遇到不清楚,不知道的东西时候,可以学会自主查询。

开始

看官网

cesium官网

刚看到官网,纯英文,对于英语几乎全还给英语老师的我来说,感到了鸭梨山大,但是我们不是可以在线翻译嘛,实在不认识,我们就去翻译

说到翻译,脑子里就蹦出了下面这几个:

  1. 百度翻译
  2. 谷歌翻译
  3. 网易翻译
  4. 浏览器翻译小插件

而我的操作是:

  1. 本地下一个网易翻译的客户端,开机自启,
  2. 浏览器安装划词翻译助手
  3. 有时候我要手输入单词看翻译,直接浏览器地址栏手输一个fanyi.baidu.com的页面

3726D251-FA2D-4D36-99DE-6452D57022D6.png

如此三板斧下去,英语是不是就不算什么大问题啦,佩服机智的我,在此,希望大家不要害怕英文

接着,回到cesium官网,第一眼看下去,全英文,不知道怎么办,再仔细看下,你就发现了华点,我们本质是前端工程师,日常和javascript打交道,在下面这个图中,我们一眼就看到,这个CesiumJS 十之八九 就是我们要找的东西。

看到下面有个 LEARN MORE 没有,翻译过来就是学习更多啊,果断点进去

C2E93F2D-0AC5-4809-8071-9B45A8AC04BA.png

然后,我们发现了,这就是学习文档啊,一般看到文档了,后面基本路就顺了,虽然这是英文,但是这些单词,大概还是认识的,我们从第一个开始看,Quickstart  翻译过来 就是开速开始啊,

ACA3F92A-39AC-4749-B7A0-F2E8254FC741.png

相信大家用前端UI框架的时候,第一反应,应该都是去这个框架首页去查文档,对吧,我这里放张element-ui文档首页,给大家感受感受

635F5C15-17F1-45DE-B75B-8450B46F40AE.png

是不是发现 cesium文档  和 element-ui 文档 其实也差不多,都是从快速开始 起步,然后一步一步的往下走的,学习新东西,最直接的方法,就是去源头看,就是去看它的官方文档,这是最准确,最快捷的。

当然,官方文档有的地方看不懂,就把看不懂的地方,去百度上搜,看其他人在这个方面写的博客文章,加速自己的快速理解。

我们继续

B2A27741-532E-4BA3-850F-F63755DAA723.png

直接点击这个Access Tokens 超链接,就跳转过去了,你登录了就直接跳转过去了,你没登陆,就跳转到登录页面,登录之后,也进去了。

AF58BF0E-740A-4241-9D40-D3EB7C39007F.png

鼠标往下翻

7F47481F-D869-4539-A273-4D92D268D509.png

E2422E9B-5AEB-4569-B3F7-3A6328E0C384.png

A7060B18-5749-4FA5-AACA-90DE701C9A19.png

回到我们的vue项目,我们知道,在vue中,一些配置相关的都是在vue.config.js中进行配置。那么以上文档上看到的配置相关的,我们要在vue.config.js中进行配置了

关于在vue.config.js中的配置,就不在此多说了,因为踩坑踩的太多了,不太记得了,大部分已经在上面文章中写出来了,不保证全部写出来了。总之

这里经过我不断的上网查询,踩坑,安装相关的依赖,报错,再百度,再踩坑,最后总结出了【vue-cesium】在vue上使用cesium开发三维地图(二)

多说一句

多说一句,大多数人,学习新东西,看着文档,一步一步走,也很少会一上来成功的,所以不要怕出问题出现问题那就去查去问去解决问题,当你问题碰得多了,也解决的多了,你的经验就蹭蹭蹭的上来了,你解决问题的能力也就提升上去了,

还想多说一句

前端领域,更新迭代快,而且早期前端是 刀耕火种的时代,那个时代虽然不像现在这么多框架,开发没现在那么方便,但是那个时候,需要什么新的功能,都是直接操作原生js,dom元素,直接开干的,

而现在,各种框架层出不穷,很多底层的东西,都已经帮你封装好了,你直接调用就好了,这就导致,你日常开发中,碰到的有些需要定制的功能,你上网查,发现网上可能没有,也可能有现成的,但那也是早期时候,原生js,直接写的,直接操作dom元素

但你所用的UI框架里没有现成的,你得学会,自己把这些原生的转成自己这个框架中的。

举个例子

我用vue开发,有个仪表盘的需求要我写一个,【vue自定义组件】D3.js实现动态仪表盘组件,我网上查到了,但网上是原生js 搞出来的,我直接用不了,那我就要自己转化了。

再举个例子

我用vue开发,摸索三维地图的时候,我看到高德地图里面就有三维模式的,【vue与高德地图】加载3D地图,但人家也是原生js,h5 实现的,我也要转成 vue的,那我就要去查,去找,去思考

好比现在leetcode 算法题,大部分的题解都是 JavaCC++Python写出来的。关于JS的题解就是少,我们又是主力用JS开发的。那怎么办,我们就要学会转换,把其他的东西,转换成我们自己的东西。

希望大家能活学活用,能转换,一帆风顺。

都看到这里了,求各位观众大佬们点个赞再走吧,你的赞对我非常重要