WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
Cesium分屏对比功能实现,完整版代码案例
同样的,如果想左右互相控制,可以把rightViewer的相机参数也设置到leftViewer的相机上即可。首先我们创建2个viewer,分别叫leftViewer和rightViewer。使用cesium开发的小伙伴们,分屏对比功能是视图功能中比较常见的一个需求。首先我们要准备一左一右2个div容器,用来挂在两个cesium实例。因此我们需要对相机camera的改变事件做一个监听。其实分屏对比的关键就在于左右两个视图如何联动起来。那么我们需要借助相机之间的参数传递来实现这个过程。原创 2024-04-24 18:08:06 · 185 阅读 · 0 评论 -
Cesium 中那些改变视角的方法,带你彻底了解 cesium 相机
offset 参数是指相机的偏移量。我们来看 camera 的 flyTo 方法如何使用,它一共有12 个参数其中有几个参数的意思和上面讲过的是一样的,比如duration参数和orientation参数,还有maximumHeight参数,orientation只不过是把 heading,pitch以及没跟大家说过的 roll 参数进行了封装。要注意,尽管 viewer 可以调用 camera ,并且 viewer 在执行飞行的过程中也是调用了相机,但是viewer 所调用的相机是经过进一步的封装的。原创 2023-07-14 15:10:11 · 2271 阅读 · 0 评论 -
Cesium 加载发光材质的行政区边界
那么如果我们在加载 geojson 行政区的时候,是不是 也可以利用这发光的线条来展示,但是在 cesium 中加载 geojson 使用的是GeoJsonDataSource这种方式,这种方式有个缺点,就是你的数据必须是线要素或者是把行政区的面要素转换成线要素在设置材质。具体的转化过程你可以依赖 turf.js将面转换成线要素,但是我不推荐这种方式原因有两个,第一转换起来比较麻烦,还得依赖第三方库,第二,不利于后续的交互操作,如果你将面转换成了线,那么后续点击面进行高亮的操作你又该如何应对?原创 2023-07-14 11:34:17 · 1806 阅读 · 0 评论 -
Vite+Vue3+Cesium工程搭建及初始化
cesium 中的一些资源文件是本地静态的,比如地球背后的宇宙贴图以及界面小组件的图标。这些文件必须放在项目中的静态文件夹之下,这些文件存在与 cesium 依赖包中的Build文件夹底下的Cesium文件夹之下,我们必须把整个 cesium 文件夹搬迁至项目中的 public 文件夹之下。现如今的前端更新太快了,我记得我一年前还在写 vue2+cesium 的工程构建方式。注意我们 public 文件夹是不需要写文件路径的,系统会自动帮我们锁定为根目录,也就是说直接写 Cesium/就好。原创 2023-07-05 15:37:01 · 864 阅读 · 0 评论 -
Cesium三维数据格式以及生产流程详解(glb,osgb,obj,bim,ifc)等
统一是指不管你什么格式,你都必须符合我的标准,我的标准是考虑到浏览器的垃圾性能而制定的。手工模型最常见的是gltf格式的模型。这种数据是一种二进制文件,osgb数据由两部分组成,第一部分是结构信息,内部存储了文件的lod(层级信息),以及三维顶点数据结构,第二部分是纹理信息,包含结构内部的纹理。这一点有点像文件压缩的zip和rar格式的文件,对你的文件进行了压缩,但是却饱含你文件的全部信息。其实就是大家所熟知的shape,geojson之类的传统的矢量数据,进行三维的拉伸,给他一个高度,生成一个立体。原创 2023-03-04 15:22:39 · 3454 阅读 · 0 评论 -
Cesium的设计结构与零基础入门
我们依靠的是“视角转移”的方式去画的,如果你从正面去看一个正方体,那他就是一个正方形,但如果从侧上方去看,你就能看出他的立体效果,所以人们把眼睛里所看到的关键的线条和面在纸上画出来之后,就形成了我们所看到的正方体。:相机对象,相机对象非常的重要,也是我们下一节要拆开来讲的核心内容,相机模拟了我们的人眼的视角,可以在cesium场景中自由移动,完成飞行,旋转飞行,等复杂的空间操作,有时候你甚至可以把它理解成。既然是框架,我们肯定是从如何使用学起,等熟练使用之后,我们在来研究其源码与构建方式。原创 2023-02-02 10:29:01 · 626 阅读 · 0 评论 -
什么是BIM,什么是CIM?
建筑信息模型分为两个层面的理解:第一是建筑模型,他首先最基础最重要的功能还是展示,就像你买房子之前会去售楼部的沙盘上看一样,缩小的模型能够从宏观展示建筑的展现效果。注意BIM只是一种数据的称呼,他并不是一种具体的数据格式,通常BIM数据的格式后缀名为.rvt,这源于BIM一般都来自于auto desk revit软件,同学们也不要把它和gltf搞混,gltf是一种手工模型的数据格式,他会有.gltf的扩展名,并且gltf一般只用于展示一些小型的手工的模型,并不能携带属性信息,比如说汽车 啊飞机啊之类的。原创 2022-09-16 11:08:35 · 5577 阅读 · 0 评论 -
GIS系列(九)Cesium中的事件总结
cesium中的事件非常非常多,暂且抛开监听变化触发的事件,光相机事件和屏幕事件就非常多。这篇文章带大家捋一捋cesium中的事件都有哪些。1.相机事件2.屏幕事件3.键盘事件4.一些变化所触发的监听事件camera.changed:当相机发生变化时camera.movEnd:当相机停止移动时触发camera.moveStart:当相机开始移动scene.postRender:当场景渲染完成后触发scene.preRender:场景渲染之前scene.原创 2021-05-11 14:37:12 · 2127 阅读 · 0 评论 -
GIS系列(十三)什么是b3dm?详解b3dm
上篇文章我们知道了什么叫gltf,不知道的可以去看一看这篇文章来了解一下什么是b原创 2021-06-17 12:24:11 · 10126 阅读 · 2 评论 -
GIS系列(五)开源三维框架Cesium的介绍和使用
开源的二维地图前端框架有很多,但是三维框架基本上就只有cesium了。这话说的可能有点绝对,但事实就是这样,目前为止互联网开源地图三维 框架屈指可数,cesium独当一面。那么,本文我们来谈谈cesium和它的使用。cesium的底层基于webGL,啥叫webGL?网络图形语言,就是指互联网如何绘制传输操作图形的语言。我们知道C/S端有开放图形语言open GL,web GL可以看作是它的网络版本webGL所能操作的图形和场景是三维的,什么意思,就是除了能绘制矩形以外,还能绘制长方体。因此c原创 2021-05-07 17:40:50 · 9276 阅读 · 0 评论 -
GIS系列(六)Vue-cli工程与Cesium的整合
首先你的计算机得有node环境,这是一个js的runtime(运行时环境),node官网下载地址,安装教程见其他博主。接下来去vue-cli官网查看安装搭建vue-cli的教程。大致为以下几步:1.在你喜欢的盘内新建一个文件夹,比方说叫cesiumtest。按下win+R打开cmd,进入你想要建立项目的磁盘(命令是E:)然后进入你刚才建立的文件夹(cd cesiumtest)。2.接着写下面的命令,不想写直接复制官网的也行:npm install -g @vue/cli按回车等待...原创 2021-05-10 12:20:29 · 886 阅读 · 0 评论 -
Cesium3d tiles模型单体化思路
首先,当我们把倾斜摄影模型或者建筑模型等osgb、kml等格式的数据转化成b3dm格式之后我们才可以考虑在cesium中做单体化。我们来剖析一下官网提供的思路:原创 2021-06-18 10:08:37 · 3919 阅读 · 0 评论 -
GIS系列(十一)什么是gltf?详解gltf
老样子,读一下官方的英文介绍:glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF minimizes both the size of 3D assets, and the runtime processing needed to unpack and u原创 2021-06-16 16:02:20 · 3582 阅读 · 0 评论 -
GIS系列(十)对于3d tiles最详细的解读
关于 3d tiles github上面有一篇英文介绍,看过之后觉得讲的非常详细非常好。在这里一边翻译,一边给大家讲解分享:3D Tiles is an open specification for sharing, visualizing, fusing, and interacting with massive heterogenous 3D geospatial content across desktop, web, and mobile applications.......原创 2021-06-16 15:22:24 · 7499 阅读 · 4 评论