1.简介 Fabric 是Cesium中定义的描述材质Material的JSON 结构体.Material代表了一个物体的外观. 材质Material可以是比较简单的,比如直接将一张图片赋予表面,或者使用条纹状.棋盘状的图案:也可以使用Fabric和GLSL,重新创建一个新的材质或者组合现有的材质.例如,我们可以通过程序生成的纹理(procedural brick).凹凸贴图(bump map)和高光贴图(specular map)来生成一个潮湿碎裂的砖块材质.在Cesium中支持赋予材质的图元

我们要在一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它. 按照惯例,这个模块类的名字叫做 APPRoutingModule,并且位于 src/app 下的 app-routing.module.ts 文件中. 使用 CLI 生成它. 1.在命令窗口输入ng generate module app-routing --flat --module=app --flat 把这个文件放进了 src/app 中,而不是单独的目录中.--module=app

Cesium入门4 - 创建Cesium Viewer Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 任何Cesium应用程序的基础都是Viewer.Viewer是一个带有多种功能的可交互的三位数字地球的容器(盒子).创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可. var viewer = new Cesium.Viewer('cesiumCont

1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget for building applications. It composites all of the standard Cesium widgets into one reusable package. The widget can always be extended by using mixins

今天来看看GroundPrimitive,选择GroundPrimitive有三个目的:1 了解GroundPrimitive和Primitive的区别和关系 2 createGeometry的特殊处理 3 如何通过阴影体的方式实现贴地效果. GroundPrimitive.prototype.update 可以认为GroundPrimitive是Primitive的扩展,通过Update我们可以很好的理解这个过程: GroundPrimitive.prototype.update = func

通过之前的Material和Entity介绍,不知道你有没有发现,当我们需要添加一个rectangle时,有两种方式可供选择,我们可以直接添加到Scene的PrimitiveCollection,也可以构造一个Entity,添加到Viewer的EntityCollection中,代码如下: // 直接构造Primitive,添加 rectangle = scene.primitives.add(new Cesium.Primitive({ geometryInstances : new Cesi

Shader 首先,在本文开始前,我们先普及一下材质的概念,这里推荐材质,普及材质的内容都是截取自该网站,我觉得他写的已经够好了.在开始普及概念前,推荐一首我此刻想到的歌<光---陈粒>. 在真实世界里,每个物体会对光产生不同的反应.钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射.每个物体对镜面高光也有不同的反应.有些物体不会散射(Scatter)很多光却会反射(Reflect)很多光,结果看起来就有一个较小的高光点(Highlight),有些物体散射了很多,它们

之前主要是Entity的一个大概流程,本文主要介绍Cesium的属性,比如defineProperties,Property(ConstantProperty,CallbackProperty,ConstantPositionProperty)以及createPropertyDescriptor的相关内容,研究一下Cesium对Object的属性设计和使用方式. 我们以Entity为例,看看它是如何封装自己的属性: function Entity(options) { var id = opti

如果把地球比做一个人,地形就相当于这个人的骨骼,而影像就相当于这个人的外表了.之前的几个系列,我们全面的介绍了Cesium的地形内容,详见: Cesium原理篇:1最长的一帧之渲染调度 Cesium原理篇:2最长的一帧之网格划分 Cesium原理篇:3最长的一帧之地形(1) Cesium原理篇:3最长的一帧之地形(2:高度图) Cesium原理篇:3最长的一帧之地形(3:STK) Cesium原理篇:3最长的一帧之地形(4:重采样) 有了前面的"骨骼",下面我们详细介绍一下影像篇的调度

范例中所有范例可以在Github中搜索:ExamplesforCesium Cesium ['siːzɪəm]是一款开源的JavaScript开源库,开发者通过Cesium,实现无插件的创建三维球和二维地图.Cesium通过WebGL技术实现图形的硬件加速,并且跨平台,跨浏览器,并提供动态数据的可视化展现. Cesium本意是化学元素铯,其是定义秒的最精确标准,普遍地用于制作精细的原子钟,而Cesium项目专注于动态可视化方面,这也是其取名为Cesium的内在涵义.  准备工作 浏览器确保你的浏

文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d        Cesium中提供了多种ImageryProvider方式,来满足用户的实际需求,但作为天朝的一份子,可惜的是,看似很多,但最终的选择却又是捉襟见肘.如果是国内数据,个人认为天地图的不错,其他的地图都有偏移,但天地图的数据在国外有欠缺,假如你有一个模型数据或者地形数据,恰好是国外的某一个城市,比如马赛等,天地图就满足不了这种场景,而Bing的地图则面临Key,国内数据清晰度等

文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些服务,能够支持天地图,Google Maps等自定义影像服务. 扩展影像服务 天地图影像服务 以国内数据的范畴来看,个人认为最佳,一来是数据内容和完整性,二来是不用许可无偏移,三来浏览速度还是很不错,国内其他影像服务能够满足这三点的并不多. 天地图影像服务都是全球范围,分为墨卡托投影和经纬度两种坐标

创建 跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用. 在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中设置其为false,代码如下: 但这种方式只能在初始化时设置,无法动态的切换显示状态,灵活度上稍显不足.如果你有这方面的需要,可以使用如下这种方式,同时Widget是自适应,也会动态调整布局. 基于Viewer来创建这两个控件并不复杂,但某些时候(尽管我想不出这样的场景),用户希望在自己的div上创

所有范例均在github中搜索:ExamplesforCesium BaseLayerPicker控件非常简单,似乎没什么可说的,确实非常的简单,但作为一个底图选择控件,可以说是最基本的一个控件. Cesium的控件采用了knockout的MVVM框架,不要看我,我也不懂,总之会用就可以.Cesium提供的BasePicker好归好,但里面的很多Provider并不太实用,而一些符合中国国情的Provider有没有提供,所以本节主要介绍如何自定义BasePicker,提供给Viewer使用. 首

假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州,了解这个州的基本信息.场景如下图所示: 这个点击行为,对应的是选择控件(SelectionIndicator),而呈现信息的载体,就是信息框控件(InfoBox). 如上是一个简单的逻辑关系,可见Viewer.SelectEntity属性起到了承上启下的作用.首先,Viewer模块负责UI的事件交互

原计划开始着手地形系列,但发现如果想要从逻辑上彻底了解地形相关的细节,那还是需要了解Cesium的数据调度过程,这样才能更好的理解,因此,打算先整体介绍一下Cesium的渲染过程,然后在过渡到其中的两个主要模块:地形数据和影像数据. 简述 设想一下,印度洋的暖流,穿过喜马拉雅山,形成了滴一滴水,落在了青藏高原的唐古拉山,顺势而下,涌入太平洋,长江之水自此经久不息.而Cesium的一切的一切,也是从一个并不起眼的函数开始的: 通过requestAnimationFrame函数,每一帧的结束,就是下

       这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维护地形切片的相关逻辑:接着,在requestTileGeometry中,TileTerrain会请求对应该切片的地形数据.如果读者对这部分有疑问的话,可以阅读<Cesium原理篇:1最长的一帧之渲染调度>:最后,如果你是采用的高度图的地形服务,地形数据对应的是HeightmapTerrainDat

       地形部分的原理介绍的差不多了,但之前还有一个刻意忽略的地方,就是地形的重采样.通俗的讲,如果当前Tile没有地形数据的话,则会从他父类的地形数据中取它所对应的四分之一的地形数据.打个比方,当我们快速缩放影像的时候,下一级的影像还没来得及更新,所以会暂时把当前Level的影像数据放大显示, 一旦对应的影像数据下载到当前客户端后再更新成精细的数据.Cesium中对地形也采用了这样的思路.下面我们具体介绍其中的详细内容.        上图是一个大概流程,在创建Tile的时候(prepa

刚刚结束完地球切片的渲染调度后,打算介绍一下目前大家都很关注的3D Tiles方面的内容,但发现要讲3D Tiles,或者充分理解它,需要对DataSource,Primitive要有基础,而这要求对最底层的渲染模块,也就是Render有一个了解,真的是书到用时方恨少的代入感,索性从头到尾的说清楚.所以,下面几篇(估算四篇)先把Render模块介绍清楚. Render,顾名思义就是渲染模块,在Cesium中,所有的对象,都是通过Render模块完成最终调用WebGL的渲染过程.换句话说,Rend

Texture也是WebGL中重要的概念,使用起来也很简单.但有句话叫大道至简,如果真的想要用好纹理,里面的水其实也是很深的.下面我们来一探究竟. 下面是WebGL中创建一个纹理的最简过程: var canvas = document.getElementById("canvas"); var gl = canvas.getContext("webgl"); // 创建纹理句柄 var texture = gl.createTexture(); // 填充纹理内容

在介绍Renderer的第一篇,我就提到WebGL1.0对应的是OpenGL ES2.0,也就是可编程渲染管线.之所以单独强调这一点,算是为本篇埋下一个伏笔.通过前两篇,我们介绍了VBO和Texture两个比较核心的WebGL概念.假设生产一辆汽车,VBO就相当于这个车的骨架,纹理相当这个车漆,但有了骨架和车漆还不够,还需要一台机器人来加工,最终才能成产出这辆汽车.而Shader模块就是负责这个生产的过程,加工参数(VBO,Texture),执行渲染任务. 这里假设大家对Shader有一个基本的