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

前言

不久前受命研究开发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文件夹，拷入到我们的项目中。然后在项目中静态引入相关文件。

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

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

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!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的可视化控件

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

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

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

经典HelloWorld

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

强调！强调！强调！

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

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

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

启动项目，我们就能看到下图的效果了。
helloworld.gif

最后

这篇文章我们只是实现了最基本的将三维场景放到我们的项目中，下一篇我们将会简单介绍地图上的基本概念并尝试将点线面等要素绘制到我们这个地球上。然后逐步向其中丰富我们的功能。

附录

Cesium相关网址

Cesium
#JavaScript #Cesium
【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（一）
https://moewang0321.github.io/2021/04/22/【三维GIS可视化】基于Vue+Cesium+Supermap实现智慧城市（一）/
作者
Moe Wang
发布于
2021年4月22日
许可协议