暮紫月升-CSDN博客

原创 Cesium开发实战开篇—vite+cesium框架搭建

Vite命令创建的工程会自动生成vite.config.js文件，来配置一些相关的参数，Vite和Vue cli的主要差别就是打包方面，通过Vite创建的前端工程采用的是rollup打包，而通过Vue Cli创建的前端工程采用的是Webpack打包，显而易见Vite占有很大优势。在Cesium开发基础篇幅中，我们聊过利用Vue cli搭建Vue2.x+Vesium的框架，但这种方式需要在vue.config.js文件中需要配置Cesium在Webpack中的相对路径和别名，用起来不是特别的方便。

2022-10-02 15:27:14 2800 1

原创 Cesium开发基础所有篇幅都在这儿了

1入门篇01 Cesium介绍02 Cesium源码下载及目录结构介绍03 Cesium开发环境搭建及开发第一个运行示例04 Cesium初始化界面介绍及相关小组件显隐05 Cesium API讲解06 坐标系及坐标变换07 回顾总结2基础篇01 加载影像数据02 加载地形数据03 加载矢量数据04 空间数据可视化之Entity05 glTF介绍及加载06 3D Tiles介绍及加载07 回顾总结3工具篇01 组件重写02 事件应用03 相机控制04 测量工具与调试面

2022-04-05 08:07:57 2413

原创 Cesium开发高级篇 | 06回顾总结

Cesium开发基础所有篇幅到目前为止已经全部学完了，非常感谢大家的支持，也希望能帮助大家提升对Cesium的认识，同时最近也在筹划Cesium开发实战课程，希望早日与大家见面，也再次感谢大家。回顾最近我们学习的高级篇5个章节，分别对Primitive、材质设置、Entity的Property、粒子系统、场景后期处理进行基础了学习。第一讲：主要介绍了Primitive的基础知识，Geometory支持的几何类型、组合、实例化、更新几何属性等，外观材质，以及几何与外观的兼容性问题。详情可戳Cesium开发高

2022-04-03 22:10:01 1025

原创 Cesium开发高级篇 | 05场景后期处理

为实现三维模型的更炫、更酷、更美观，Cesium在1.46的版本中新增了场景的后期处理（Post Processing）功能，包括模型描边、黑白图、明亮度调整、夜市效果、环境光遮蔽，也包括雷达扫描、原型扩散等一些特效。今天我们来学习一下场景后期处理的基础知识和实现流程。场景后期处理流程场景的后期处理这个词比较陌生，但说起照片的PS大家都很熟悉，这两个过程非常类似。日常生活中我们拍摄完照片之后，发现太亮或太暗，又或者是皮肤不够白、脸上痘痘明显，我们可以调整亮度、修复一下嫩白的脸蛋，经过几波操作之后，得到了

2022-04-01 23:55:56 2631

原创 Cesium开发高级篇 | 04粒子系统

在三维GIS系统中，我们经常会看到一些常见的特效，比如雨雪雾天气、烟火、爆炸、喷泉等，这些都可以通过粒子系统实现，今天我就来带领大家学习一下Cesium中的粒子系统。1.什么是粒子系统粒子系统是一种图形技术，可以模拟复杂的物理效果。粒子系统是小图像的集合，即由一堆很小的图片组成，当把它们聚集到一起观看时，就会形成一个复杂的“模糊不清”的物体，如火、烟、天气或烟花等。这些复杂的效果其实是通过控制每一个粒子对象的初始位置、速度、生命周期等行为来完成的，可以说粒子系统控制着每个粒子对象随着时间的显示和变化。

2022-03-27 19:51:29 3957

原创 Cesium开发高级篇 | 03Property机制

Cesium中有关Property的类非常之多，算下来总共有29个，通过Property’关键词搜索结果如下图所示。对于Cesium小白或者对Cesium不太熟悉的人来说，光看搜索结果就已经很懵了，更何况是把他们熟练的用起来。虽然关于Property类有很多，但仔细看还是有其分类的。首先Property作为基类或抽象类，定义了所有属性的接口规范，不能直接被实例化。其属性和方法如下图所示：Property最大的特点就是和时间相互关联，它能够在不同的时间可以动态地返回不同的属性值，如空间位置。比

2022-01-29 22:20:56 3165

原创 Cesium开发高级篇 | 02材质设置

无论是通过Entity类，还是通过Primitive类添加的空间几何数据，Cesium都提供了对应的方法或材质相关类对材质进行修改。在讲解材质设置之前，首先我们先简单地介绍下什么是材质。比较粗浅的理解是，材质可以是几何对象表面的任意一种着色（Cesium.Color）、可以是贴在其表面的一张图片、也可以是一个纹理或图案，比如下图中的条形或棋盘形的图案。针对于两种方式（Entity和Primitive）绘制的几何对象，Cesium也提供了Material类和MaterialProperty类，分别对通

2022-01-29 22:17:54 4700

原创 Cesium开发高级篇 | 01空间数据可视化之Primitive

在基础篇中我们讲过空间数据可视化之Entity实体类，今天我们介绍另外一个比较接近渲染引擎底层的类Primitive，虽然两者都可用于绘制同样的几何图形，但考虑到性能问题，我们更推荐您使用Primitive类实现。在使用Primitive API之前，您最好具备WebGL基础知识，如果对WebGL不是太了解，建议先学习《WebGL编程指南》这本书。Primitive介绍1. Primitive组成Primitive由两部分组成：几何形状（Geometry）和外观（Appearance）。几何形状定

2022-01-29 22:16:18 8748 3

原创 Cesium开发工具篇 | 07回顾总结

到目前为止，Cesium开发课程的篇幅已经学完四分之三了，大家如果有什么问题可以私信我或者扫描以下二维码进群沟通，若群二维码失效，可扫描最下方的公众号二维码，加我为好友并备注加群。有时会比较忙来不及回复大家，请大家见谅，忙完之后我会尽量回复大家的，请大家多留言多沟通，共同学好Cesium，快速实现上层应用的功能开发。回顾最近学习的工具篇，我们分成了六个章节，分别学习了Cesium的组件（微件）重写、事件应用、相机控制、量测工具与调试面板、与第三方库的集成，以及源码编译打包相关知识和实战。第.

2022-01-29 22:11:26 2758

原创 Cesium开发工具篇 | 06Cesium源码编译打包

在介绍Cesium源码编译打包之前，先简单的介绍下目前前端工程中一些常用的打包工具，方便后面内容的理解。前端常用的打包库（1）gulp打包gulp是用代码方式来写打包脚本，并且代码采用流式的写法，简单说，gulp是基于 nodejs 的 steam 流打包。它只抽象出了gulp.src，gulp.pipe，gulp.dest，gulp.watch 接口，运用相当简单，更易于学习和使用。Cesium就是利用gulp进行打包的。（2）webpack打包webpack是模块化管理工具和打包工具。通

2022-01-29 22:03:11 8176

原创 Cesium开发工具篇 | 05与第三方库的集成

集成Three.jsThree.js是基于原生WebGL封装运行的三维引擎库，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。Three.js可应用于Web 3D的可视化（如产品在线浏览、在线三维可视化等），H5/微信小程序游戏（如跳一跳），科教领域，机械领域，WebVR（VR看房、VR看车等）以及家装室内设计等方面，是一个比较轻量级的跨浏览器JavaScript库，适合在浏览器中创建和显示动画3D计算机图形。将Cesium的行星级渲染和GIS功能与Three.js广泛

2022-01-29 22:01:27 6417

原创 Cesium开发工具篇 | 04量测工具与调试面板

本节我们讲一下Cesium中常用的测量工具和针对开发人员使用的调试工具。量测工具量测工具可以说，不管是二维GIS还是三维GIS中都必须具备的功能，只不过是在空间上是否有贴地、是否有高度上的距离差别之分。Cesium是三维GIS引擎，所以距离量测支持直线距离、水平距离、垂直距离以及地表距离，面积量测支持水平面积、地表面积以及模型表面积等。不管是哪种类型的距离测量还是面积测量，实现思路基本是一样的，都是按照如下思路实现的。1）点击按钮开始测量，侦听鼠标LEFT_CLICK事件，记录坐标，绘制节点和折线

2022-01-29 22:00:03 7535

原创 Cesium开发工具篇 | 03相机控制

相机控制主要是用于相机的飞行定位，例如系统初始化位置定位、视点切换、设备定位、报警事件定位等，这些都是通过对相机进行操作实现的。Cesium虽然提供了很多种方法用于实现相机的飞行定位，但这些方法都是基于Viewer、Camera这两个类实现的。Viewer类在Viewer类里面有两个方法用于实现相机的飞行定位，分别是flyTo、zoomTo方法。这两个方法第一个参数都是 target ，类型可以是Entity、DataSource、ImageryLayer、Cesium3DTileset等；flyTo方法的

2022-01-29 21:56:50 6645

原创 Cesium开发工具篇 | 02事件应用

无论是前端系统，还是二维/三维GIS应用系统，都离不开各种事件的应用，尤其是鼠标的单击、双击事件。 Cesium 根据事件的类型、用途，将事件应用分成了三大类。一种是以鼠标操作（左键、中键、右键操作等）为主的 ScreenSpaceEventHandler 类，另一种是通用的事件类 Event ，该类通常在容器类内部实例化，并作为某个属性的类型直接被调用，比如 viewer.clock.onTick、viewer.selectedEntityChanged、camera.moveStart、camera.m

2022-01-29 21:54:09 1768

原创 Cesium开发工具篇 | 01组件重写

在刚开始的入门篇中，我们讲过 Cesium 小组件的显隐，感兴趣的小伙伴可以查看我前面写过的文章 Cesium初始化界面介绍及相关小组件显隐。那问题来了，这些组件除了能控制显隐，是否能在不修改源码的基础上对其进行扩展重写呢？答案是当然可以！但并不是所有的组件都能重写，本节主要讲解在不修改源码的基础上，如何对以下三个常用的控件进行修改，以达到快速实现实际中业务需求的功能。当然，如果您对 Cesium 源码研究得比较深入，也可以通过修改源码的方式实现。homeButton组件homeButton 功能在实际的

2022-01-29 21:51:59 7136

原创 Cesium开发基础篇 | 07回顾总结

在基础篇中，我们主要介绍了 Cesium 是如何加载各种数据的，从基础的影像数据、地形图数据，到矢量数据、空间可视化实体数据，以及三维方面的模型数据和瓦片数据，并简单介绍了各种类型数据的基本概念和特点。可以说，到目前为止，一个三维系统所需要展示的各种数据基本上已经完成了，剩下的就是如何对数据进行操作了，比如符号渲染、单击获取属性、控制显隐以及其他与实际业务的结合等功能。通过入门篇、基础篇的讲解和实践，利用Cesium开发一个基础的三维系统（这里不包括页面）是完全没问题的了，但如果再按照后面工具篇、高级篇中的

2022-01-27 22:14:49 628

原创 Cesium开发基础篇 | 063D Tiles介绍及加载

上一节我们介绍了glTF的主要数据结构以及Cesium是如何对其进行加载的，这一节我们来介绍一下glTF的升级版3D Tiles ，也是目前 Cesium 在加载海量三维模型数据方面必须采用的一种数据格式。3D Tiles介绍3D Tiles 是在glTF的基础上，加入了分层LOD的概念（可以把3D Tiles简单地理解为带有 LOD 的 glTF ），专门为流式传输和渲染海量 3D 地理空间数据而设计的，例如倾斜摄影、3D 建筑、BIM/CAD、实例化要素集和点云。它定义了一种数据分层结构和一组切片格

2022-01-27 22:11:29 5972 7

原创 Cesium开发基础篇 | 05glTF介绍及加载

到目前为止，我们已经介绍了如何利用Cesium显示影像数据、地形高程数据、矢量数据，以及空间可视化方面的几何数据（Entity），感兴趣的同学可以阅读我前面写的文章。在三维数据方面，Cesium支持模型文件glTF，以及三维瓦片数据3D Tiles。本次我们先从glTF说起，3D Tiles的讲解留给下一章节。glTF介绍glTF全称是 Graphics Language Transmission Format （图形语言传输格式），是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行

2022-01-27 22:09:10 4186 4

原创 Cesium开发基础篇 | 04空间数据可视化之Entity

前面介绍了Cesium如何加载影像数据、地形数据、以及矢量数据，但是作为一个完整的三维系统，仅仅包括这些数据还是远远不够的。当然，还需要一些其他数据，比如空间可视化数据、三维数据数据等，今天我们先从空间数据的可视化说起，后面会有专门的章节介绍三维数据方面的加载。Cesium在空间数据可视化方面提供了两种类型的API，一种是面向图形开发人员的低级（原始）API，通过Primitive类实现，对于那些对计算机图形学知识很了解的同学可以采用Primitive API，后面章节会有详细介绍；另一种是用于数据驱动的

2022-01-27 22:00:23 3984

原创 Cesium开发基础篇 | 03加载矢量数据

基础篇的前两节我们学习了在三维球中通过Cesium如何加载影像数据和地形数据，今天我们学习一下Cesium是如何加载矢量数据的。在学习之前，首先我们先了解一下什么是矢量数据。矢量数据（Vector Data）是用X、Y、Z坐标表示地图图形或地理实体位置的数据，一般是通过记录坐标的方式来尽可能将地理实体的空间位置表现的准确无误，常见的矢量数据有：点、线、面等格式。我们使用矢量数据的原因，就是因为矢量数据具有数据结构紧凑、冗余度低、有利于网络和检索分析、图形显示质量好、精度高等优点。目前最常见的矢量数据格式

2022-01-27 21:53:53 3356

原创 Cesium开发基础篇 | 02加载地形数据

Cesium中的地形图层类前面我们主要学习了cesium内置接口如何操作影像数据，但是在一些应用场景中我们需要操作地形数据，例如模拟逼真的三维场景、与高程相关的一些空间分析和计算等。Cesium提供了TerrainProvider基类，该Provider负责每一个Tile对应的地形数据的构建，定义了一套地形Provider需要实现的接口和规范，但本身并不会参与其中的操作。基于此类，cesium为我们封装了5个现成的继承类操作地形数据：terrainProvider不像上一讲介绍的影像图层

2022-01-27 21:50:53 2787

原创 Cesium开发基础篇 | 01加载影像数据

Cesium中的影像图层类无论是二维地图还是三维地图，如果缺少了底图影像或电子地图，都是不完整的。Cesium为我们提供了ImageryLayerCollection、ImageryLayer以及相关的ImageryProvider类来加载不同的影像图层。虽然Cesium把此类图层叫做Imagery*，但并不是特指卫星影像数据，还包括一些互联网地图、TMS、WMS、WMTS、单个图片等。ImageryLayer类Cesium.ImageryLayer类用于表示Cesium中的影像图层，它就相当于皮毛、

2022-01-26 23:34:03 3199

原创 Cesium开发入门篇 | 07回顾总结

Cesium开发入门篇到此就结束了，通过入门篇的讲解我们对Cesium有了一个大体的认识，可以通过引用Cesium做一些初始化的场景了，并且对Cesium API的结构及常用坐标也有个一个初步的了解。下面我们简单的回顾总结一下：第一讲：我们对Cesium进行了一些简单的介绍，Cesium是什么、支持哪些数据格式、具有哪些功能特性、在项目中的定位、涉及到的知识体系、以及Cesium学习路线和开发进阶之路。详情可戳Cesium开发入门篇 | 01Cesium介绍第二讲：我们学习了如何从零开始搭建Cesium开发

2022-01-26 23:21:59 797

原创 Cesium开发入门篇 | 06坐标系及坐标变换

01Cesium中常用的坐标1.屏幕坐标（像素）即二维笛卡尔平面坐标，我们通过鼠标点击直接获取的坐标就是屏幕坐标了，单位是像素值，也可以通过new Cesium.Cartesian2(x, y)创建。笛卡尔空间直角坐标笛卡尔空间直角坐标又称为世界坐标，Cesium中用Cartesian3变量表示，可通过new Cesium.Cartesian3(x, y, z)创建，主要是用来做空间位置的变化如平移、旋转和缩放等等，它的坐标原点在椭球的中心，如下图所示：2.地理坐标（弧度）Cesium中的地理坐标单位默认是

2022-01-26 23:16:49 2407

原创 Cesium开发入门篇 | 05Cesium API结构介绍

在实际的开发过程中，基本上会用到上图所示的Cesium API中各个类，我们可以把它按照以下分类进行记忆。Viewer类属性imageryLayers 影像数据terrainProvider 地形数据dataSources 矢量数据entities 几何实体集合（用于空间数据可视化）Widgets 组件，即Viewer初始化界面上的组件Camera 相机Event 事件，鼠标事件、实体选中事件等Scene类属性primitives 图元集合（几何体和外观）postProcessStages 场景后期处理环境

2022-01-26 23:10:36 1973 1

原创 Cesium开发入门篇 | 04Viewer界面介绍及组件显隐

01Viewer界面介绍任何Cesium应用程序的基础都是Viewer，Viewer是一个带有多种功能的可交互的三位数字地球的容器。在Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例中我们已经通过以下代码初始化了一个视图窗口，看到了一个基本的数字地球。var viewer = new Cesium.Viewer("cesiumContainer");默认地，场景支持鼠标（电脑端）和手指触摸（移动端）交互，并且支持以下相机漫游方式：按住鼠标左键拖拽 - 让相机在数字地球平面平移按住鼠标右键

2022-01-26 23:04:16 1566

原创 Cesium开发入门篇 | 03Cesium目录结构介绍

上一讲我们已经下载了1.75版本的Ceisum并进行了解压，解压内容如下图所示，这一讲我们详细介绍每个目录文件具体表示什么意思，下面就对主要文件（夹）进行说明。01 跟路径文件CHANGES.md：Cesium每个版本的变更记录以及每个版本修复了哪些功能。gulpfile.cjs：记录了cesium的所有打包流程，包括GLSL语法的转义、压缩和未压缩库文件的打包、API文档的生成以及自动化单元测试等。index.html：这个就不用多说了，Web导航首页。package.json：.

2022-01-26 22:56:53 1496

原创 Cesium开发入门篇 | 02Cesium开发环境搭建及第一个示例

01开发环境准备利用Cesium API进行二次开发属于Web前端开发范畴，目前比较火的Web三剑客包括React、Vue、AngularJS，每个js库的详细介绍可转至官网查看，在此不做详细介绍。本次开发环境是基于Vue搭建的，需要安装（部署）的软件主要包括以下几种：分类名称IDEVS Code浏览器ChromeWeb服务器nginx包管理器node前两个下载后安装即可，注意VS Code需要安装Live Server扩展；nginx下载后的压缩包解压到电脑磁盘路径下（比如E盘跟路径下），配置好conf文

2022-01-26 22:51:40 6124 9

原创 Cesium开发入门篇 | 01Cesium介绍

01Cesium是什么我们打开Cesium(https://cesium.com)官网，能够很清晰的看到官方赋予Cesium的使命，即构建世界一流的3D地理空间应用程序。那Cesium到底是个什么东东呢？Cesium是一个跨平台、跨浏览器的展示三维地球和地图的javascript库Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGLCesium是基于Apache2.0许可的开源程序，它可以免费的用于商业和非商业用途02Cesium支持的数据格式影像数据：Bin

2022-01-24 22:50:43 8714 3

空空如也

空空如也