Cesium

A collection of 15 posts
利用 3D 地理空间数据实现Cesium的沉浸式环境
Cesium

利用 3D 地理空间数据实现Cesium的沉浸式环境

地理空间数据为工业元宇宙中的应用提供丰富的真实世界环境和上下文信息、空间关系和实时监控功能。 近年来,3D 地理空间数据呈爆炸式增长。快速增长是由技术进步推动的,例如高分辨率航空和卫星图像,自动驾驶汽车和机器上的激光雷达扫描仪,3D重建算法和AI的改进,以及扫描技术在手持设备和智能手机中的普及,使日常人们能够捕捉他们的环境。
7 min read
Cesium应用篇:SelectionIndicator& InfoBox
Cesium

Cesium应用篇:SelectionIndicator& InfoBox

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州,了解这个州的基本信息。场景如下图所示: 这个点击行为,对应的是选择控件(SelectionIndicator),而呈现信息的载体,就是信息框控件(InfoBox)。 如上是一个简单的逻辑关系,可见Viewer.SelectEntity属性起到了承上启下的作用。首先,Viewer模块负责UI的事件交互,比如鼠标点击或者双击,则会触发对应事件,判断当前的鼠标事件是否选中了Entity,如果选中,则更新Viewer.SelectEntity属性。 如上,可以看到在Cesium源码中,目前绑定了两个事件,一个是鼠标左键单击,选中该Entity,一个是鼠标左键双击,则会追踪到该位置。当然,如果你想要增加或者修改某个事件,则可以修改screenSpaceEventHandler的内容。可以参考 screenSpaceEventHandler
6 min read
Cesium应用篇:aseLayerPicker控件
Cesium

Cesium应用篇:aseLayerPicker控件

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 所有范例均在github中搜索:ExamplesforCesium BaseLayerPicker控件非常简单,似乎没什么可说的,确实非常的简单,但作为一个底图选择控件,可以说是最基本的一个控件。 Cesium的控件采用了knockout的MVVM框架,不要看我,我也不懂,总之会用就可以。Cesium提供的BasePicker好归好,但里面的很多Provider并不太实用,而一些符合中国国情的Provider有没有提供,所以本节主要介绍如何自定义BasePicker,提供给Viewer使用。 首先简单介绍一下涉及到的类关系: 如上就是BaseLayerPicker的主要逻辑关系,对于开发者而言,只需要提供不同的ProviderViewModel,比如BingMap的,OSM的,ArcGIS的,GoogleMaps的,这样在BaseLayerPicker的UI中,就会有多个Provider供用户选择,而交互则有BaseLayerPickerViewModel类负责,用户并不需要关心内部的实现。 有了一个全面的认识,我们就看
2 min read
Cesium应用篇:Clock控件
Cesium

Cesium应用篇:Clock控件

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 创建 跟Clock相关的主要有Animation控件和Timeline控件,通常两者会放在一起使用。 在Cesium中,Viewer默认开启这两个控件,如果你想要不显示控件,可以在Viewer初始化中设置其为false,代码如下: 但这种方式只能在初始化时设置,无法动态的切换显示状态,灵活度上稍显不足。如果你有这方面的需要,可以使用如下这种方式,同时Widget是自适应,也会动态调整布局。 基于Viewer来创建这两个控件并不复杂,但某些时候(尽管我想不出这样的场景),用户希望在自己的div上创建控件,也就是脱离和Viewer的关联,虽然非常麻烦,但Cesium还是支持了这种方式。 首先,需要加载对应的css文件, 并创建存放Animation的DIV 目前需要指定对应的id和class,并指定z-index属性,否则会被球体压盖。当然,也可以自己实现css,不过比较繁琐,而且你只能修改风格,Animation的形状是内部用SVG绘制的,并绑定了对应的事件,要想DIY,工作量更大。 然后,创建对应的clock和An
5 min read
Cesium

Cesium应用篇:影像服务(下)

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d 上篇主要介绍了Cesium自带的影像Provider ,在本篇中,我们主要涉及到如何扩展这些服务,能够支持天地图,Google Maps等自定义影像服务。 扩展影像服务 天地图影像服务 以国内数据的范畴来看,个人认为最佳,一来是数据内容和完整性,二来是不用许可无偏移,三来浏览速度还是很不错,国内其他影像服务能够满足这三点的并不多。 天地图影像服务都是全球范围,分为墨卡托投影和经纬度两种坐标系,后者标识的是CGCS2000坐标系,对我这样的非专业人士,我等同于WGS84。另外,天地图提供了中英文的注记,也是很不错的。 首先我们看一下墨卡托投影的全球影像图,遵循WMTS规范,服务URL如下: http://t0.tianditu.com/img_w/wmts 首先,通过天地图的GetCapabilities信息,获取其相关的参数,重要信息如下: 通过红框处,我们可以知道,该WMTS服务的url,
7 min read
Cesium应用篇:影像服务(上)
Cesium

Cesium应用篇:影像服务(上)

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 文章中相关范例下载路径:https://yunpan.cn/cByQqkANWN7Pu 访问密码 823d Cesium中提供了多种ImageryProvider方式,来满足用户的实际需求,但作为天朝的一份子,可惜的是,看似很多,但最终的选择却又是捉襟见肘。如果是国内数据,个人认为天地图的不错,其他的地图都有偏移,但天地图的数据在国外有欠缺,假如你有一个模型数据或者地形数据,恰好是国外的某一个城市,比如马赛等,天地图就满足不了这种场景,而Bing的地图则面临Key,国内数据清晰度等问题,而Google的数据则有很多不确定性,所以,除非很难有一种影像服务来实现一种大而全的效果。这不是技术问题,在此提出,就看实际中智者见智了。 影像服务综述 我们回到Cesium的影像服务上,如下是Cesium中BaseLayerPicker控件提供的各类影像服务: 如上可以看到,主要是Bing、Mapbox以及OpenStreetMap,以及ESRI四家地图服务,包括影像,影像+注记以及矢量三种形式。个人而言,Bing的地图不错,算是大而全,
6 min read
Cesium

Cesium 地形生成器

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 * 环境配置: * 源码下载 下载地址:https://github.com/ahuarte47/cesium-terrain-builder/tree/master-quantized-mesh * gdal: ./GDAL212 * zlib: ./ZLIB * 编译:cmake: 注意修改黄色部分为你自己的路径。 打开项目后,修改如下文件: GDALTiler.cpp (250 行左右): poSrcOvrDS = GDALCreateOverviewDataset( poSrcDS, iOvr, FALSE); 替换成 poSrcOvrDS = GDALCreateOverviewDataset( poSrcDS, iOvr, FALSE, FALSE); GlobalGeodetic.cpp (30 行左右): srs.importFromEPSG(4326); 替换成 srs.SetWellKnownGeogCS("WGS84"
3 min read
cesium导航
Cesium

cesium导航

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 今天看到 Google Earth 上的导航栏,想起百度地图,高德地图,leaflet(插件)等等好像都有提供导航条,但是cesium官方包里面是没有的,于是上网搜了一下,果然有个大神实现了,名字就叫Cesium-navigation,github地址:https://github.com/alberto-acevedo/cesium-navigation。 看起来好像很简单,下面我们来试试怎么用: 1. 下载js文件 可以在github上下载源码,自己编译,官方文档上有写 How to build it? run npm install run node build.js 这里我偷懒了,使用cnpm安装的,当然安装完也可以把它从node_modules中拷出来 cnpm install cesium-navigation –save 1.
2 min read
cesium热力图
Cesium

cesium热力图

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 cesium 热力图 很多朋友在问热力图怎么做,但是大部分一开口就是问怎么做这么抽象的问题(这种问题很不好回答,顶多别人只能回答一句用heatmap可以做,而这个问题随便谷歌,bing搜一下可以得到结果),而不是做的过程中遇到了什么具体的问题,这样不好; 其实,有时间还是实践一下比较好,尝试过,碰到了具体问题再提问,这样在提问时,有知道问题答案的朋友也就直接告诉你了。ok,开始 搜索引擎 搜索一下 “cesium 热力图”你可以很轻松拿到一些信息: 1. heatmap可以做 2. 一些地址: * cesium-heatmap地址 https://www.npmjs.com/package/cesium-heatmap * 源码地址 https://github.com/danwild/CesiumHeatmap * 官网地址 https://www.patrick-wied.at/static/
3 min read
cesium全球视频纹理
Cesium

cesium全球视频纹理

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 问题的起因是和一个群友一起讨论,怎么让地球的背景贴上视频,而且地球展开成平面之后,可以拖动实体位置 由于之前几次示例都用了本地的图片(设置 Cesium.Viewer 的imageryProvider 属性)来作背景,这次我很自然的想到了如果使用本地mp4 作为url的值是否可行,结果实践证明这样不行,查看了一下SingleTileImageryProvider的url属性的官方文档,感觉应该是不行 readonly url : String Scene/SingleTileImageryProvider.js 136 Gets the URL of the single, top-level imagery tile. 印象中,官方示例中只有一个关于视频纹理的示例,回头去查看 Video 这个示例,于是想着能不能建一个包裹地球的球体,然后把视频纹理贴上去,但是这样并不满足需求,如果是新建一个球体对象,会导致地球展开成平面之后,无法拖动实体位置 最后我们又结合Materials这个示例找到了解决方案的思路,创建一个Rec
2 min read
cesium:CZML路径动态改变
Cesium

cesium:CZML路径动态改变

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 这篇文章和上一篇cesium编程中级(六)全球视频纹理一样,也是跟群友一起讨论时想出的解决方案^^ 起因是群友希望完成一个功能,在加载czml数据之后,有物体沿着czml中的路径运动,然后运动过程中,会每个几秒钟在路径最后添加一个点,希望能看到路径动态改变而且物体的移动连贯 这里其实重要的点有两个 1. 路径后面每隔一段时间添加一个点 2. 物体连贯运动(这一点是在完成之后,回过头来反思直接写出来的) 群友自己写了一份代码,我们先来粗略看一下代码组成 var viewer = new Cesium.Viewer('cesiumContainer'); var czml = [{ "id": "document", "name": "polygon", "version": "1.0" }, { "id": "shape2", "name": "Red box with black out
3 min read
cesium贴地线
Cesium

cesium贴地线

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 关于贴地线 整理一下官网示例中提到的各种贴地线,有些并不是线,而是多边形,可是可以通过宽度调整,表现成”线” 作为对比,先来加一个普通线段 var yellowLine = viewer.entities.add({ name: 'Red line on the surface', polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ 112.82436, 23.071506, 112.82742, 23.067512, 112.828878, 23.064659, 112.830799, 23.060947, 112.832166, 24.058329 ]),
3 min read
cesium编程使用渐变纹理
Cesium

cesium编程使用渐变纹理

推荐:将 NSDT场景编辑器 加入你的3D开发工具链 官方示例 在渲染地形的时候,我们会使用渐变的纹理,区分不同的高度,官方给了一个示例,本地路径:Globe Materials 分析 这里代码给了一坨,整体浏览一下,理一理思路,简单来讲是这样的 加载数据–>根据参数生成一张渐变的图–>将图赋值到纹理上,OK,那关键的函数就是生成图的函数getColorRamp,添加物体和设置材质都是入门基础, 可以在网上搜索下教程。 看看fillRect的效果 可以看到fillRect(0,0,1,100)是纵向的,
2 min read
Cesium本地影像与地形服务发布
Cesium

Cesium本地影像与地形服务发布

在线工具推荐:三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 -  3D模型预览图生成服务 1 数据切片 目前遥感影像及数字高程模型切片主要包括 gdal 和 ctb 两种方式。最近在进行 Cesium 本地影像与地形服务发布时,发现一款软件 Cesiumlab。Cesiumlab 是一款专为 Cesium 开源数字地球平台打造的免费数据处理工具集。目前包含 地形数据处理、影像数据处理、点云数据处理、数据下载、建筑物矢量面处理、倾斜数据处理、三维场景 (max,maya) 处理、BIM 数据 (revit,ifc) 处理等工具。同时提供一套 java
5 min read
Cesium 生成terrain地形数据----CTB方式及步骤
Cesium

Cesium 生成terrain地形数据----CTB方式及步骤

推荐:将 NSDT场景编辑器 加入你的3D开发工具链。 背景:项目前端使用Cesium,地形服务一直使用外网的,常常因为FQ访问的问题,导致地形数据取不到,进而导致地球不能加载,故决定搭建自己的地形服务,彻底解决这个问题。博文包含以下几个过程: 下载原始地形数据,格式为.tif。 处理地形数据,将零散的地形文件整合成一个地形文件。 配置CTB环境 使用ctb-tile指令将地形文件(.tif)加工成.terrain文件。 发布地形服务并使用Cesium调用。 一、下载原始地形数据 下载地址(精度90m): http://srtm.csi.cgiar.org/SELECTION/inputCoord.asp 如果你刚好需要的也是全国地形,可以从楼主网盘下载,更快更方便(密码zyt9):https://pan.baidu.com/s/1YYC25b48QAVb64mW77vCEw 网盘包含两部分内容: dem.rar:原始数据,
4 min read
NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号