【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（一）

moe是一个前端方向的搬砖人。作为一个纯gis小白，若本文有gis相关概念或专有名词的错误呈现，欢迎评论区提出，定当第一时间进行修改。

前言

不久前受命研究开发3D可视化及智慧城市的技术路线，第一个想到的就是Cesium这个世界级开源库。但是我的业务上可能会有很多关于空间及地理分析相关的功能实现，所以我找到了超图。超图拥有基于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文件夹，拷入到我们的项目中。然后在项目中静态引入相关文件。

  <link rel="stylesheet" href="./Build/Cesium/Widgets/widgets.css">
  <script src="./Build/Cesium/Cesium.js"></script>

发布后运行，熟悉的helloworld和地球就出现了。

完整代码


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script> Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'; var viewer = new Cesium.Viewer('cesiumContainer'); </script>
</body>
</html>

项目搭建

我们选择Vue作为开发框架，所以搭建Vue项目这个我就不多做介绍了，大家能在掘金相遇那证明大家都是优秀的前端（~~摸鱼摸摸~~），不会的xdm就百度一下吧。

引入WebGL包

因为这个包是基于Cesium二次开发的，所以引入方式可以和Cesium一样，只需要将包内的Build/Cesium文件夹放到我们的public/static下，在index.html内静态引入即可。

widgets.css包含了Ceisum的可视化控件

<link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">

Cesium.js定义了Cesium对象，其中包括我们需要的东西

<script src="static/Cesium/Cesium.js"></script>

经典HelloWorld

像很多的地图api一样，Cesium也需要一个div作为三维场景的唯一容器，并在页面初始化时生成对应的Viewer实例。

强调！强调！强调！

重要的事情说三遍。所有关于Cesium的变量请！一定！不要放在data中维护！因为Vue会对data中的状态进行数据劫持，而对象则会递归的进行数据劫持，以此方式监听状态变化。而Cesium实例的属性极多，层级极深，如果将其挂载到data上。不出意外，你的浏览器会崩溃。

如果需要通信的话，最简单的方法就是挂载到window对象上。

完整代码

<template>
  <div class="container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script> var viewer, camera; export default { data() { return {}; }, mounted() { this.init(); }, methods: { init() { viewer = new Cesium.Viewer("cesiumContainer", {}); }, }, }; </script>

<style lang="scss" scoped>
</style>