前言
不久前受命研究开发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源码中的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内静态引入即可。
<link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
<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>
启动项目，我们就能看到下图的效果了。
最后
这篇文章我们只是实现了最基本的将三维场景放到我们的项目中，下一篇我们将会简单介绍地图上的基本概念并尝试将点线面等要素绘制到我们这个地球上。然后逐步向其中丰富我们的功能。
附录
Cesium相关网址
- cesium.com/docs/ Cesium文档
- cesium.com/docs/cesium… Cesium API
- sandcastle.cesium.com/ Cesium沙盒示例（好多效果都可以在这找到）
超图相关网址
-
support.supermap.com.cn:8090/webgl/examp… 超图3维示例
-
support.supermap.com.cn:8090/webgl/web/a… 超图及Cesium相关API属性文档（个人觉得比较方便）
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！