1.简介
cesium 一个开源的javascript三维虚拟地球/地图可视化框架,目标是动态数据可视化的虚拟地球领导者,尽一切可能去优化性能、精度、效果,易用性、平台支撑、内容
cesium特点:
• 基于HTML5标准,无插件,跨平台
• 无法独立运行,依赖于浏览器(CesiumLab基于Electron架构)
• 浏览器又是基于HTTP协议的,所以Cesium要正确运行必须有HTTP Server
• 但是HTTP Server的实现不限于开发语言和服务器,学Cesium可以不用nodejs
2.官方资料
3.中文学习网站
4.数据处理工具
5.cesium功能
- 使用3d tiles 格式流式加载各种不同的3d数据,包含倾斜摄影模型、三维建筑物、CAD和BIM的外部和内部,点云数据。并支持样式配置和用户交互操作。
- 全球高精度地形数据可视化,支持地形夸张效果、以及可编程实现的等高线和坡度分析效果。
- 支持多种资源的图像图层,包括WMS,TMS,WMTS以及时序图像。图像支持透明度叠加、亮度、对比度、GAMMA、色调、饱和度都可以动态调整。支持图像的卷帘对比。
- 支持标准的矢量格式KML、GeoJSON、TopoJSON,以及矢量的贴地效果。
- 三维模型支持gltf2.0标准的PBR材质、动画、蒙皮和变形效果。贴地以及高亮效果。
- 使用CZML支持动态时序数据的展示。
- 支持各种几何体:点、线、面、标注、公告牌、立方体、球体、椭球体、圆柱体、走廊(corridors)、管径、墙体
- 可视化效果包括:基于太阳位置的阴影、自身阴影、柔和阴影。
- 大气、雾、太阳、阳光、月亮、星星、水面。
- 粒子特效:烟、火、火花。
- 地形、模型、3d tiles模型的面裁剪。
- 对象点选和地形点选。
- 支持鼠标和触摸操作的缩放、渲染、惯性平移、飞行、任意视角、地形碰撞检测。
- 支持3d地球、2d地图、2.5d哥伦布模式。3d视图可以使用透视和正视两种投影方式。
- 支持点、标注、公告牌的聚集效果。
6.源码下载
7.离线API和案例发布
IIS发布,操作如下:
(1)打开iis服务器,添加网站
(2)填好网站名称和物理地址 端口也可自定义,注意端口冲突问题,填好后如下所示
(3)点击预览如下所示即可实现本地化API和官网案例
8,使用HttpServer启动项目 (使用httpserver 和开发软件vccode简单启动,也可以使用webstrom hbuilder 等其他编码软件,再此简单介绍一款耗内存小的启动方式)
(1)安装NodeJS
- npm install -- 安装cesium开发和运行中依赖的第三方nodejs包
- npm run release – 把cesium各模块源码打包压缩生成统一cesium.js 命令深度解释
- npm start – 开启cesium的测试Http Server
(2)安装http-server插件
npm install -g http-server
http-server 简单http服务器
(3)vscode 免费开源的开发软件
(4)新建目录,新建index.html,复制官网的一个例子下来
如下
修改自己的token,和将在线的cesium地址改成自己本地化且用IIS发布后的地址,启动项目即实现了自己的第一个cesium demo
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script src="https://cesiumjs.org/releases/1.52/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.52/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
<script src="http://localhost:91/Build/CesiumUnminified/Cesium.js"></script>
<link href="http://localhost:91/Build/CesiumUnminified/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2YwMjFlNi1hMTg2LTRkNTctYjNlYS04ODg1OTgwNmMyY2QiLCJpZCI6NDU3NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTEyODAzM30.LwNvzpTYeRZohw0mU682yK1WaShQyMsmek3LTgR9_g4';
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(3827)
})
);
viewer.zoomTo(tileset);
</script>
</body>
</html>
将不定期更新资源,欢迎持续关注
想获得更多的学习知识请关注微信公众号:西北码农或扫下方二维码