![](https://img-blog.csdnimg.cn/2417cc7637f24d0a908ac8c8607c4f95.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
cesium
文章平均质量分 76
cesium学习分享
孙霸天
孙霸天,GIS、Java开发工程师。专注后台GIS开发、熟悉WebGIS开发、GIS大数据开发。
展开
-
cesium-Web网页优化进阶
我们公司有个三维项目,前台使用cesium进行三维可视化,页面上我们加载了多个图层,主要的图层是使用geoserver进行发布的,包括影像图和注解图层。叠加多个图层后我们在移动地图时,会发现底图加载会有明显的卡顿,如下所示可以明显看到影像数据加载延迟可以理解cesium为什么会有这样的限制,考虑到客户机和服务器的压力,要保证兼容更多不同设备。不过现在的电脑越来好,CPU和GPU的性能都在变强,内存也越来越大,cesium官方是不是可以考虑将这几个参数暴露出来由我们自己决定。......原创 2022-07-30 18:20:43 · 3418 阅读 · 11 评论 -
数据处理-倾斜摄影OSGB合并根节点
web三维地图引擎我们使用的是cesium,因此我们使用的倾斜摄影数据(OSGB)会转换成3DTiles(.b3dm)进行加载。如果倾斜摄影的范围很大或者数据量大,有不少的建筑物什么的,默认转换的3Dtiles数据在前台加载会很慢帧数很低不流畅。目前解决的方法有以下几种:- 压缩材质(减少数据大小,或降低显存占用大小,模型可能会由精度丢失)- 顶点压缩(对数据进行顶点压缩,会丢失一定精度)- 合并根节点(将倾斜层级合并为更粗糙一层,减少前台加载的节点数据,提升访问速度).........原创 2022-07-27 16:47:41 · 7877 阅读 · 11 评论 -
cesium-Web页面优化总结
cesium-Web页面优化总结介绍在介绍如何优化之前,我们先要了解一下cesium需要优化的几种情况(目前我遇到的一些情况)直接加载cesium的时候就开始卡顿不流畅(还未加载大量数据)cesium在vue等单页面应用中使用的时候,刚开始加载还正常,但随着刷新、数据交互等操作后开始卡顿cesium在加载3dtiles(这里主要是说倾斜摄影模型)时,随着加载的数据多了后开始明显卡顿这三种是我目前遇到的问题,后面有其他的问题我再更新进来,欢迎大家一起探讨解决步骤问题一针对第一个问题,这个原创 2022-04-26 07:00:00 · 6672 阅读 · 1 评论 -
GIS数据处理-cesium中模型位置设置
GIS数据处理-cesium中模型位置设置介绍最近我收到不少人私信询问我,在cesium中加载3dtiles模型后如何调整模型位置,这里我就统一的介绍一下,我是怎么处理的以供大家参考。常见模型分类:倾斜摄影模型:由于模型带地理位置,基本上不需要调整模型位置。人工模型:模型是没有坐标信息的,这个时候就需要我们调整模型位置。还有点云等数据,这里就不介绍了。我在这里推荐两个方法,一个是使用cesiumlab来操作(可视化操作),另一个是使用代码操作代码原理cesium中加载3dtiles模型原创 2022-04-21 20:02:59 · 9691 阅读 · 14 评论 -
GIS数据处理-OSGB转换3dTiles
GIS数据处理-OSGB转换3dTiles介绍Open Scene Gragh Binary是OSGB的全称,这里的Binary是二进制的意思。 目前市面上生产的倾斜模型,尤其ContextCapture Cente处理的倾斜摄影三维模型数据的组织方式一般是二进制存贮的、带有嵌入式链接纹理数据(.jpg)的OSGB格式。 我们可以通过一些工具,将osgb转3dtiles格式后在平台中使用。此类数据文件碎、数量多、高级别金字塔文件大等特点难以形成高效、标准的网络发布方案,从而无法实现不同地域、不同部门之原创 2022-04-15 08:00:00 · 8752 阅读 · 2 评论 -
cesium-事件监听(获取点击位置的经纬度和高度)
cesium-事件监听(获取点击位置的经纬度和高度)介绍let handler = new Cesium.ScreenSpaceEventHandler(element);处理用户输入事件。可以添加自定义功能以在用户输入时执行。成员Cesium.ScreenSpaceEventHandler.mouseEmulationIgnoreMilliseconds=800接收到任何触摸事件后鼠标事件将被禁用的时间量(以毫秒为单位),这样任何模拟的鼠标事件都将被忽略。Cesium.ScreenSpa原创 2022-03-23 23:57:52 · 2907 阅读 · 1 评论 -
使用NGINX发布DEM切片
使用NGINX发布DEM切片介绍我们在使用Cesium时,有时需要使用高程数据,来体现三维场景中地形起伏变化。这个时候就需要我们自己来发布DEM切片数据。获取DEM数据我们可以在地理空间数据云获取开源的DEM数据,当然也可以获取其他的GIS数据地理空间数据云官网选择高级检索选择数据集查询数据结果如下:(这里以江苏省30米DEM数据为例)选择自己需要的数据进行下载处理数据这里下载的DEM数据为img格式,需要进行处理成tiff影像使用QGIS处理载入数据搜索并找到 G原创 2022-03-21 20:15:00 · 6093 阅读 · 9 评论 -
cesium-加载GeoWebCache发布的ArcGIS切片图层
cesium-加载GeoWebCache发布的ArcGIS切片图层介绍我之前的文章介绍过为什么要用GeoWebCache发布的ArcGIS的切片,这里就不再细说cesium加载geoWebCache的ArcGIS切片图层推荐使用WMS服务,其他的服务方式没试过(应该也可以行)核心代码 let smart = new Cesium.WebMapServiceImageryProvider({ url : 'http://192.168.1.100:8080/geowebca原创 2022-03-16 21:30:00 · 1477 阅读 · 0 评论 -
cesium-加载geoserver发布的tms服务
cesium-加载geoserver发布的tms服务效果核心代码 let smart = new Cesium.UrlTemplateImageryProvider({ url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png", rectangle : Cesium.Recta原创 2022-03-11 00:43:04 · 1906 阅读 · 6 评论 -
cesium-加载geoserver发布的wms服务
cesium-加载geoserver发布的wms服务效果核心代码 let smart = new Cesium.WebMapServiceImageryProvider({ url : 'http://localhost:8080/geoserver/wuxi/wms', layers : 'wuxi:20200824', parameters : { transparent : true, //是否透明原创 2022-03-11 00:41:24 · 948 阅读 · 0 评论 -
cesium-加载geoserver发布的WMTS服务
cesium-加载geoserver发布的WMTS服务发布数据默认安装好geoServer选择数据存储选择添加新的数据存储选择GeoTIFF选择数据发布数据发布成功实际效果完整代码在首页选择WMTS查看WMTS的配置信息这里地图使用的是mapbox地图叠加上geoServer的WMTS<!-- home --><template> <div class="home"> <el-breadcrumb s原创 2022-03-09 22:17:17 · 1096 阅读 · 0 评论 -
cesium-动态扩散点效果
cesium-动态扩散点效果介绍有些时候我们需要标记一些重要的点和事件,比如某地发生了地震,我们需要实时在cesium中高亮显示,实时消息可以使用websocket从后台推送到前台(这里暂时就不展开说了)实现效果效果如下:完整代码这里使用vue实现<template> <div class="home"> <el-row type="flex" :gutter="20"> <el-col :span="24">原创 2022-02-14 23:45:00 · 3759 阅读 · 3 评论 -
cesium-地形裁剪-绘制多边形裁剪
cesium-地形裁剪-绘制多边形裁剪介绍之前的文章介绍过,cesium绘制多边形和裁剪地形,这里我将两功能融合起来实现绘制多边形裁剪地形这里只能裁剪凸多边形效果先上效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PBYEtFsE-1644807360703)(https://gitee.com/SunBaTian/notes_images/raw/master/%20image/notes_mac/image-20220214104838101.png)]原创 2022-02-14 10:56:52 · 2787 阅读 · 2 评论 -
cesium-绘制点、线、面
cesium-绘制点、线、面介绍在地图框架中,绘制点线面是最常见的功能,这里我们在cesium中实现它,让其可以在三维地形中贴地实现效果点线面完整代码这里使用vue实现具体功能<template> <div class="home"> <el-row type="flex" :gutter="20"> <el-col :span="24"> <div class="grid-content原创 2022-02-13 14:59:07 · 9493 阅读 · 22 评论 -
cesium-地面裁剪(多个剪切面)
cesium-地面裁剪(多个剪切面)介绍我之前的文章介绍过地面裁剪的实现,这里介绍一下裁剪多个面的方式。Cesium自带的ClippingPlaneCollection只能实现单凸多边形挖除,为了实现多个面的裁切和简单凹多边形,这里我们需要修源码以提供支持。在github中的问题讨论中已经有人实现了,实现方式需要重新打包源码具体的详解实现效果源码打包这里我使用的cesium源码版本为:1.79.1下载地址打包工具使用的是webstormnode.js版本为14.17.5替换原创 2022-02-10 06:00:00 · 4316 阅读 · 4 评论 -
cesium-裁剪3dTiles模型(多边形裁剪)
cesium-裁剪3dTiles模型(多边形裁剪)介绍除了之前介绍的完整的裁切模型方式,我们有时还需不规则的去裁剪3dTiles模型我这里业务需要裁剪模型中一部分位置效果先上效果俯视效果侧视效果思路分析确定一个垂直XOY面的法向量 let up = new Cesium.Cartesian3(0, 0, 10);两点确定一个方向向量,由p2指向p1的向量let right = Cesium.Cartesian3.subtract(p2C3, p1C3, new原创 2022-02-09 15:36:35 · 5158 阅读 · 7 评论 -
cesium-裁剪3dTiles模型(vertical垂直裁剪)
cesium-裁剪模型(vertical垂直裁剪)介绍之前的文章介绍过,水平裁剪3dTiles模型查看模型横切片的例子,这次介绍一下垂直方向裁切模型效果先上效果未裁剪效果裁剪后效果思路分析这个里的3dTiles模型我使用的是倾斜摄影模型,实现的效果和官网案例一样添加倾斜摄影模型,设置模型矩阵,修正模型的位置获取模型的外包球半径(radius)添加裁切面模型设置笛卡儿坐标系的原点位置为模型外接圆的圆心绘制平面(使用Entity类创建一个水平面),并设置一个范围(原点原创 2022-02-09 14:58:53 · 2654 阅读 · 7 评论 -
cesium-裁剪3dTiles模型(horizontal水平裁剪)
cesium-裁剪模型使用和裁剪地面差不多的方式进行模型裁剪完整代码<!DOCTYPE html><html lang="en"><head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equ原创 2022-01-12 23:59:07 · 1074 阅读 · 5 评论 -
cesium-地面裁剪
cesium-地面裁剪介绍在cesium中有些模型是在地下、建筑物中的,因此需要对地表、山体或建筑物进行裁剪,展示内部的模型cesium中裁剪的方法是new Cesium.ClippingPlaneCollection()思路地下裁剪,选中地面某一点,绘制一个标准矩形,进行裁剪完整代码<!DOCTYPE html><html lang="en"><head> <!-- Use correct character set. -->原创 2022-01-12 23:29:07 · 1519 阅读 · 4 评论 -
cesium-支持的数据格式
cesium-支持的数据格式Cesium作为一个开源三维可视化JavaScript库,可以用来显示海量三维模型数据、影像数据、地形高程数据、空间要素、图片、视频等数据。支持的主要数据格式与服务影像服务数据格式/数据源APIWMSWebMapServiceImageryProviderTMScreateTileMapServiceImageryProviderWMTSWebMapTileServiceImageryProviderArcGISArcGISM原创 2022-02-02 21:20:34 · 3178 阅读 · 0 评论 -
cesium-相机系统
cesium-相机系统在二维GIS中移动视城或者进行空间漫游,只需设置视域范围中心点的经纬度坐标和图层等级,可以理解为只需确定视点位置即可,不存在视线方向问题。但在三维GIS中不仅需要确定视点位置,还要确定视线方向,如果目标物与视线方向相反.那么在视域中则看不到目标物。Cesium通过相机控制场景中的视域,旋转、缩放、平移等操作都可控制相机移动。当用户拖动地球移动时,其实是地球不动,相机在移动,这种相对运动产生场景移动的效果。Cesium具有默认的鼠标和触摸事件处理程序与摄像头交互。默认的相机操作是这样的原创 2022-02-02 20:23:18 · 4095 阅读 · 0 评论 -
cesium-坐标系统
cesium-坐标系统cesium坐标介绍Cesium开发中常用的坐标系统主要有三个:屏幕坐标系统、笛卡儿空间直角坐标系统、地理坐标系统。屏幕坐标系统是二维坐标,空间直角坐标系统是三维坐标系,而地理坐标是球面经纬度坐标。屏幕坐标系统(Cartesian2)屏幕坐标是平面直角坐标系,是二维笛卡儿坐标系。Cesium中使用Cartesian2来描述屏幕坐标系。构造函数是new Cesium.Cartesian2(x, y)。具体是鼠标点击位置距离canvas左上角的像素值。屏幕左上角为原点(0.0),屏原创 2022-02-02 13:38:43 · 3104 阅读 · 1 评论 -
cesium-核心类
cesium-核心类Viewer是Cesium的核心类,对应着Cesium展示三维要素内容的主窗口。它不仅仅是包含三维地球的视窗,还包含一些基础控件,所以在定义Viewer对象的同时需要设定基础部件、图层等的初始化状态。Cesium开发的大部分工作在Scene场景中执行,包括调用图层、3D Tiles数据加载、场景交互等。Viewer和Scene有部分内容相同,如设置相机参数,通过这两个类都可以完成,在下文中会对类似情况做出说明。另外Cesium提供了Entity、DataSource等封装好的数据加载方原创 2022-02-01 22:47:40 · 1856 阅读 · 0 评论 -
cesium-接入监控视频
cesium-接入监控视频介绍现实世界中我们周边通常都会有着很多的摄像头监控(室内、室外),这些监控与实际地理位置匹配对于判别监控所覆盖的区域具有重要作用。之前我们在cesium中添加了视频播放的功能,这里我将介绍一下如何在cesium中接入监控视频。实现效果这里展示的是将实时视频添加到cesium中的地形图上,并贴地现实[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lWmDF928-1643440154398)(https://gitee.com/SunBaTi原创 2022-01-29 15:10:24 · 6662 阅读 · 12 评论 -
cesium-模型处理(FBX2GLTF)
cesium-模型处理(FBX2GLTF)介绍cesium是支持导入3D模型的数据的,但是只支持gltf格式的数据。这里我举个例子:在3dsmax中导出FBX模型3dsmax导出fbx模型注意:导出的时候要注意模型的贴图、材质、动画等别丢失了!有了FBX模型后就可以使用FBX2GLTF转换为GLTF使用教程安装github官网地址根据具体的电脑系统来选择版本下载,这里我选择windows版本的将exe文件放置到对应位置并修改名称:fbx2gltf使用进入当前文件夹的cmd命令原创 2022-01-26 10:59:37 · 4721 阅读 · 19 评论 -
cesium-CZML鸟模型飞行轨迹
cesium-CZML鸟模型飞行轨迹介绍在现实生活中除了有静态不动的建筑物和自然场景,还有动态的物体(比如动物、人、车辆、飞机等)。静态的物体在cesium中很好展示,比如倾斜摄影模型、影像切片图层、矢量数据等。如果要在cesium中要描述一个物体的动态效果,我这有两种思路:第一种方式可以使用定时器,不断的去修改模型的位置,来实现动态轨迹的效果(可以用,但一点都不优雅)使用CZML来实现模型的动态轨迹效果,之前介绍过CZML数据格式了,不清楚可以去看看我之前介绍的文章(好用,使用起来很优雅,推原创 2022-01-26 09:42:32 · 4700 阅读 · 4 评论 -
cesium-水面动态提升高度
cesium-水面动态提升高度介绍模拟实现水面的淹没效果:先准备一个DEMO数据然后创建一个长方体Entity将长方体置于DEM底下使用回调方法动态提升Entity高度模拟实现淹没效果核心代码 /** * * @param {*} targetHeight 目标高度 * @param {*} areaCoor 范围坐标 * @param {*} waterHe原创 2022-01-21 15:28:45 · 2989 阅读 · 0 评论 -
cesium-添加水面动态贴图效果
cesium-添加水面动态贴图效果介绍真实的水面是动态的,这里可以使用primitives方法来实现效果核心代码 /** * * @param {*} targetHeight 目标高度 * @param {*} areaCoor 范围坐标 */ drawWater(targetHeight, areaCoor) {原创 2022-01-21 15:06:48 · 3378 阅读 · 5 评论 -
cesium-CZML描述动态场景
cesium-CZML描述动态场景CZML具有两种动态可视化机制:按时间间隔和按时间戳描述动态场景变化。按时间间隔描述动态变化是指CZML属性值在一段时间内是一个固定值,而在另一段时间是另一个固定值;按时间戳描述动态变化是指每个时间节点对应一个值,通过内插算法可推算两个时间节点之间的属性值。按时间间隔描述变化通常情况下CZML的属性值是一个数组,数组中的每个元素对应一个不同的时间和属性值。对于时间间隔,使用interval属性,通过ISO 8601 interval格式的字面值表示,这种表示方法的好处原创 2022-01-18 19:24:29 · 1925 阅读 · 6 评论 -
cesium-动态数据格式CZML介绍
cesium-动态数据格式CZML介绍CZML定义CZML是Cesium团队制定的一种用来描述动态场景的JSON架构语言,可以用来描述点、线、多边形、体、模型及其他图元,同时定义它们是怎样随时间变化的。CZML采用数据驱动的方式完成场景加载渲染,开发者在CZML中定义场景数据类型、交互信息、时间节点等内容,不需要额外的代码便可构建出丰富的场景。Cesium与CZML的关系就如同Google Earth和KML的关系。CZML和KML都是用来描述场景的数据格式,KML是由XML语言定义的,而CZML是特原创 2022-01-18 19:21:40 · 6590 阅读 · 0 评论 -
cesium-添加地下模型
cesium-添加地下模型在加载模型的时候,可能会出现地下模型,这时就需要开启深度检测了,不然模型会在视图中乱飘开启深度检测后,如果加载了图层,就有可能遮挡住地下模型这是就需要使用根据距离改变地下透视程度核心代码 /** * 根据距离改变地下透视程度 */ undergroundState() { let viewer = this._viewer;原创 2022-01-17 20:19:05 · 3720 阅读 · 1 评论 -
cesium-操作面要素透明度
cesium-操作面要素透明度面要素GeoJSON{ "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "stroke": "#555555", "stroke-width": 2, "stroke-opacity": 1, "fill": "#55555原创 2022-01-17 19:47:24 · 2150 阅读 · 0 评论 -
cesium加载GeoJSON
cesium加载GeoJSON介绍GeoJSONGeoJson是Json数据(键值对),它是针对地理数据的一个变种具体的参考文档:GeoJSON面要素多边形json数据{ "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "stroke": "#555555", "stroke-width":原创 2022-01-17 19:19:50 · 2747 阅读 · 0 评论 -
cesium-卷帘效果
cesium-卷帘效果使用“卷帘图层”工具以交互方式显示被卷帘图层下方的图层。使用此工具可轻松地查看某特定图层下面的内容,而无需在内容列表中关闭该图层。核心代码 /** * 卷帘 */ addJuanlian(){ let viewer = this._viewer; let layers = viewer.imageryLayers;原创 2022-01-17 16:39:13 · 1746 阅读 · 1 评论 -
cesium-雨雪雾天气效果
cesium-天气效果cesium可以实现天气变化的效果,官方是使用cesium粒子系统做的效果。但这种实现方式有问题:当视角变化(拉近、拉远、平移、旋转)时,粒子就会变化,甚至会消失。我这里通过 Shader 这种方式模拟雨雪,可以不受视点位置的影响,相当于是一个全屏的后处理。下雪天气(snow)核心代码class SnowEffect { constructor(viewer, options) { if (!viewer) throw new Error('no v原创 2022-01-17 16:01:22 · 5964 阅读 · 25 评论 -
cesium-二三维联动优化(ol-cesium)
cesium-二三维联动优化(ol-cesium)之前已经实现了ol和cesium联动的效果了,但还是有点问题:cesium和ol平面视角联动还算正常的,但是当cesium为三维视角时联动的效果就出现问题。这里使用ol-cesium来实现完善的联动效果ol-cesium介绍在 2D 和 3D 之间平滑切换并同步:地图上下文(边界框和缩放级别);栅格数据源;2D 和 3D 的矢量数据源;地图选择(选定项目);地图和地球视图之间的动画过渡。ol-cesium官网地址安装我这里使用的原创 2022-01-17 14:05:14 · 5208 阅读 · 8 评论 -
cesium-2-3D切换
cesium-2-3D切换cesium自带2维和3维的切换代码比较简单核心js代码 /** * 二三维场景切换 */ let viewType= "三维视图"; function setViewType () { let scene = viewer.scene; switch (viewType) { case "三维视图": scene.morphTo3D(0);原创 2022-01-12 23:54:31 · 3747 阅读 · 3 评论 -
cesium-视频融合
cesium-视频融合在cesium中接入视频,可以将视频设置为实体的材质实现方法很简单核心js方法 /** * 视频融合 */ function addVideo() { let videoElement = document.getElementById('daolu'); videoElement.play(); //开始播放 viewer.showRenderLoopErrors = false;原创 2022-01-12 23:50:35 · 7075 阅读 · 14 评论 -
cesium-透视效果
cesium-透视效果有些时候我们需要查看建筑物内部情况,但不想使用裁剪方式,这时候我们可以使用透视来看开启透视后,不仅可以透视模型,还能透视静如cesium的球体核型js方法 /** * 根据距离改变地下透视程度 */ function undergroundState(){ let scene = viewer.scene; let globe = scene.globe; scene.screenSpaceCam原创 2022-01-12 23:42:48 · 1506 阅读 · 1 评论 -
cesium-ol二三维联动(鹰眼图)
cesium-ol二三维联动(鹰眼图)cesium除了使用两个viewer联动的方式实现鹰眼图,还有其他方式这里我使用cesium和ol联动的方式实现鹰眼图(也可以实现简单的二三维联动效果)实现思路监听cesium地图的移动当移动视图时,计算cesium视图范围,并传递给ol监听ol地图移动,当ol移动时,计算ol的视图范围传递给cesium(cesium会垂直移动)实现代码<!DOCTYPE html><html lang="en"><head>原创 2022-01-12 20:52:27 · 1973 阅读 · 0 评论