Hello World!

--- theme: vue-pro highlight: atom-one-dark --- > moe是一个前端方向的搬砖人。作为一个纯gis小白，若本文有gis相关概念或专有名词的错误呈现，欢迎评论区提出，定当第一时间进行修改。 ### 前言 *** 不久前受命研究开发3D可视化及智慧城市的技术路线，第一个想到的就是[Cesium](https://cesium.com)这个世界级开源库。但是我的业务上可能会有很多关于空间及地理分析相关的功能实现，所以我找到了超图。超图拥有基于Cesium包装和二次封装的三维产品3D-WebGL包（文末附产品下载地址）。一切准备就绪，接下来简单了解一下Cesium是什么神奇的东东吧。 ### Cesium *** #### Cesium是什么 Cesium是一个跨平台，跨浏览器的展示三维地球和地图的JavaScript库。Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件的支持，但需要浏览器支持WebGL。它提供了依据Javascript的开发包，方便我们高效快速的搭建一个3D项目。 #### Cesium能干什么 * 支持2D，2.5D,3D形式的地图展示 * 可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示。 * 可用于动态数据可视化并提供良好的触摸支持，支持绝大多数浏览器和mobile。 * Cesium还支持基于时间轴的动态数据展示。 #### Cesium怎么用 > 接下来的代码中我使用的是超图基于Cesium二次封装过的产品包，所以在这简单说一下最基本的Cesium如何使用。将Cesium源码中的Build文件夹，拷入到我们的项目中。然后在项目中静态引入相关文件。 ```html ``` 发布后运行，熟悉的helloworld和地球就出现了。 #### 完整代码 ```html Hello World!

``` ### 项目搭建 *** 我们选择Vue作为开发框架，所以搭建Vue项目这个我就不多做介绍了，大家能在掘金相遇那证明大家都是优秀的前端（~~摸鱼摸摸~~），不会的xdm就百度一下吧。 #### 引入WebGL包因为这个包是基于Cesium二次开发的，所以引入方式可以和Cesium一样，只需要将包内的`Build/Cesium`文件夹放到我们的`public/static`下，在`index.html`内静态引入即可。 > widgets.css包含了Ceisum的可视化控件 ```html ``` > Cesium.js定义了Cesium对象，其中包括我们需要的东西 ```html ``` #### 经典HelloWorld 像很多的地图api一样，Cesium也需要一个div作为三维场景的唯一容器，并在页面初始化时生成对应的Viewer实例。 #### 强调！强调！强调！重要的事情说三遍。所有关于Cesium的变量请！一定！**不要放在data中维护**！因为Vue会对data中的状态进行数据劫持，而对象则会递归的进行数据劫持，以此方式监听状态变化。而Cesium实例的属性极多，层级极深，如果将其挂载到data上。不出意外，你的浏览器会崩溃。如果需要通信的话，最简单的方法就是挂载到window对象上。 #### 完整代码 ```html ``` 启动项目，我们就能看到下图的效果了。 ![helloworld.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70b22bd76fd649038222986ee0ec685b~tplv-k3u1fbpfcp-watermark.image#?w=1725\&h=909\&s=43932168\&e=gif\&f=91\&b=050505) ### 最后 *** 这篇文章我们只是实现了最基本的将三维场景放到我们的项目中，下一篇我们将会简单介绍地图上的基本概念并尝试将点线面等要素绘制到我们这个地球上。然后逐步向其中丰富我们的功能。 ### 附录 *** #### Cesium相关网址 * Cesium文档 * Cesium API * Cesium沙盒示例（好多效果都可以在这找到） #### 超图相关网址 * 超图WebGL产品包下载 * 超图3维示例 * 超图及Cesium相关API属性文档（个人觉得比较方便） #### 系列文章 [【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（二）](https://juejin.cn/post/6955011037070360589) [【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（三）](https://juejin.cn/post/6958708504618237960) [【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（四）](https://juejin.cn/post/6965347246061649934)