【游戏开发】初识 cesiumJS、开发环境搭建
cesium是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库；cesium支持三维地球（3D）、二维地图（2D）以及2.5D哥伦布视图（2.5D）等三维数据展示，如各种几何图形、高亮区域、三维模型和动态数据的可视化展示；
cesium 使用 WebGL 来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL；cesium 是基于 Apache2.0 许可的开源程序，它可以免费的用于商业和非商业用途；cesium 可应用于三维数字地球, 数据可视化, 创建虚拟场景等功能；
2. cesiumJS 支持的数据源
对于他支持的数据源呢，主要有以下：
影像数据：Bing、ArcGIS、OSM、WMTS、WMS 等；地形数据：ArcGIS、谷歌、STK 等；矢量数据：KML、KMZ、GeoJSON、TopoJSON、CZML；三维模型：GLTF、GLB（二进制glTF文件）；三维瓦片：3D Tiles（倾斜摄影、人工模型、 三维建筑物、CAD、BIM，点云数据等）3. cesiumJS 学习。
前面也说了，cesium 是基于 WebGL 来进行渲染图形；这也就离不开对于 web 端开发的学习以及 WebGL 等。
1. 静态资源引入
这种方式也是最简单的。可以通过在官网进行下载代码：
然后解压之后会看到如下目录：
然后在项目中 index.html 中进行引入即可：
<!DOCTYPE html>
<head>
<title>Hello World</title>
<script src="../Build/Cesium/Cesium.js"></script>
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html,
body,
#mapCon{
mapCon: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="mapCon"></div>
<script>
const viewer = new Cesium.Viewer(''mapCon'')
</script>
</body>
这种方式呢，不管是我们通过目前主流的三大框架的开发方式还是直接 html 这种不基于框架来开发都是适用的。不过，如果是基于 typescript 的开发环境，还得在全局类型进行定义 Cesium，不然报错；
declare const Cesium;
或者直接将下载的 cesium 中源码的 cesium.d.ts 拿到 src 文件夹下：
修改为：
declare module Cesium {}
这样，写代码也就会有提示：
2. npm 方式管理安装
另一种方式就是通过 npm 进行安装，通过命令：
npm install cesium
然后在项目中通过 require 的方式进行引用：这里因为 cesium 是 nodejs 的一个模块，并不是 ES6 模块规范导出的。
import React, { useEffect, useRef } from ''react''
const Cesium = require(''cesium'');
Cesium.Ion.defaultAccessToken = ''你的 key''
const Map3d = () => {
const mapRef = useRef<HTMLDivElement>(null)
useEffect(() => {
mapRef && mapRef.current && new Cesium.Viewer(mapRef.current)
}, [])
return <div ref={mapRef}></div>
}
export default Map3d
如果需要支持 es6 模块这种，可以通过修改 webpack 的加载方式。
同样如果是想要支持 ts 提示的话，可以按照前面的步骤，通过复制 cesium.d.ts 的方式实现。
其他一些问题：
token 的获取，通过 cesium 官网注册账号进行申请 key；其他的方式可以在 沙盒中。打印 console.log(Cesium.Ion.defaultAccessToken); 这种方式的话；只适用于你的 demo 项目；因为官方网站会不定期修改这个 key；最好还是去申请一个。
总的来说，还是推荐通过静态资源的方式进行 cesium 的开发；
转载声明：本文来源于网络，不作任何商业用途。
0全部评论
暂无留言，赶紧抢占沙发
热门资讯
韩国画师DSマイル作品
【绘画教程】教你如何轻松画出帅气的握枪姿势！ ...
3DMAX如何设置路径跟随？
【原画设计】韩国画师 JUNGMIN JIN /DOSPI作品...
在Maya中如何合并两个物体有什么方法？
C4D软件切换多个文件窗口有什么方法？
3dmax模型消失的原因及解决方法!
Zbrush如何同时调整多个子工具模型？
C4D显示法线方向有什么办法？
