cesium
文章平均质量分 61
luoyun620
这个作者很懒,什么都没留下
展开
-
CESIUM学习—— viewer.trackedEntity小坑坑
CESIUM学习—— viewer.trackedEntity小坑坑原创 2021-06-24 16:28:34 · 3870 阅读 · 0 评论 -
cesium小场景鹰眼地图
一、基本需求由于项目需要,用基于CEIUSM引擎和3DMAX建模搭建一个小区级别的三维场景,在导航时,需要实现鹰眼小地图。一看到鹰眼小地图,我们会很自然地想到用百度地图或者别的什么地图加一个小图标,然后三维场景与小地图坐标同步就可以了。但是这里我想直接用图片来实现,主要原因有:(1)我的三维场景是随便放在一个地方的,并没有与小区真实坐标匹配;(2)三用3DMX建模时,为了美观,建模师把建模范围做了一定夸张。(3)鹰眼的主要目的,并不是要实现很精准的定位,而是知道当前的大致位置。基于以上.原创 2021-02-08 16:02:34 · 1630 阅读 · 1 评论 -
CESIUM例子学习(十四)——distance Display Conditions
每一个entity中的渲染要素都是可以单独控制的。如果在不同的视点距离显示不同的要素,可以通过可选属性distanceDisplayCondition来实现。代码如下:function addBillboardAndRectangle () { var entity = viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.43299999999988, 39.915999999999954, 70)原创 2020-07-29 11:01:04 · 5711 阅读 · 1 评论 -
CESIUM例子学习(十四)——Clustering
Clustering,聚合功能,单从一个例子来看,似乎没有什么作用。但是在GIS项目中是应用得比较多的功能点,当一个区域很小,但需要显示的标注又非常多时,它就派上用场了。在C/S系统中,往往使用zoom与visible绑定来解决压盖问题,但并不能很好地解决,体验也不是很好,好久没用C/S系统了,不知道有没有平台把聚合功能整合进去。Clustering完美地解决了这个问题,再也不用担心加载的点太多而看不清楚的问题了。一、KML数据加载代码中是以加载KML数据为例的。首先是用KmlDataSource.原创 2020-07-28 18:35:02 · 3625 阅读 · 4 评论 -
CESIUM例子学习(十三)——Clamp To 3DModel
前面从例子中学习了绘制要素紧贴地表的操作。但是在项目中,紧贴地表可能是不够的,比如需要在模型顶上绘制一个label,难道要在模型顶上加上一个写死的高度的,否则label就会被模型覆盖。要解决这样的问题,学习Clamp To 3DModel应该可以帮上忙。原码中绘制的是动态变化的点,绘制的原理方法就是利用属性回调函数,实时更新pint点的位置。代码如下:function addPoint () { point = viewer.entities.add({ position:原创 2020-07-27 17:35:26 · 1566 阅读 · 1 评论 -
CESIUM例子学习(十二)——3D Tiles Styling
3D Tiles Styling,这应该是一个使用率最高的例子了吧,因为觉得它的使用场景实现是太多了。它是可以根据Cesium3DTileFeature属性来进行个性化渲染的功能,比如分级渲染,条件显示、甚至可以自定义计算函数进行渲染。这些功能的实现都很简单,根据项目需要,创建一个相应的Cesium3DTileStyle对你,并赋值给Cesium3DTileset即可完成。但前提条件是,你的3D Tiles的属性字段中得有需要字段与值。如何判断是否有相应字段的方法是,在加载完成3dtiles之后,绑定一个点原创 2020-07-25 18:22:25 · 4581 阅读 · 8 评论 -
CESIUM例子学习(十一)——3DTiles Clipping Planes(2)
前面一节学习了剖切模型的交互方法,这一节学习剖切BIM的方法,看了一下代码,现在对BIM的剖切其实用的是3dtiles的clippingPlanes可选属性,也就是说不仅仅是BIM,只要是3dtiles都可以剖切的,下面验证一下我的想法。下面用倾斜摄影做剖切测试。方法与模型加载剖切面类似,只是剖切面绑定时有一点点变化。因为3dtiles的构造函数是Cesium3DTileset,所以绑定是Cesium3DTileset的可选参数clippingPlanes。代码如下:function add3dt原创 2020-07-24 15:39:20 · 1218 阅读 · 1 评论 -
CESIUM例子学习(十一)——3DTiles Clipping Planes(1)
3DTiles Clipping Planes例子,可以很容易实现对BIM、Point Cloud、Instanced、Model的任意剖切,其中Instanced是到底是一个什么对象,是怎么来的还不清楚。3DTiles Clipping Planes,对于BIM说来应用场景是有的,比如,需要查看一个建筑内部,应用从上到下的剖分,可以查看内部的结构。但对于点云和model有什么用呢?反正到现在我还没想出来。但从学习的角度去看,还是可以的。一、模型剖切...原创 2020-07-24 00:59:47 · 3245 阅读 · 4 评论 -
CESIUM例子学习(十)——PostProcessStage(fog)
cesium里的PostProcessStage功能是在1.46之后才加上去的。雾用到了原创 2020-07-22 00:18:55 · 4295 阅读 · 4 评论 -
CESIUM例子学习(九)——Primitive(4)
上一节学习了原创 2020-07-20 15:28:55 · 4190 阅读 · 5 评论 -
CESIUM例子学习(九)——Primitive(3)
geometry实在是太多了,多也要一个一个地学。学习的过程中不仅仅是用Primitive加载各种geometry。在这个过程中也加深对cesium的印象,至少混过脸熟,然后熟就能生巧。特别是学习这种事,要自己亲手去做去练习才能有更好的体会。一、Polyline(线)cesium提供了SimplePolylineGeometry、PolylineGeometry、PolylineVolumeGeometry、PolylineVolumeOutlineGeometry、GroundP...原创 2020-07-18 18:49:11 · 4729 阅读 · 4 评论 -
CESIUM例子学习(九)——Primitive(2)
上一节学习了Primitive加载BoxGeometry和RectangleGeometry。原创 2020-07-18 10:55:08 · 4997 阅读 · 2 评论 -
CESIUM例子学习(九)——Primitive(1)
在学习Primitive前,首先感谢GISEarth大神的https://blog.csdn.net/happyduoduo1/article/details/51868042这篇博文。下面的Cesium支持的几何图形,是直接从他的博文中截图的,再次感谢。cesium加载数据方式多种多样,一般用entity、dataSources和Primitive。其中entity是最高级的,基本上是统一的使用样式,比较容易上手。之前学习过程中都是用entity,今天学习一下Primitive加载。在看CESIU原创 2020-07-17 22:11:19 · 3524 阅读 · 2 评论 -
CESIUM例子学习(八)——Geometry and Appearances(2)
一、wall(墙)cesium里提供了绘制墙的方法,也就是垂直于地表的一个面。绘制原理是沿着一条线,利用线上各点的最大高度和最小高度来绘制垂直于地表的面。默认情况下,最小高度是0,代码如下:function addWall () { let entity = viewer.entities.add({ wall: { ////指定墙顶上一系列的点 positions: Cesium.Cartesian3.fromDegrees原创 2020-07-16 11:44:05 · 2177 阅读 · 2 评论 -
CESIUM例子学习(八)——Geometry and Appearances(1)
这一节是关于在cesium地球上绘制各种要素的,包括矩形、多边形、圆、椭圆、柱体、锥体、盒子和球体。个人觉得这个内容应该放在第一节先学,因为cesium很多东西都是以绘制为基础。一、Rectangle(矩形)1、加载RectangleRectangle就是通过传入的两个点,在地球上绘制一个矩形。本来一个矩形应该需要四个点,但函数只需要两个点,如下图API:解释得明白,也就是传入矩形的左下角和右上角。如果传成了左上角和右下角,会得报如下错误:正确代码如下:function a原创 2020-07-15 17:18:36 · 3289 阅读 · 6 评论 -
CESIUM例子学习(七)——Classification Types
这是一个非常有用的例子。主要讲的是在3dtiles倾斜摄影上的绘制与单体化实现。一、在倾斜摄影上绘制线(失败!)原因找到了,版本问题该例子的第一个是以三种模式绘制线,即帖地模式、帖3dtiles模式和两同时绘制模式。1、如下例子原代码:var polyline = viewer.entities.add({ polyline: { positions: Cesium.Cartesian3.fromDegreesArray([ -75.60217330403601,原创 2020-07-14 18:18:24 · 3461 阅读 · 1 评论 -
CESIUM例子学习(六)——Cardboard
在初看到这个例子时,感觉这个例子没有什么可学的。仔细看完之后,至少可以学习到两个方面的内容:(1)基本的相机动画实现;(2)cesium相机绑定,即把相机绑定到模型上,当模型运动时,带着相机一起运动;一、动画基本设置start:开始时间,设置动画开始时间,只是一个与结束时间相对的时间,设置到哪年并不影响动画。stop:结束时间,也就是开始时间加上动画时长,时间最好是等于或略大于动画时长,否则,可能会导致动画不完整。同样的动画数据,设置不同的动画时长,如下对:动画时长370,正常动画时长动原创 2020-07-11 21:06:30 · 1420 阅读 · 1 评论 -
CESIUM例子学习(五)——Camera. fyTo与viewer.flyTo(3)
前面两节学习了对Camera的控制,但是还有一个疑问,Camera. fyTo()与viewer.flyTo()这两个函数有区别吗?之前我自己也没有去仔细看过,感觉两个函数应该没什么区别,都是定位而已。一、Camera. fyToFlies the camera from its current position to a new position,相机从当前位置飞到新的位置。参数如下图:其中destination:指的是相机的目标位置,是相机所在位置,这一点一定要注意;orientat原创 2020-07-10 11:17:23 · 8201 阅读 · 1 评论 -
CESIUM例子学习(五)——Camera Tutorial(2)
这一节是关于Camera类里面移动的。一、Camera的move方法Camera中提供了六个move方法。其移动方向上以屏幕为参考的。moveBackward(后退,向屏幕外面)、moveForward(向前,向屏幕里面)、moveLeft(向左)、moveRigth(向右)、moveUp(向上,屏幕上方)、moveDown(向下,屏幕下方)二、例子用键盘的Q、W、E、A、S、D来控制摄像机的移动。1、注册键盘事件代码如是下: ////对应事件 var flags = {原创 2020-07-08 15:50:00 · 485 阅读 · 0 评论 -
CESIUM例子学习(四)——CallbackProperty
cesium号称是集显示时空数据于一体的三维引擎。空间数据的展示我们已经见到,对于时间上的数据,我觉得CallbackProperty是最大功臣。因为使用CallbackProperty,cesium中一切可视化的要素都可以与时间联系起来。一、定义CallbackProperty函数定义CallbackProperty函数代码如下:newCesium.CallbackProperty(getEndPoint,isConstant)function getEndPoint (time, r..原创 2020-07-07 16:22:16 · 9193 阅读 · 2 评论 -
CESIUM例子学习(三)——billboard
一、什么是billboardbillboard也叫广告牌,用图片标注的形式表示地理点位信息。是一种特别简单的模型(D3D里面好像是这么说的),它会自动计算,使图片下面始终面向摄像机,这种技术也叫广告牌技术。二、billboard加载以entity方式加载billboard,代码如下: var position = Cesium.Cartesian3.fromDegrees(116.43299999999988, 39.915999999999954) var entity = vi原创 2020-07-07 13:44:07 · 8818 阅读 · 0 评论 -
CESIUM例子学习(二)——模型颜色属性
前面一节搭建了cesium场景并加载了一个飞机模型,同时调整模型的姿态与缩放比例。这一节学习模型颜色属性。主要是调整模型颜色、透明度、颜色混合模式、外轮廓线颜色和外轮廓线宽。一、模型颜色与透明度模型加载到场景后,如果不设置其颜色属性,它显示出来的就是建模时的材质颜色。如下图:设置模型颜色与透明度也很简单,一句话搞定代码如下:entity.model.color = Cesium.Color.fromAlpha(Cesium.Color.RED, 1);//设置模型颜色与透明度二、颜原创 2020-07-04 15:34:18 · 8497 阅读 · 0 评论 -
CESIUM例子学习(一)——动态模型加载
前言一直在学习cesium,时断时续地用它,但感觉哪里不对,什么都了解一点,但什么没有深入地去研究,都是浮于表面。于是下定决心:从头开始,从cesium的sandcastle例子开始,系统地学一下cesium。并把它记录下来,以便后面用时能很快找到。一、场景与动态模型加载把基本框架搭起来之后,就开始第一个例子。如下图(发动机叶片是转动的):viewer配置如下图:因为模型的发动机叶片是转动的,为了使叶片转动起来,shouldAnimate:true。二、模型旋转这里的模.原创 2020-07-03 19:19:15 · 3693 阅读 · 0 评论 -
cesium模型纹理替换
一、概述一个cesium管网项目中,默认情况下,用不同颜色表示不同的管网类型。当点击到对应的管网时,需要动态替换管网的纹理,以达到表达管网流向的目的。二、替换步骤1、添加需要替换的图片到Resourc中Cesium.Resource.fetchImage({url:'./Earth/images/gw/'+name+'.jpg'}).then(function(image){gwImgList[name]=imag...原创 2020-06-26 17:57:29 · 3859 阅读 · 3 评论