cesium加载动图方案三：通过apng-js库实现

2023-05-19 20:50:27

TAG: ce ces cesium

共1条回复

我不懂运营

实际开发中我们经常会有动图加载的需求，而Cesium不支持纹理贴动图，怎么样基于Cesium实现动图的加载，值得我们研究一波。cesium加载gif格式的动图有些场景能够满足我们的需求，但是有时候，图像的质量不高，颗粒感很明显，会有杂边，如何解决这个难题，又值得我们进入深层次的研究。

首先，查阅相关资料，容易得知：动图的格式有很多种，主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式，它的原理是通过对多帧图片按时间序列进行切换，从而达到动画的效果。apng格式动画原理和gif差不多。gif的特点是牺牲质量来降低大小，图像信息比较多的情况下，颗粒感明显，会有杂边。apng是普通png图片的升级版，它的后缀依然是.png，包含动态的情况下大小会比普通静态png大出数倍，但是可以做到无损动态展示。

其次，了解了apng动图优势过后，考虑到Cesium的Billboard支持单帧纹理贴图，如果能够将apng动图进行解析，获得时间序列对应的每帧图片，然后按照时间序列动态更新Billboard的纹理，即可实现动图纹理效果。

然后，我们如何进行apng动图的解析？经过不懈的探寻，发现 apng-js 第三方库能够将apng转化为一帧帧图像，正好能够满足我们的需求！！！

注：apng-js第三方库需要经过优化，才能通过script标签直接引用，优化后的链接已奉上！

完整demo可参见 practicalCesiumDemos 中loadApng。

相关推荐

wiz note

cesium是什么 Cesium是一个开源的，基于webgl的二、三维地图引擎，就其实现来说是目前开源版本中比较完备的一个版本，有完备的数据源支持、支持大场景、支持定制化的样式渲染。 2023-01-10 03:22:471

cesium屏蔽掉一些默认设置（基础篇） 我们搭建一个cesium项目的时候，cesium会提供给我们一些默认配置，如下图。有时候我们想隐藏掉这些配置隐藏掉这些配置有两种方式。 1.js构造viewer对象时候隐藏 2.通过viewer对象来隐藏div的方式Cesium里面鼠标的操作主要在ScreenSpaceCameraController.js里面 1.viewer.scene.screenSpaceCameraController.enableInputs 设置为true的话，场景里可以旋转，拖拽等。设置为false将禁用所有鼠标的输入事件 2.viewer.scene.screenSpaceCameraController.enableTranslate 是否可以拖动地图,只在2d和2.5d场景里生效 3.viewer.scene.screenSpaceCameraController.enableZoom 是否可以缩放 4.viewer.scene.screenSpaceCameraController.enableRotate 是否可以旋转地图,只在2d和2.5d场景里生效 5.viewer.scene.screenSpaceCameraController.enableTilt 是否可以倾斜地图,只在3d和2.5d场景生效 6.viewer.scene.screenSpaceCameraController.enableLook 是否允许使用自由外观,只改变相机的朝向，不改变相机位置 7.viewer.scene.screenSpaceCameraController.inertiaSpin 旋转惯性 8.viewer.scene.screenSpaceCameraController.inertiaTranslate 平移惯性 9.viewer.scene.screenSpaceCameraController.inertiaZoom 缩放惯性 10.viewer.scene.screenSpaceCameraController.bounceAnimationTime 切换2d,2.5d，3d模式之间的时间间隔，默认3s 11.viewer.scene.screenSpaceCameraController.minimumZoomDistance 相机离地表的最低高度，默认1米，比如设置为-100米的情况下相机将钻入地下 12.viewer.scene.screenSpaceCameraController.maximumZoomDistance 相机离地表的最大高度，默认为无穷大 13.viewer.scene.screenSpaceCameraController.translateEventTypes = Cesium.CameraEventType.LEFT_DRAG 移动场景的事件，默认是鼠标按住左键拖拽地图,可自定义移动场景的鼠标事件，2d和2.5d有效 14.viewer.scene.screenSpaceCameraController.zoomEventTypes =[ Cesium.CameraEventType.RIGHT_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH, ] 鼠标缩放事件，传入的是一个数组,默认鼠标右键拖拽，鼠标滚轮滚动，两个手指滚动笔记本触控区都可以触发场景缩放效果 15.viewer.scene.screenSpaceCameraController.rotateEventTypes = Cesium.CameraEventType.LEFT_DRAG 旋转场景，默认是左键拖拽，只在2.5d和3d场景生效 16.viewer.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.PINCH, { eventType: Cesium.CameraEventType.LEFT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL, }, { eventType: Cesium.CameraEventType.RIGHT_DRAG, modifier: Cesium.KeyboardEventModifier.CTRL, }, ] 场景倾斜事件，默认是鼠标滚轮下按拖拽，按CTRL+左键拖拽，按CTRL+右键拖拽都可以使场景倾斜，建议将场景倾斜改成右键拖拽使用起来更方便一点，比如 viewer.scene.screenSpaceCameraController.tiltEventTypes = Cesium.CameraEventType.RIGHT_DRAG 15.viewer.scene.screenSpaceCameraController.lookEventTypes={ eventType: CameraEventType.LEFT_DRAG, modifier: KeyboardEventModifier.SHIFT, } 相机位置不变，改变相机方向进行自由观看，默认是按住SHIFTT键+左键拖拽 16.viewer.scene.screenSpaceCameraController.enableCollisionDetection 是否开启碰撞检测，默认是开启 2023-01-10 03:22:521

Cesium官方英文论坛 Cesium中文网： http://cesiumcn.org/ | 国内快速访问： http://cesium.coinidea.com/ Cesium官方刚刚完成了将Google Groups论坛转移到Discourse的工作，Discourse是一个面向在线社区的现代开源平台。这是Cesium社区论坛成立以来最大的一次更新。论坛汇集了近十年的相关GIS的智慧结晶，从基本的故障排除到讨论世界可视化的最佳方式，共有30000多篇文章。大多数人来到Cesium社区时，他们有自己想了解的真实世界的数据。通常这是他们第一次涉足3D地图。和许多人一样，通过搜索论坛了解到了为什么精度在许多应用中都很重要，或者当不考虑地球的曲率时会发生什么。如果你曾经在Cesium论坛上问过一个问题，我想感谢您为这个独特的计算机图形学和地理空间知识档案作出贡献！ Cesium官方开始使用Discourse，使发现和分享Cesium和三维地理空间的知识更加容易。使用Discourse带来了更好的搜索和格式化工具；更好的布局，尤其是在移动设备上；更快的页面加载；以及更多的新功能。关于新论坛的一切都是可定制的，所以希望它能随着我们不断增长的社区而发展。例如，刚刚启用了直接在论坛帖子中嵌入Cesium Stories：请浏览一下论坛，告诉我们您对论坛的看法。如果您以前在旧论坛上发表过文章，请参阅此处说明，了解如何在新论坛上收回你的帐户。新的论坛不仅使用户更容易找到需要的答案，而且是一个用户可以和更广泛的Cesium生态系统分享工作的合作场所。到时候见！请访问： community.cesium.com 原文链接： https://cesium.com/blog/2020/05/04/new-community-forum/ 评语：Cesium官方的英文论坛，大家可以去搜索答案，提出问题。 Cesium中文网交流QQ群：807482793 Cesium中文网： http://cesiumcn.org/ | 国内快速访问： http://cesium.coinidea.com/ 2023-01-10 03:22:571

cesium 5 cesium默认颜色及其对照表 cesium中定义了一个 new Cesium.Color ( red , green , blue , alpha )，表示使用红色，绿色，蓝色和Alpha值指定的颜色，范围从 0 （无强度）到 1.0 （全强度）。其实就是rgba。同时他有一些默认的颜色，下面是定义以及颜色对照表: Cesium.Color.ALICEBLUE ███████ Cesium.Color.ANTIQUEWHITE ███████ Cesium.Color.AQUA ███████ Cesium.Color.AQUAMARINE ███████ Cesium.Color.AZURE ███████ Cesium.Color.BEIGE ███████ Cesium.Color.BISQUE ███████ Cesium.Color.BLACK ███████ Cesium.Color.BLANCHEDALMOND ███████ Cesium.Color.BLUE ███████ Cesium.Color.BLUEVIOLET ███████ Cesium.Color.BROWN ███████ Cesium.Color.BURLYWOOD ███████ Cesium.Color.CADETBLUE ███████ Cesium.Color.CHARTREUSE ███████ Cesium.Color.CHOCOLATE ███████ Cesium.Color.CORAL ███████ Cesium.Color.CORNfLOWERBLUE ███████ Cesium.Color.CORNSILK ███████ Cesium.Color.CRIMSON ███████ Cesium.Color.CYAN ███████ Cesium.Color.DARKBLUE ███████ Cesium.Color.DARKCYAN ███████ Cesium.Color.DARKGOLDENROD ███████ Cesium.Color.DARKGRAY ███████ Cesium.Color.DARKGREEN ███████ Cesium.Color.DARKGREY ███████ Cesium.Color.DARKKHAKI ███████ Cesium.Color.DARKMAGENTA ███████ Cesium.Color.DARKOLIVEGREEN ███████ Cesium.Color.DARKORANGE ███████ Cesium.Color.DARKORCHID ███████ Cesium.Color.DARKRED ███████ Cesium.Color.DARKSALMON ███████ Cesium.Color.DARKSEAGREEN ███████ Cesium.Color.DARKSLATEBLUE ███████ Cesium.Color.DARKSLATEGRAY ███████ Cesium.Color.DARKTURQUOISE ███████ Cesium.Color.DARKVIOLET ███████ Cesium.Color.DEEPPINK ███████ Cesium.Color.DEEPSKYBLUE ███████ Cesium.Color.DIMGRAY ███████ Cesium.Color.DIMGREY ███████ Cesium.Color.DODGERBLUE ███████ Cesium.Color.fIREBRICK ███████ Cesium.Color.fLORALWHITE ███████ Cesium.Color.fORESTGREEN ███████ Cesium.Color.fUCHSIA ███████ Cesium.Color.GAINSBORO ███████ Cesium.Color.GHOSTWHITE ███████ Cesium.Color.GOLD ███████ Cesium.Color.GOLDENROD ███████ Cesium.Color.GRAY ███████ Cesium.Color.GREEN ███████ Cesium.Color.GREENYELLOW ███████ Cesium.Color.GREY ███████ Cesium.Color.HONEYDEW ███████ Cesium.Color.HOTPINK ███████ Cesium.Color.INDIANRED ███████ Cesium.Color.INDIGO ███████ Cesium.Color.IVORY ███████ Cesium.Color.KHAKI ███████ Cesium.Color.LAVENDAR_BLUSH ███████ Cesium.Color.LAVENDER ███████ Cesium.Color.LAWNGREEN ███████ Cesium.Color.LEMONCHIffON ███████ Cesium.Color.LIGHTBLUE ███████ Cesium.Color.LIGHTCORAL ███████ Cesium.Color.LIGHTCYAN ███████ Cesium.Color.LIGHTGOLDENRODYELLOW ███████ Cesium.Color.LIGHTGRAY ███████ Cesium.Color.LIGHTGREEN ███████ Cesium.Color.LIGHTGREY ███████ Cesium.Color.LIGHTPINK ███████ Cesium.Color.LIGHTSEAGREEN ███████ Cesium.Color.LIGHTSKYBLUE ███████ Cesium.Color.LIGHTSLATEGRAY ███████ Cesium.Color.LIGHTSLATEGREY ███████ Cesium.Color.LIGHTSTEELBLUE ███████ Cesium.Color.LIGHTYELLOW ███████ Cesium.Color.LIME ███████ Cesium.Color.LIMEGREEN ███████ Cesium.Color.LINEN ███████ Cesium.Color.MAGENTA ███████ Cesium.Color.MAROON ███████ Cesium.Color.MEDIUMAQUAMARINE ███████ Cesium.Color.MEDIUMBLUE ███████ Cesium.Color.MEDIUMORCHID ███████ Cesium.Color.MEDIUMPURPLE ███████ Cesium.Color.MEDIUMSEAGREEN ███████ Cesium.Color.MEDIUMSLATEBLUE ███████ Cesium.Color.MEDIUMSPRINGGREEN ███████ Cesium.Color.MEDIUMTURQUOISE ███████ Cesium.Color.MEDIUMVIOLETRED ███████ Cesium.Color.MIDNIGHTBLUE ███████ Cesium.Color.MINTCREAM ███████ Cesium.Color.MISTYROSE ███████ Cesium.Color.MOCCASIN ███████ Cesium.Color.NAVAJOWHITE ███████ Cesium.Color.NAVY ███████ Cesium.Color.OLDLACE ███████ Cesium.Color.OLIVE ███████ Cesium.Color.OLIVEDRAB ███████ Cesium.Color.ORANGE ███████ Cesium.Color.ORANGERED ███████ Cesium.Color.ORCHID ███████ Cesium.Color.packedLength ███████ Cesium.Color.PALEGOLDENROD ███████ Cesium.Color.PALEGREEN ███████ Cesium.Color.PALETURQUOISE ███████ Cesium.Color.PALEVIOLETRED ███████ Cesium.Color.PAPAYAWHIP ███████ Cesium.Color.PEACHPUff ███████ Cesium.Color.PERU ███████ Cesium.Color.PINK ███████ Cesium.Color.PLUM ███████ Cesium.Color.POWDERBLUE ███████ Cesium.Color.PURPLE ███████ Cesium.Color.RED ███████ Cesium.Color.ROSYBROWN ███████ Cesium.Color.ROYALBLUE ███████ Cesium.Color.SADDLEBROWN ███████ Cesium.Color.SALMON ███████ Cesium.Color.SANDYBROWN ███████ Cesium.Color.SEAGREEN ███████ Cesium.Color.SEASHELL ███████ Cesium.Color.SIENNA ███████ Cesium.Color.SILVER ███████ Cesium.Color.SKYBLUE ███████ Cesium.Color.SLATEBLUE ███████ Cesium.Color.SLATEGRAY ███████ Cesium.Color.SLATEGREY ███████ Cesium.Color.SNOW ███████ Cesium.Color.SPRINGGREEN ███████ Cesium.Color.STEELBLUE ███████ Cesium.Color.TAN ███████ Cesium.Color.TEAL ███████ Cesium.Color.THISTLE ███████ Cesium.Color.TOMATO ███████ Cesium.Color.TURQUOISE ███████ Cesium.Color.VIOLET ███████ Cesium.Color.WHEAT ███████ Cesium.Color.WHITE ███████ Cesium.Color.WHITESMOKE ███████ Cesium.Color.YELLOW ███████ Cesium.Color.YELLOWGREEN ███████ 2023-01-10 03:23:021

cesium轨迹追踪 本文只实现了轨迹跟踪的方法，加载cesium初始化自行配置，目前推送以定时器实现，实践可以通过websocket推送接收数据，注： timeStep(目标为定值，全局变量，也自行可计算） multiplier（设定播放速度）其他本文中出现的变量如果没有找到初始值，全局自定义即可。 // creatModelDemo() { var that = this // 测试数据 that.trackList = [ { lon: 120, lat: 30 }, { lon: 120.1, lat: 31 }, { lon: 120.2, lat: 29 }, { lon: 120.3, lat: 25 }, { lon: 120.4, lat: 31 }, { lon: 120.5, lat: 27 }, { lon: 120.6, lat: 32 }, { lon: 120.7, lat: 30 }, ] that.start = Cesium.JulianDate.fromDate(new Date(2021, 10, 11, 15)) //开始时间new Date(2021, 10, 11, 15)中国标准时间 // var stop = Cesium.JulianDate.fromDate(new Date(2021, 10, 11, 16)); // that.timeStep = (endTime -startTime)/that.trackList.length-1 //时间间隔 var totalSeconds = that.timeStep * (that.trackList.length - 1) //总时长 var stop = Cesium.JulianDate.addSeconds( that.start, totalSeconds, new Cesium.JulianDate() ) //结束时间 viewer.clock.startTime = that.start.clone() //定义clock开始时间 viewer.clock.currentTime = that.start.clone() //定义clock开始时间 viewer.clock.stopTime = stop.clone() //定义clock结束时间 // 定义动画播放类型 viewer.clock.multiplier = that.multiplier viewer.clock.clockStep = Cesium.ClockStep.TICK_DEPENDENT viewer.clock.clockRange = Cesium.ClockRange.CLAMPED //LOOP_STOP:循环;CLAMPED:到达暂停;UNBOUNDED：到达后退 viewer.clock.shouldAnimate = true //启动动画 // 定义位置状态 that.positionProperty = new Cesium.SampledPositionProperty() // 插值 that.positionProperty.setInterpolationOptions({ interpolationDegree: 1, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, }) // todo function getMidpoint(time, result) { // console.log(that.vehicleEntity.position.getValue(time, result),"获取当前位置") // Get the end position from the polyLine"s callback. var endPoint = that.vehicleEntity.position.getValue(time, result) // console.log(endPoint) var ellipsoid = viewer.scene.globe.ellipsoid // var cartesian3=new Cesium.cartesian3(x,y,z); var cartographic = ellipsoid.cartesianToCartographic(endPoint) var lat = Cesium.Math.toDegrees(cartograhphic.latitude) var lng = Cesium.Math.toDegrees(cartograhpinc.longitude) var alt = cartographic.height // console.log(lat, lng, alt) // endCartographic = Cesium.Cartographic.fromCartesian(endPoint); 2023-01-10 03:23:121

cesium常用方法汇集（工具篇） 1.Scene.prototype.pickPositionWorldCoordinates 根据屏幕坐标获取世界坐标 2，Scene.prototype.pickPosition 根据屏幕坐标获取世界坐标 3，Scene.prototype.drillPick 通过屏幕坐标拾取多个对象 4，Scene.prototype.pickFromRay 通过射线拾取第一个3d对象 5，Scene.prototype.drillPickFromRay 通过射线拾取多个3d对象 6，Scene.prototype.pickFromRayMostDetailed 异步拾取3d对象 7， Scene.prototype.drillPickFromRayMostDetailed 异步拾取多个3d对象 8，Scene.prototype.sampleHeight 根据当前弧度坐标获取3d高度 9，Scene.prototype.clampToHeight 根据当前世界坐标位置获取3d对象 10，Scene.prototype.sampleHeightMostDetailed异步获取当前位置的高度 11，Scene.prototype.clampToHeightMostDetailed 异步获取当前位置的3d对象 12，Scene.prototype.cartesianToCanvasCoordinates 世界坐标转canvas坐标 13，Camera.prototype.pickEllipsoid 根据屏幕坐标返回椭球体坐标或者2维地图上的坐标 14，Camera.prototype.getPickRay 以相机位置为起点，屏幕坐标位置为终点做一条射线 15,Scene.prototype.requestRender 手动场景渲染，每调一次手动触发一次渲染 16，Scene.prototype.forceRender 强制场景进行渲染 17，Scene.prototype.pick 通过屏幕坐标拾取3d对象 18，Camera.prototype.distanceToBoundingSphere 相机到椭球体的距离 19，Camera.prototype.viewBoundingSphere 将相机看向球体中心 20，Camera.prototype.flyToBoundingSphere 飞向球体中心 21，getRectangleCameraCoordinates 通过视图矩形获取相机位置 21，Camera.prototype.computeViewRectangle 返回相机在球体上的可视范围矩形 22，Cesium.Cartesian3.lerp 根据两个点和插值数量进行插值 23.Quaternion.fromAxisAngle 沿某个轴旋转角度之后，返回新的位置，是一个四元数 24，获取视图范围 varRectangle =this.viewer.camera.computeViewRectangle(); 25，获取Zoom this.viewer.camera.moveEnd.addEventListener(this.onMoveendMap);//监听地图移动完成事件onMoveendMap = () => { const me =this;//获取当前相机高度let height = Math.ceil(me.viewer.camera.positionCartographic.height); let zoom = me.heightToZoom(height); 26，Globe.prototype.pick 返回地球上相交的点 27，Globe.prototype.pickWorldCoordinates 返回地球上相交点的坐标 28，Cesium.sampleTerrainMostDetailed(terrainProvider, positions);根据地形求地形上点的高度 29，Globe.prototype.getHeight（cartographic）根据经纬度获取地球上的高度 30,new Cesium.HeadingPitchRoll(Math.PI, Math.PI, Math.PI);设置欧拉角弧度 31，HeadingPitchRoll.fromQuaternion = function (quaternion, result) 从四元数转成欧拉角 32，HeadingPitchRoll.fromDegrees = function (heading, pitch, roll, result) 用经纬度生成欧拉角 33.Plane.projectPointOntoPlane = function (plane, point, result)点到平面的投影 34.Plane.getPointDistance = function (plane, point)点到平面的距离 35.Transforms.eastNorthUpToFixedFrame 传入一个世界坐标，以地球东-北-上方向为参考系生成一个矩阵 36.Transforms.northEastDownToFixedFrame 传入一个世界坐标，以地球北-东-下方向为参考系生成一个矩阵 37.Transforms.headingPitchRollToFixedFrame(origin,headingPitchRoll) 传入一个坐标和欧拉角得到一个矩阵 38.Transforms.headingPitchRollQuaternion(origin,headingPitchRoll) 传入一个坐标和欧拉角得到一个四元数 39.Transforms.fixedFrameToHeadingPitchRoll 传入一个矩阵得到欧拉角 40.SceneTransforms.wgs84ToWindowCoordinates (scene, position, result) 将场景里的某个世界坐标位置转成屏幕坐标 41.SceneTransforms.wgs84ToDrawingBufferCoordinates(scene, position, result) 将场景里的某个世界坐标位置转成换图形缓冲区坐标 42.SceneTransforms.transformWindowToDrawingBuffer(scene,windowPosition,result)将屏幕坐标转换成图形缓冲区坐标 43.SceneTransforms.clipToGLWindowCoordinates(viewport,position,result)将裁剪坐标转成窗口坐标 44.SceneTransforms.drawingBufferToWgs84Coordinates(scene,drawingBufferPosition,depth,result)将缓冲区坐标转成世界坐标 2023-01-10 03:23:281

cesium 绘制primitive流程（三）执行渲染命令过程 我们从下面图片去观察cesium是怎样执行primitive的渲染命令的 1，初始化cesium场景时候会默认执行CesiumWidget类里面的startRenderLoop方法，该方法的作用是调用浏览器requestAnimationFrame方法循环执行widget.render方法进行渲染，我们再看看 CesiumWidget里面的rander方法，这个方法调用了scene.initializeFrame()进行初始化一帧，Clock.tick()方法触发时钟更新当前时间，Scene.render方法进行渲染。我们再看看Scene.render方法该方法大致做了以下几件事，更新帧数，预先更新3dtiles数据，预先更新相机飞行的3dtiles数据，调用render方法等我们看看Scene.render方法，该方法内部调用Scene.updateAndExecuteCommands方法Scene.prototype.updateAndExecuteCommands方法根据frameState.mode变量判断是否是3d场景然后执行executeCommandsInViewport方法渲染视口内的图元，调用Scene类里的executeCommands方法执行绘制命令executeCommands方法内先执行和环境相关的，例如天空盒，太阳，月亮等渲染指令。接着根据遍历视锥体数组，依次执行单个视锥体的渲染命令。先Pass.GLOBE（椭球体），接着Pass.TERRAIN_CLASSIFICATION（贴地形），接着Pass.CESIUM_3D_TILE（3dtiles),Pass.CESIUM_3D_TILE_CLASSIFICATION(贴着3dtiles),接着Pass.CESIUM_3D_TILE_CLASSIFICATION_IGNORE_SHOW,接着Pass.OPAQUE(不透明的），Pass.TRANSLUCENT(透明的），Pass.OVERLAY(遮盖物)然后会触发DrawCommand.prototype.execute方法进入Centext.draw方法该方法先设置帧缓冲区，渲染状态，uniform变量，然后调用beginDraw方法在beginDraw方法绑定帧缓冲区，应用渲染状态（例如开启深度测试，模板测试，混合等），绑定着色程序，并限制最大纹理单元数量。然后执行continueDraw方法设置模型矩阵，设置uniform变量，绑定顶点数组，根据绘制的实例数量和是否有顶点索引来决定使用context._gl.drawElements，context.glDrawElementsInstanced，context._gl.drawArrays，context.glDrawArraysInstanced其中一种方法 2023-01-10 03:23:331

cesium 常用坐标 1.屏幕坐标（像素值） 2.笛卡尔平面坐标 new Cesium.Cartesian2(x,y) 3.笛卡尔空间直角坐标 new Cesium.Cartesian3(x,y,z) 4.地理坐标（默认为弧度值）new Cesium.Cartographic(longitude,latitude,height)1.获取鼠标单击后在屏幕中的坐标 var hander=new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); hander.setInputAction(function(event){ //绑定鼠标左点击事件 var windowPosition=event.position; //鼠标点的windowPosition },Cesium.ScreenSpaceEventType.LEFT_CLICK); 2.屏幕坐标转换为笛卡尔空间直角坐标 //三维模式下 var ray=viewer.camera.getPickRay(windowPosition); var cartesian=viewer.scene.globe.pick(ray,viewer.scene); //二维模式下 var cartesian=scene.camera.pickEllipsoid(position,scene.globe.ellipsoid); 3.笛卡尔空间直角坐标转换为屏幕坐标 var pick=Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian); 4.笛卡尔空间直角坐标转换为地理坐标（弧度制） var cartographic=Cesium.Cartographic.fromCartesian(cartesian) 5.地理坐标（弧度制）转换为笛卡尔空间直角坐标 var position =Cesium.Cartesian3.fromRadians(lng,lat,height) 6.笛卡尔空间直角坐标转化为地理坐标（经纬度） var cartographic=Cesium.Cartographic.fromCartesian(cartesian); var lat=Cesium.Math.toDegrees(cartographic.latitude); var lng =Cesium.Math.toDegrees(cartographic.longitude); var height=cartographic.height; (经纬度度数与弧度互转) Cesium.Math.toRadians(degrees); Cesium.Math.toDegrees(radians); 7.地理坐标（经纬度）转换为笛卡尔空间直角坐标 var position =Cesium.Cartesian3.fromDegrees(long,lat,height); 2023-01-10 03:23:411

cesium获取点击点的经纬度 首先，Cesium 中的坐标可分为两种情况：二维和三维，三维又有地形和模型之分； 1、二维坐标，获取椭球体表面的经纬度坐标： var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(evt) { var cartesian=viewer.camera.pickEllipsoid(evt.position,viewer.scene.globe.ellipsoid); var cartographic=Cesium.Cartographic.fromCartesian(cartesian); var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值 var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值 var mapPosition={x:lng,y:lat,z:cartographic.height};//cartographic.height的值始终为零。 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 2、三维坐标，获取地形表面的经纬度高程坐标：方法一 var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(evt) { var ray=viewer.camera.getPickRay(evt.position); var cartesian=viewer.scene.globe.pick(ray,viewer.scene); var cartographic=Cesium.Cartographic.fromCartesian(cartesian); var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值 var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值 var mapPosition={x:lng,y:lat,z:cartographic.height};//cartographic.height的值为地形高度。 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 方法二 var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(evt) { var ray=viewer.camera.getPickRay(evt.position); var cartesian=viewer.scene.globe.pick(ray,viewer.scene); var cartographic=Cesium.Cartographic.fromCartesian(cartesian); var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值 var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值 //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。 var height=viewer.scene.globe.getHeight(cartographic); var mapPosition={x:lng,y:lat,z:height.height};//height的值为地形高度。 }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 3、三维坐标，获取模型表面的经纬度高程坐标（此方法借鉴于官方示例）： var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function(evt) { var scene = viewer.scene; if (scene.mode !== Cesium.SceneMode.MORPHING) { var pickedObject = scene.pick(evt.position); if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.node) { var cartesian = viewer.scene.pickPosition(evt.position); if (Cesium.defined(cartesian)) { var cartographic = Cesium.Cartographic.fromCartesian(cartesian); var lng = Cesium.Math.toDegrees(cartographic.longitude); var lat = Cesium.Math.toDegrees(cartographic.latitude); var height = cartographic.height;//模型高度 mapPosition={x:lng,y:lat,z:height} } } } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 2023-01-10 03:23:471

cesium 设置和移动camera相机（工具篇） 1，相机的移动使用move方法可以朝一个方向移动特定的距离，单位为米。相机移动时位置会发生变化，相机的朝向不变移动方法：Camera.prototype.move = function (direction, amount) 相机向前移动：moveForward(amount) amount步长：米相机向后移动:moveBackward(amount) amount步长：米相机向上移动：moveUp(amount) amount步长：米相机向下移动：moveDown(amount) amount步长：米相机向左移动：moveLeft(amount) amount步长：米相机向右移动：moveRight(amount) amount步长：米 2，相机在固定位置的旋转方法：Camera.prototype.look = function (axis, angle) 实现原理是给定一个旋转轴和角度，用于四元数计算，然后根据四元数求得旋转矩阵，再根据旋转矩阵更新direction，up，right方向相机向左看：.lookLeft(amount) amount弧度相机向右看：.lookRight(amount) amount弧度相机向上看：.lookUp(amount) amount弧度相机向下看：.lookDown(amount) amount弧度朝前方向逆时针旋转相机：.twistLeft(amount) amount弧度朝前方向顺时针旋转相机：.twisRight(amount) amount弧度 2023-01-10 03:23:521

Cesium实现视频影像融合 cesium中可以将video标签作为材质赋予实体，实体贴地后会覆盖模型表面，达到视频影像融合的效果。 html video标签所支持的视频文件编码格式如下展示效果： 2023-01-10 03:23:571

Cesium中的视角锁定 笔记： 1、当添加一个entity对象后，我们双击entity对象，可以对对象进行定位，并且视角也会锁定到这个entity对象上，当需要取消锁定时，我们可以直接设置viewer.trackedEntity =undefined;即可取消视角锁定。 2、当对当前场景使用viewer.camera.lookAt系列方法后，视角也会锁定到设定参数。可以设置viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY) ，取消lookat的视角锁定 2023-01-10 03:24:081

Cesium中的CZML文件结构解析 本文在官方介绍基础上简化总结而成 CZML 可以理解为 Cesium Language 的简写，是cesium中很重要的一个概念，使得cesium很酷很炫地展示动态数据成为可能某种程度上说, Cesium 和 CZML的关系就像 Google Earth 和 KML。一段示例：在上面的示例中，我们指定了“ GroundControlStation”对象在WGS 84经度-75.5度，纬度40.0度和高度0.0米处具有固定的位置，并在其位置绘制了一个蓝色的Point。每个数据包都有一个id属性，用于标识正在描述的对象。 ID不必是GUID，但它们确实需要唯一地标识CZML源中的单个对象以及加载到同一作用域中的任何其他CZML源。如果未指定ID，客户端将自动生成一个唯一的ID。但是，这会阻止以后的数据包引用该对象，以便例如向该对象添加更多数据。定义某个属性在不同时间间隔内的值时，将该属性定义为一个数组，并用 interval 属性定义在不同时间段的值。这个示例中，在两个时间间隔内定义someProperty属性，第一个时间间隔是中午12：00到1:00 PM（属性值是5），第二个时间间隔是1:00 PM到2:00 PM UTC（属性值是6），跨越两个间隔之间的边界时，该值将立即更改。我们使用数字来表示值，因为这是一个数字类型的属性。一些属性（尤其是表示位置的属性）允许以多种格式指定值，例如笛卡尔X，Y，Z位置或制图经度，纬度，高度位置。每种类型的页面列出了每种属性支持的数据类型，以及每种属性所使用的值名称。 interval属性是可选的。如果未指定，则假定该间隔跨越所有时间。指定多个无限间隔或通常重叠的间隔没有多大意义，但是如果您指定了此间隔，则在CZML文件或流中的后面一个优先。如果属性的值在一个长间隔上不变，则只需定义一个，间隔数组可以省略。如果所有时间内，值都不变，则可简写为：该缩写表示法对于其值可以用一种简单的JSON数据类型（字符串，数字或布尔值）表示的任何属性均有效。用JSON数组来表示更复杂的复合值，例如笛卡尔位置或颜色。对于笛卡尔位置，数组具有三个元素，分别对应于该位置的X，Y和Z分量。除了上面介绍的可以定义不同时间间隔的单一值和复合值，还可以定义不同时间点的采样值，客户端会根据这些值进行插值计算，补上没有赋值的时间的数据。注意时间使用ISO 8601字符串指定。这个示例定义了三个时间点的坐标，则后续时间的值会根据这三个值线性插值计算得出。这个也可以简写，定义一个开始时间，数据默认以整秒递增，例如：另外，可以用其他属性控制插值方式 interpolationAlgorithm 属性可选值： "LINEAR", "LAGRANGE", and "HERMITE". interpolationDegree 属性可选值：1表示线性差值，2表示二次插值法将整个CZML文档放在一个大JSON数组中，将很难以增量方式加载该文档。当今的网络浏览器允许在流完成之前对流进行一些访问，但是解析和解释不完整的数据需要缓慢而麻烦的字符串操作。为了促进高性能流传输，还可以使用现代浏览器的服务器发送事件（EventSource）API来流传输CZML。使用此API时，每个CZML数据包都作为单独的事件流传输到客户端：当浏览器接收到一个packet后就会发出一个事件，事件中会包含刚刚接收到了数据。这样我们就可以通过增量的方式高效的处理CZML数据。目前为止，我们都是使用一个packet包来描述一个对象，这个packet包含了所有这个对象的图形属性。我们还可以使用其他的方式，例如一个CZML文件或流可以包含多个packet，每个packet都有相同的id，分别描述同一个对象的不同方面的属性。事实上在大多数情况下我们使用两个packet来描述一个对象。当对象属性跨越多个时间间隔，或者一个时间间隔有很多个时间戳采样时，这样做就很有用了。通过将一个属性定义打包进多个packet，我们可以使数据更快的传输到Cesium中，减少用户等待的时间。当客户端接收到一个packet，它会遍历packet中的每一个属性。对于每个属性，它会遍历属性定义的每个时间间隔。对于每个时间间隔，它会判断这个时间间隔是否已经定义，假如这个间隔已经定义，将更新已经存在的间隔，如果没有定义，那么就根据这个间隔创建一个新的。当更新一个已存在的时间间隔时，假如有子属性，那么子属性将覆盖原有的值。有一个例外，就是当已有的属性和新接收到的属性都包含时间戳采样时，新接收到的采样不会覆盖已有的，而是加到已有的采样列表中。当新的时间间隔与已有的发生重叠时，新的间隔拥有较高优先级，原有的间隔将被截断或者整个移除。这点必须要牢记。在同一个packet中的时间间隔的时间必须以增序排列，不同packet之间就没有要求。但是对于不连续的采样还是应该考虑合理的插值顺序。如果定义的两个时间段之间时间没有连接上，比如1-3，7-9，中间4-6时间的数据是插值还是空着呢？就用到 previousTime 和 nextTime 属性了 Availability属性指示对象的数据何时可用。如果已知某个对象的数据在当前动画时间可用，但是客户端尚未获得该数据（大概是因为它将在以后的数据包中到达），则客户端可以暂停并显示诸如“正在缓冲...等待接收数据。该属性可以是指定单个间隔的单个字符串，也可以是表示间隔的字符串数组。假如availability变化了或者被发现是不正确的，那么随后的packet将会更新它的值。例如，一个SGP4 propagator可能总是可用的，但是随后他发出了一个异常，所以他的值需要调整。如果availability属性没有定义，那么默认是全部时间内都可用的。Availability的范围被限定到一个特定的CZML流中，所以对同一个对象在两个不同的流中可以有不同的availability。在一个流中，只有定义在最后的那个availability起作用，其他的都会被忽略。在某一时刻，如果一个对象是可用的，那么这个对象至少要有一个可用的属性并且在此时间段内需要的属性都要有定义（也就是获取到了数据），不然Cesium就会等待数据直到接收到数据为止。可以给CZML增加自定义属性，但是为避免冲突，我们强烈建议你给你的自定义属性加上你特有的前缀。 2023-01-10 03:24:131

Cesium实战项目1.点线面实体绘制 Cesium点线面绘制是很基本的功能，数据采集类型的系统必须具备此功能。但是Cesium并没有提供相关可以直接使用的绘制方法，只能自己进行封装，虽然实现起来不是很难，但是对Cesium不太熟的同学还是比较麻烦的。在Cesium中，虽然没有提供鼠标交互绘制的相关类，但是我们可以通过监听鼠标点击事件，获取点击点坐标串，这样就能够实现鼠标交互绘制的功能。Cesium中的ScreenSpaceEventHandler类提供鼠标各种事件，如鼠标左键点击，鼠标右键点击等。我们只需构建此对象，监听鼠标左键点击事件、鼠标移动事件，鼠标右键事件，即可实现绘制功能。获取方式 Cesium实战项目 2023-01-10 03:24:181

cesium 卫星扫过哪里显示地球上的图片一部分 扫过地球表面可以显示地球上图片的一部分。cesium卫星只要经过地球并且能够扫描到地球表面，它就可以传回扫描到的地球上的部分图片。Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品，它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 2023-01-10 03:24:231

Cesium开发入门篇 | 05Cesium API结构介绍 在实际的开发过程中，基本上会用到上图所示的Cesium API中各个类，我们可以把它按照以下分类进行记忆。 imageryLayers 影像数据 terrainProvider 地形数据 dataSources 矢量数据 entities 几何实体集合（用于空间数据可视化） Widgets 组件，即Viewer初始化界面上的组件 Camera 相机 Event 事件，鼠标事件、实体选中事件等 primitives 图元集合（几何体和外观） postProcessStages 场景后期处理环境对象，大气圈、天空盒、太阳、月亮等 Event事件，更新、渲染事件等 Camera类属性位置、方位角、俯仰角、翻滚角三维矩阵、四元数、四维矩阵、转换等 2023-01-10 03:24:281

cesium 卫星扫过哪里显示地球上的图片一部分 地球表面。cesium卫星只要经过地球并且能够扫描到地球表面，它就可以传回扫描到的地球上的部分图片。Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品，它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。 2023-01-10 03:24:371

Cesium可以加载百度地图吗 我的实践是 React + JQuery 先把页面拆分成足够小的模块，比如列表项，比如菜单项。然后一层层包装成组件，元素，页面等等。你可以在之前设置好id啥的，绑定事件啥的也都没问题。 React自己有单向数据流，控制好数据更新也基本没啥问题。 2023-01-10 03:24:423

cesium 地球支持手机访问么 ml5就可以运行。甚至部分手机浏览器都可以运行。首先，对Cesium进行本地的部署（可以用node.js,tomcat,vs2010,iis.eclipse等IDE进行部署，我选用的是最简单的vs）：（1）下载Cesium进入其官 2023-01-10 03:25:011

Cesium实战项目 本人所学GIS专业，毕业后一直从事Cesium相关的GIS开发工作，在业余时间将Ceium中常用的一些功能进行封装，形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目，紧贴业务特性，实用性强，能够在最大程度上帮助个人、团队、公司、企业提高工作效率，节省开发成本。 Cesium实战项目目前共111个实例（后面会继续增加），项目基于Cesium1.7.2+VUE 实现，现有实例如下：基础底图 1.ArcGIS在线底图 2.谷歌在线底图 3.高德在线底图 4.天地图在线底图 5.本地单张图片点状对象 6.Cesium点聚合1 7.Cesium点聚合2 8.Billboard加载Gif图片 9.Cesium 闪烁点 10.Primitives加载大量图标点 11.div文本点 12.动态效果点 13.图标点+文字(primitive方式) 单体化 14.倾斜模型分栋单体化（基于geoserver） 15.倾斜模型分层单体化（基于geoserver）含教程 16.倾斜模型分户单体化（基于geoserver）含教程编辑绘制 17.点线面绘制 18.点线面编辑 19.点线面绘制扩展 20.点线面编辑扩展自定义信息框 21.多字段自适应信息框 22.气泡窗口样式1 23.气泡窗口样式2 标注标绘 24.自定义html标注图层 25.军事标绘 26.军事标绘编辑 27.gltf 标绘绘制 28.gltf 标绘编辑 29.行政区标注 30.体对象绘制编辑轨迹漫游 31.轨迹回放 32.跟随视角漫游 33.第一人称漫游 34.上帝视角漫游分析 35.Cesium 2维点转3维点 36.Cesium 空间线段等分 37.地表透明（地下模式） 38.通视分析 39.可视域分析 40.缓冲区分析 41.地表开挖（材质贴图） 42.地形开挖（材质贴图） 43.模型裁剪（Planes） 44.矿区岩层效果 45.双屏对比 46.二三维联动（基于openlayers) 场景 47.场景出图（导出图片） 48.自定义天空盒 49.位置信息状态栏控件 50.雨雪雾天气效果 51.限定视角范围 52.绘制反选遮罩 53.自定义空间背景 54.宏观数字地球 55.鹰眼地图（基于openlayers） 56.导航控件 57.云层 58.Tooltip鼠标移入信息 59.书签管理 60.旋转的地球 61.绕点旋转 62.场景泛光工具 63.场景测量工具 64.鼠标位置拾取工具特效 65.动态线、流动线 66.流向动态线 67.动态水面效果 68.动态扩散圆 69.动态立体墙 70.粒子系统 71.圆形波纹效果 72.矢量白膜自定义shader（不改源码） 73.光晕线 74.动态立体墙（升级） 75.圆形、规则多边形动态围墙 76.围墙扩散动画 77.光柱椎体 78.数字工厂 79.六边形扩散扫描 80.圆形扩散扫描 81.模型热力图 82.动态传输线 83.扫描线行业应用 84.雷达扫描效果 85.雷达追踪圆锥体 86.雷达追踪四棱锥体 87.雷达遮罩扫描 88.相控阵雷达范围 89.雷达放射波 90.卫星视椎体（四棱锥体） 91.视频贴图参数调整 92.视频融合 93.目标跟踪 94.动态目标检测 95.视频窗口（普通视频） 96.视频窗口（rtmp视频） 97.视频墙（含编辑） 98.动态水域 99.水闸放水效果 Echarts可视化支持 100.Echarts 迁徙图1 101.Echarts 迁徙图2 102.Echarts 散点图 103.Echarts 流入线 104.Echarts 流出线 MapV可视化支持 105.MapV 迁徙图 106.MapV 大迁徙图 107.MapV 热力图 108.MapV 强边界图其他 109.3dtiles高度调整 110.文字贴图 111.热力图（基于heatmap.js插件）在线预览地址在线预览地址用户名cesium 密码cesium@sz 2023-01-10 03:25:061

Cesium.js禁止三维球鼠标旋转、缩放、鼠标中键拖动 // 如果为真，则允许用户旋转相机。如果为假，相机将锁定到当前标题。此标志仅适用于2D和3D。(可以理解为禁用鼠标左键旋转地球) scene.screenSpaceCameraController.enableRotate = false; // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离 scene.screenSpaceCameraController.enableZoom = false;(可以理解为禁用鼠标右键缩放地球) // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。（可以理解为禁用鼠标中键拖动地球） scene.screenSpaceCameraController.enableTilt = false 2023-01-10 03:25:111

Cesium快速上手10-Viewer Entities组合 Viewer/Entities的作用：方便创建直观的对象，同时做到性能优化（billboard、point等）提供一些方便使用的函数：flyTo/zoomTo 赋予Entity对象时间这个属性，对象具备动态特性/Primitive不具备提供一些UI（homeButton/sceneModePicker/projectionPicker/baseLayerPicker) 大量的快捷方式，camera等未必是好事。。 Datasource模式来加载大规模数据：Geojson Datasource结构 Entities是一个快捷方式，其实返回的是viewer.dataSourceDisplay.defaultDatasource.entities ; Entity结构 var viewer = new Cesium.Viewer("cesiumContainer"); 示例可参考 Geometries http://localhost:8080/Apps/Sandcastle/index.html?src=Box.html&label=Geometries box 就是立方体 cylinder 是圆锥圆柱 http://localhost:8080/Apps/Sandcastle/index.html?src=Cylinders%20and%20Cones.html&label=Geometries topRadius = bottomRadius 是圆柱 topRadius=0， bottomRadius 大于0 是圆锥 Entity Cesium.EntityCollection 每一个Datasource都挂在Entity下； http://localhost:8080/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=DataSources http://localhost:8080/Apps/Sandcastle/index.html?src=GeoJSON%20simplestyle.html&label=DataSources http://localhost:8080/Apps/Sandcastle/index.html?src=Custom%20DataSource.html&label=DataSources 2023-01-10 03:25:271

Cesium在js中调用entity的infobox单机事件 第步创建静态页面von.html并引入vue.js关键核js文件第二步主题元素插入div标签元素并其插入input输入框按钮利用v-on指令绑定点击事件queryDate第三步div标签编写vue.js点击事件事件获取前期第四步让输入框按钮间距设置body元素第五步预览该静态 2023-01-10 03:25:321

Cesium流动线纹理

注:流动效果使用的图片是渐进色1.扩展类PolylineTrailMaterialProperty (Cesium 1.67-1.68) import Cesium from "cesium/Cesium"; export class PolylineTrailMaterialProperty { constructor(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = undefined; this.color = options.color; this.duration = options.duration; this.trailImage = options.trailImage; this._time = performance.now(); } } Cesium.defineProperties(PolylineTrailMaterialProperty.prototype, { isConstant: { get: function() { return false; } }, definitionChanged: { get: function() { return this._definitionChanged; } }, color: Cesium.createPropertyDescriptor("color") }); PolylineTrailMaterialProperty.prototype.getType = function(time) { return "PolylineTrail"; } PolylineTrailMaterialProperty.prototype.getValue = function(time, result) { if (!Cesium.defined(result)) { result = {}; } result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color); //result.image = Cesium.Material.PolylineTrailImage; result.image = this.trailImage; result.time = ((performance.now() - this._time) % this.duration) / this.duration; return result; } PolylineTrailMaterialProperty.prototype.equals = function(other) { return this === other || (other instanceof PolylineTrailMaterialProperty && Cesium.Property.equals(this._color, other._color)) } Cesium.Material.PolylineTrailType = "PolylineTrail"; Cesium.Material.PolylineTrailImage = "images/colors.png"; Cesium.Material.PolylineTrailSource = "czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t)); material.alpha = colorImage.a * color.a; material.diffuse = (colorImage.rgb+color.rgb)/2.0; return material; }"; Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailType, { fabric: { type: Cesium.Material.PolylineTrailType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), image: Cesium.Material.PolylineTrailImage, time: 0 }, source: Cesium.Material.PolylineTrailSource }, translucent: function(material) { return true; } }); Cesium.PolylineTrailMaterialProperty = PolylineTrailMaterialProperty; 2.使用 <template> <div class="fullSize" id="cesiumContainer"></div> </template> <script> import "cesium/Widgets/widgets.css"; import Cesium from "cesium/Cesium"; import CesiumFactory from "@/js/cesium/CesiumFactory"; import PolylineTrailMaterialProperty from "@/js/cesium/overlay/PolylineTrailMaterialProperty"; export default { name: "CesiumDynamicLine1", data() { return { viewer: null }; }, mounted() { const factory = new CesiumFactory(); this.viewer = factory.getViewer(); this.create(); }, methods: { create() { //创建射线 var data = { center: { id: 0, lon: 114.302312702, lat: 30.598026044, size: 20, color: Cesium.Color.PURPLE }, points: [ { id: 1, lon: 115.028495718, lat: 30.200814617, color: Cesium.Color.YELLOW, size: 15 }, { id: 2, lon: 110.795000473, lat: 32.638540762, color: Cesium.Color.RED, size: 15 }, { id: 3, lon: 111.267729446, lat: 30.698151246, color: Cesium.Color.BLUE, size: 15 }, { id: 4, lon: 112.126643144, lat: 32.058588576, color: Cesium.Color.GREEN, size: 15 }, { id: 5, lon: 114.885884938, lat: 30.395401912, color: Cesium.Color.BLUE, size: 15 }, { id: 6, lon: 112.190419415, lat: 31.043949588, color: Cesium.Color.BLUE, size: 15 }, { id: 7, lon: 113.903569642, lat: 30.93205405, color: Cesium.Color.BLUE, size: 15 }, { id: 8, lon: 112.226648859, lat: 30.367904255, color: Cesium.Color.BLUE, size: 15 }, { id: 9, lon: 114.86171677, lat: 30.468634833, color: Cesium.Color.BLUE, size: 15 }, { id: 10, lon: 114.317846048, lat: 29.848946148, color: Cesium.Color.BLUE, size: 15 }, { id: 11, lon: 113.371985426, lat: 31.70498833, color: Cesium.Color.BLUE, size: 15 }, { id: 12, lon: 109.468884533, lat: 30.289012191, color: Cesium.Color.BLUE, size: 15 }, { id: 13, lon: 113.414585069, lat: 30.368350431, color: Cesium.Color.SALMON, size: 15 }, { id: 14, lon: 112.892742589, lat: 30.409306203, color: Cesium.Color.WHITE, size: 15 }, { id: 15, lon: 113.16085371, lat: 30.667483468, color: Cesium.Color.SALMON, size: 15 }, { id: 16, lon: 110.670643354, lat: 31.74854078, color: Cesium.Color.PINK, size: 15 } ], options: { name: "", polyline: { width: 2, material: [Cesium.Color.GREEN, 3000] } } }; this.createFlyLines(data); }, createFlyLines(data) { const center = data.center; const cities = data.points; const startPoint = Cesium.Cartesian3.fromDegrees( center.lon, center.lat, 0 ); //中心点 this.viewer.entities.add({ position: startPoint, point: { pixelSize: center.size, color: center.color } }); //大批量操作时，临时禁用事件可以提高性能 this.viewer.entities.suspendEvents(); //散点 cities.map(city => { let material = new Cesium.PolylineTrailMaterialProperty({ color: Cesium.Color.GREEN, duration: 3000, trailImage: "images/colors1.png" }); const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0); this.viewer.entities.add({ position: endPoint, point: { pixelSize: city.size - 10, color: city.color } }); this.viewer.entities.add({ polyline: { positions: this.generateCurve(startPoint, endPoint), width: 2, material: material } }); }); this.viewer.entities.resumeEvents(); this.viewer.flyTo(this.viewer.entities); }, /** * 生成流动曲线 * @param startPoint 起点 * @param endPoint 终点 * @returns {Array} */ generateCurve(startPoint, endPoint) { let addPointCartesian = new Cesium.Cartesian3(); Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian); let midPointCartesian = new Cesium.Cartesian3(); Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian); let midPointCartographic = Cesium.Cartographic.fromCartesian( midPointCartesian ); midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 5; let midPoint = new Cesium.Cartesian3(); Cesium.Ellipsoid.WGS84.cartographicToCartesian( midPointCartographic, midPoint ); let spline = new Cesium.CatmullRomSpline({ times: [0.0, 0.5, 1.0], points: [startPoint, midPoint, endPoint] }); let curvePoints = []; for (let i = 0, len = 200; i < len; i++) { curvePoints.push(spline.evaluate(i / len)); } return curvePoints; } } }; </script> <style lang="scss" > </style>

2023-01-10 03:26:121

使用Cesium框架实现全景图 最近几日由于工作中需要把全景图加载到三维场景中，之前网上搜索过，做过的都是结合其他框架来实现，如PhotoSphereViewer。但是当我们需要在Cesium做的项目中，来做数据显示增强的时候（如：点云和全景图叠合）就显得力不从心了，毕竟PhotoSphereViewer是基于threejs来实现的，需要一起来显示的时候就需要控制Cesium的相机和threejs的相机。因此为了更加有效的实现Cesium中场景与全景图完美叠合，就需要Cesium加载全景图。可能我说的叠合有点抽象，那么我用一张图来解释一下。和点云数据叠合有个好处就是点云数据拉近看的时候，点云比较稀疏看不清形状，这个时候结合全景图，就能更加清晰的呈现出模型本身。那么如何实现cesium中加载全景图呢？其实很简单，总结为如下几步： 1、使用EllipsoidGeometry绘制一个球 2、给这个球贴上纹理，由于我们贴的时候一般都贴到球的表面，但是我们看的时候视角是从球里面往外面看的，所以需要对纹理做一个反转 3、固定相机位置为球的中心点，这样就可以绕着这个点往四周看了我这里把使用的贴纹理的shader贴出来供大家参考：最后附一张叠合的效果图： 2023-01-10 03:27:151

cesium求垂直向量 先说下原理及步骤：1、建立空间向量CA、CB向量2、计算CB向量的单位向量。3、计算向量的夹角。4、计算CA向量在CB向量上投影的长度。5、计算出D点坐标 2023-01-10 03:27:331

cesium 影像图层 ImageryLayer Cesium支持多种服务来源的高精度影像地图数据的加载和渲染。图层支持排序和透明混合。每个图层的亮度（brightness），对比度（contrast），gamma，hue，and saturation都可以动态修改。可以在Viewer构造时传参进行设置 baseLayerPicker 底图图层控件显隐 imageryProviderViewModels 可选底图图组（baseLayerPicker：true） terrainProviderViewModels 可选地形组（baseLayerPicker：true） imageryProvider 底图设置（baseLayerPicker：false） terrainProvider 地形设置（baseLayerPicker：false）在地球构造后可通过viewer.scene.imageryLayers(ImageryLayerCollection类)来控制 2023-01-10 03:27:381

关于Cesium地图点击不准的问题 出现这问题我遇到的一般有两种原因参考博客： Cesium的拾取问题总结解决办法： viewer.scene.globe.depthTestAgainstTerrain = true; //默认为false 之前网站的时候自适应用了translate缩放，没有用rem导致cesium点击的时候，根据屏幕坐标获取的经纬度不准，拿不到点信息，后来把屏幕坐标打印出来就发现原因，虽然页面是缩放了，但是屏幕坐标还是页面原本的信息，所以对应不上，要把获取到的屏幕坐标根据缩放比例进行换算，再去获取经纬度例子如下： 2023-01-10 03:27:431

Cesium绘制点、线、面、圆、矩形 本文基于《基于Webpack的Cesium+Vue应用》文章，在此基础之上，进行功能的扩展。本文主要讲解如何在Cesium三维球上用鼠标绘制点、线、面、矩形。 2023-01-10 03:27:511

ol-cesiumworldwind 和cesium的区别 ol-cesium是基于OpenLayers（3以上版本）和Cesium（Web 3D GIS框架）的框架，可以快速实现二三维联动（如现有ol的地图对象可以直接转换到三维上显示，栅格图层和矢量图层数据同时会显示到三维球上）。worldwind历史比较久的GIS三维球框架，以前的worldwind是C#版，现已不维护了，目前worldwind提供JAVA和JavaScript版本，JavaScript版本发展比JAVA较慢，还不太成熟，JavaScript版本没有Cesium那么受欢迎，个人感觉代码结构比较乱。cesium是全新基于HTML5的WebGL发展起来的GIS三维球框架，纯JavaScript框架，目前在开源 3D GIS的Web框架中处于领先地位，发展比较快，开发团队实力雄厚。 2023-01-10 03:27:561

cesium如何搭建dat.gui 一.引入js 文件<script type="text/javascript" src="https://raw.github.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>二.初始化配置var Options = function() { this.message = "dat.gui"; this.speed = 0.8; this.displayOutline = false; this.button = function() {}; }; window.onload = function() { var options = new Options(); var gui = new dat.GUI(); gui.add(options, "message"); gui.add(options, "speed", -5, 5); gui.add(options, "displayOutline"); gui.add(options, "button"); }; 这里，在你的配置项：FizzyText 里，GUI 会根据你设置的属性类型来渲染不同的控件如果是Number 类型则用 slider来控制如果是 Boolean 类型，则用 Checkbox来控制如果是 Function 类型则用 button 来控制如果是 String 类型则用 input 来控制 2023-01-10 03:28:132

Cesium 3Dtiles模型多边形裁剪简单整理 快三年了，在写了四篇文章，关于Cesium的基本都是水一下，不是不想写，一是没时间，二来确实比较懒，关于Cesium已经一年多没有看过了，最多也就关注一下官网的更新内容，对于Cesium深入了解还真没有下功夫。最近公司业务调整，手头的业务也停掉了，只剩下维护了，也没有继续待着的意义了，趁着换工作的空，整理一下以前抄过、请教过、写过的一些东西吧，不确定能写多少，就简单记录一下吧。 Ceisum本身有一个clipPlane可以进行裁剪，但是不支持多边形裁剪，想要支持多边形裁剪也要费一番功夫。多边形裁剪的主要原理：一、构造裁剪多边形；二、将构造多边形的定点归化到模型局部坐标系，并获取模型Rectangle，记录并传递给片元着色器；三、将多边形渲染到到一张构造的纹理上，给多边形一个绘制的颜色，并将纹理赋值给片元着色器；四、在顶点着色器中把从attribute获取到的定点传递给片元着色器，如 gl_Position = czm_projection*u_modelViewMatrix* viewPos; //投影矩阵*模型视图矩阵*顶点坐标中的viewPos.xyz; 五、在片元着色器中，根据（四）中传递过来的顶点，判定该顶点是否在（二）中的rectangle中，若在，则计算该顶点在（三）中纹理的uv坐标，用texture2D（texture，uv）获取当前顶点的color值，若不为空，则继续，若为空则discard并返回。通过以上步骤就可以实现以多边形为边界的模型裁剪。 2023-01-10 03:28:211

cesium实现3D历史轨迹播放 这个是我根据API及示例整理的历史轨迹播放的demo，其中重要的参数都做了注释，可以直接粘贴到cesium的模拟其中验证或做修改 //设定模拟时间的界限 var start = Cesium.JulianDate.fromDate(new Date(2021, 3, 2, 23,50,20));//朱利安时间=UTC=北京时间-8 2021-03-02 15：50：20 var stop = Cesium.JulianDate.fromDate(new Date(2021, 3, 2, 23,56,20)); //确保查看器在想要的时间 viewer.clock.startTime = start.clone(); viewer.clock.stopTime = stop.clone(); viewer.clock.currentTime = start.clone(); viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; //达到终止时间后停止，LOOP_STOP：达到终止时间后重新循环，UNBOUNDED：达到终止时间后继续读秒 viewer.clock.multiplier = 10;//初始运行速度 //将时间轴设置为模拟边界 viewer.timeline.zoomTo(start, stop); //生成一个一条线 function computeCirclularFlight() { var property = new Cesium.SampledPositionProperty(); var dataSource = [{ "id":1, "time":new Date(2021, 3, 2, 23,50,20), "lng":120.43413519859315, "lat":30.238649673375463, },{ "id":2, "time":new Date(2021, 3, 2, 23,51,20), "lng":120.4343605041504, "lat":30.23831135356134, },{ "id":3, "time":new Date(2021, 3, 2, 23,52,20), "lng":120.43460726737977, "lat":30.237908148974306, },{ "id":4, "time":new Date(2021, 3, 2, 23,53,20), "lng":120.43478429317476, "lat":30.237602268529127, },{ "id":5, "time":new Date(2021, 3, 2, 23,54,20), "lng":120.4349720478058, "lat":30.237282483409622, },{ "id":6, "time":new Date(2021, 3, 2, 23,55,20), "lng":120.4351720478058, "lat":30.236882483409622, },{ "id":7, "time":new Date(2021, 3, 2, 23,56,20), "lng":120.4353720478058, "lat":30.236482483409622, } ]; for (var i = 0; i < 7; i ++) { var time = Cesium.JulianDate.fromDate(dataSource[i].time);//每个点对应的时间 var position = Cesium.Cartesian3.fromDegrees(dataSource[i].lng,dataSource[i].lat,100); property.addSample(time, position); } return property; } //Compute the entity position property. var position = computeCirclularFlight(); //Actually create the entity var entity = viewer.entities.add({ //Set the entity availability to the same interval as the simulation time. availability: new Cesium.TimeIntervalCollection([ new Cesium.TimeInterval({ start: start, stop: stop, }), ]), //Use our computed positions position: position, //Automatically compute orientation based on position movement. orientation: new Cesium.VelocityOrientationProperty(position), //Load the Cesium plane model to represent the entity model: { uri: "../SampleData/models/CesiumAir/Cesium_Air.glb",//模型地址 minimumPixelSize: 64, }, //Show the path as a pink line sampled in 1 second increments. path: { resolution: 1, material: new Cesium.PolylineGlowMaterialProperty({ glowPower: 0.1, color: Cesium.Color.YELLOW, }), width: 10, }, }); //添加按钮从顶部查看路径 Sandcastle.addDefaultToolbarButton("View Top Down", function () { viewer.trackedEntity = undefined; viewer.zoomTo( viewer.entities, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)) ); }); //添加按钮从侧面查看路径 Sandcastle.addToolbarButton("View Side", function () { viewer.trackedEntity = undefined; viewer.zoomTo( viewer.entities, new Cesium.HeadingPitchRange( Cesium.Math.toRadians(-90), Cesium.Math.toRadians(-15), 7500 ) ); }); //添加按钮来跟踪实体的移动 Sandcastle.addToolbarButton("View Aircraft", function () { viewer.trackedEntity = entity; }); //添加一个组合框来选择每个插值模式. Sandcastle.addToolbarMenu( [ { text: "Interpolation: Linear Approximation", onselect: function () { entity.position.setInterpolationOptions({ interpolationDegree: 1, interpolationAlgorithm: Cesium.LinearApproximation, }); }, }, { text: "Interpolation: Lagrange Polynomial Approximation", onselect: function () { entity.position.setInterpolationOptions({ interpolationDegree: 5, interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, }); }, }, { text: "Interpolation: Hermite Polynomial Approximation", onselect: function () { entity.position.setInterpolationOptions({ interpolationDegree: 2, interpolationAlgorithm: Cesium.HermitePolynomialApproximation, }); }, }, ], "interpolationMenu" ); 2023-01-10 03:29:031

Cesium合并Primitive cesium提供了两种方式添加实体，分别是entity与primitive。如果是多个实体，我们可以将其合并为一个大Geometry，这样可以大大减轻CPU负担，从而更好的使用GPU。绘制效果： 2023-01-10 03:29:081

使用ContextCapture生成Cesium所需的3dtile 本文简述了使用ContextCapture 4.4生成Cesium的3d tiles的过程。 Windows10 64位,GTX1050Ti ContextCapture 4.4.7 巴黎某街区的无人机相片与控制点按照 ContextCapture 软件的说明，一步步调整数据参数，进行三维模型的重建，此处操作详见软件操作说明；模型生成时选择Cesium 3DTiles格式，等待程序生成即可 2023-01-10 03:29:141

[原创.数据可视化系列之十七]cesium地下管线和挖坑问题 开源的3d gis cesium显示地下管线和一直是一个缺陷，从push ground plugin不更新之后，很久都没有比较好的解决方案，年初，作者征求意见的时候很多人都提出需要做地下的显示。最近，项目做了一个更好的内容。那就是clippanle。这个可以切割任何内容的对象。可以通过切割地形，形成一个空间，然后把这个空间用box填充，形成一个可以凹陷的地下管线。这个比最初的push ground plugin更进一步，是一个很好地解决方案。结果如下图： 2023-01-10 03:29:301

Vue 引入 Cesium 碰到的大坑 如果使用 npm 包安装和使用 Cesium 的话通常会在 vue.config.js 里配置：这样去引入 Cesium 项目所需的依赖，资源是没有问题的，问题在于当需要用到 Cesium 变量的时候需要去引用 node_module/cesium/Source 下的 Cesium.js，用这种方式引入源码才不会在使用 Cesium 变量时出现各种各样奇怪的报错。 2023-01-10 03:29:361

基于webpack搭建cesium+vue应用 Cesium是一个跨平台、跨浏览器的展示三维地球和地图的js库。 Cesium使用WebGL来进行硬件加速图形，使用时不需要任何的插件支持，但是浏览器必须支持WebGL。（webgl web graphic library 是一种3D绘图协议，他允许将js和opengl es 2.0结合在一起，） Cesium是基于Apache2.0许可的开源软件。 Cesium能做什么？ 1、支持2D、2.5D、3D形式的地图展示 2、可以绘制各种几何图形、高亮区域，支持导入图片，甚至3D模型等多种数据可视化展示 3、可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile。 4、cesium还支持基于时间轴的动态数据展示正文 1、安装node.js 2、安装vue-cli脚手架 3、创建webpack模版项目 4、安装Cesium环境 1.1、在build/webpack.base.conf.js中定义cesium源码路径 1.2、在build/webpack.base.conf.js下的output中加入sourcePrefix: " "，让webpack正确缩进多行字符串 1.3、配置amd参数 1.4、在resolve中设置别名"cesium": path.resolve(__dirname, cesiumSource) 1.5、在bulid/webpack.base.conf.js下的module中加入unkonwContextCritical:false，让webpack打印载入特定库时候的警告 1.6、在bulid/webpack.base.conf.js下的module中加入unknownContextRegExp: /^./.*$/，为了解除Error：cannot find module “.”的错误 2.1、定义cesium源码/ Workers路径 2.2在plugins中加入下面插件，拷贝静态资源 3.1、定义cesium源码/ Workers路径 3.2、在plugins中加入下面插件，拷贝静态资源配置 build 下的assetsPublicPath 为"" 1、在src/components下新建cesiumViewer.vue组件 2、修改src/router下的index.js 文件为 3、修改 src 下的 App.vue 文件 4、修改 src 下的 main.js 2023-01-10 03:29:411

cesium截图不显示绘制元素 排查了下是在初始化的一个属性造成的requestRenderMode设为false或者不设置。默认值为falserequestRenderMode减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率在画面不发生变化的时候，暂停渲染，变化时再渲染。Cesium是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。通过Cesium提供的JSAPI，可以实现以下功能：全球级别的高精度的地形和影像服务矢量以及模型数据基于时态的数据可视化多种场景模式（3D，2.5D以及2D场景）的支持，真正的二三维一体化 2023-01-10 03:29:461

cesium 和 Three.js有什么区别，以及二者与WebGL 的关系 我也想做3D。暂时还在门外，以下仅供参考。Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。看到这个问题，第一次知道它。专做地图的看样子，类似于jquery之类的，jquery方便快速出网站，cesium方便快速出地图网站。Three.js知道一点，是做3D的基础库啊，可以做任意的3D的东西。做动画，做游戏的吧。WebGL 是一个底层标准吧，它不是一个具体的工程应用。它本身不是javascript的东西，印象中他是专门做图像图像的，更关注底层硬件的渲染和性能之类。我觉得是javascript 在这个WebGL 的绘图标准上，定义了canvas，熟悉不，canvas的各种绘图标准应该是参考的这个标准。Canvas 提供了最基本的点线面的绘制，是基本api。然后Three是对canvas的一层封装，方便更加快速地绘制一个球，一个立方体，然后动起来。 2023-01-10 03:30:091

cesium能部署在tomcat中么 ml5就可以运行。甚至部分手机浏览器都可以运行。首先，对Cesium进行本地的部署（可以用node.js,tomcat,vs2010,iis.eclipse等IDE进行部署，我选用的是最简单的vs）：（1）下载Cesium进入其官 2023-01-10 03:30:311

Cesiumlab2注册-登录-申请授权流程 1. 注册： 1) 当软件安装好之后，第一次打开会进入登录页面。如下图： 2) 进入首页之后点击注册按钮进入注册页面。如下图： 3) 按照图上所示在输入框中填写您的信息。（姓名、单位、手机号、密码、确认密码、验证码） 4) 当输入手机号之后，点击发送，即可将验证码发送至您的手机上。（注：当您的手机号注册过之后是不能再次注册的，您可以进入修改密码页面进行修改密码） 5) 当确认所有信息填写无误之后，点击注册新用户即可。（注册成功之后，页面中会出现注册成功的提示，然后进入登录页面。用刚才注册的手机号和密码进行登录即可） 2. 登录： 1).界面功能简介： a) 登录按钮上方有一个绿色的红点，这个表示后台服务是否开起，如果未开启此处的小点为红色，鼠标放上去会有响应的文字提示，点击进入设置页面：如下图 b) 注册功能前面1中已经提过了。 c)修改密码。界面如下图 i. 按照界面在对应的输入框输入响应的信息后，点击发送按钮，发送验证码手机上。确认填写信息无误后点击修改，修改如果出现问题会在页面内有提示，成功后将会跳转至登录页面 d)获取机器码： i.点击获取机器码之后会出现一个input框里面的字符就是本机的机器码。 ii.右边有一个授权路径，点击打开授权文件的存放路径。（如果有授权文件将会默认选中，无授权文件则不会选中。）界面如下： 2) 输入手机号和密码点击登录（登录成功后会进入软件的首页） 3. 申请授权： (1) 当登录之后点击右上角的用户按钮进入用户界面。 (2) 点击左侧导航下的单机栏。 (3)点击申请授权弹出申请授权弹窗。 (4) 申请授权弹窗：根据界面中的输入框填写真实的信息，点击发送验证码，确认信息无误后点击提交按钮如果提示提交成功则为提交成功。提交之后请联系群里的 @西部世界小芦进行后台审核确认。当审核之后点击刷新本界面。然后下面的表格里出现的数据则为你的授权。点击有右边的安装按钮进行安装即可。 2023-01-10 03:30:371

cesuim怎么获取一个范围的高和三角网 现在Cesium已经有两种方法可以获取到地形的高度了，分别为：1.sampleTerrain : 获取非精确的地形的高度2.sampleTerrainMostDetailed：获取尽量精确的地形的高度Cartographic通过从地形提供者请求切片，采样和插值来启动位置数组的地形高度查询。插值匹配用于在指定级别渲染地形的三角形。查询以异步方式发生，因此此函数返回在查询完成时解析的promise。每个点高度都会在适当位置进行修改如果无法确定高度，因为该位置的指定级别没有可用的地形数据，或者发生其他错误，则高度设置为undefined。作为典型的 Cartographic类型，提供的高度是参考椭球上方的高度（例如Ellipsoid.WGS84而不是高于平均海平面的高度。换句话说，如果在海洋中采样，它不一定是0.0。如果您需要尽可能精确地获取地形的高度（即具有最高细节水平），则此功能需要将地形级别的细节作为输入sampleTerrainMostDetailed。三角网：在Cesium开发中需要获取线段【line Segment】与地面三角形【Triangle】三条边的交点，查阅官方API文档说明，发现Cesium框架提供了 Cesium.IntersectionTests.lineSegmentTriangle（）功能函数。但是在使用中无法获取交点。被此问题困扰了两天，今天想到可能因为地球是个球体，所以贴地面是弧面，导致水平线段，不能与三角面相交。所以此处在三角面的三条边处，分别绘制垂直于地球平面的竖立着的三角面，分别求其交点，最终获取到了梦寐以求的交点处经纬度。 2023-01-10 03:30:421

cesium 地球支持手机访问么 《红楼梦》影视剧各版林黛玉(2张)贾宝玉——荣国府衔玉而诞的公子，贾政与王夫人之次子，阖府捧为掌上明珠，对他寄予厚望，他却走上了叛逆之路，痛恨八股文，批判程朱理学，给那些读书做官的人起名“国贼禄蠹”。他不喜欢“正经书”，却偏爱《牡丹亭》《西厢记》之类的“杂书”。[1] 他终日与家里的女孩们厮混，爱她们美丽纯洁，伤悼她们的薄命悲剧。 2023-01-10 03:30:473

Cesiumjs可以加载倾斜摄影的OSGB数据吗 打开LocaSpace Viewer软件。摄影测量数据转换——把osgb格式的摄影测量数据转换成lfp格式数据文件，场景浏览速度更快。单击倾斜摄影->数据转换，弹出如下对话框，找到要转换的数据位置，设置投影位置（场景中心点或自定义设置坐标），点击确定后即可实现。加载倾斜摄影测量数据图层——单击倾斜摄影->打开数据，找到文件本地存放位置，点击打开。浏览倾斜摄影数据效果如图。 2023-01-10 03:30:582

Cesium 怎么添加自定义模型 我们将3D模型直接以实体的形式添加进去，效果很不错，这次我们换种形式var viewer = new Cesium.Viewer("cesiumContainer");var scene = viewer.scene;var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));var model = scene.primitives.add(Cesium.Model.fromGltf({ url : "../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf", modelMatrix : modelMatrix, minimumPixelSize : 512, maximumScale : 200000})); 2023-01-10 03:31:061

Cesium for Unreal加载本地3DTiles坐标轴错乱问题 原文地址： Cesium for Unreal加载本地3DTiles坐标轴错乱问题 Cesium for Unreal (opens new window) 发布后，广大GIS爱好者立即积极参与了测试。这不，马上就有小伙伴发现了严重Bug：加载本地3DTiles坐标轴错乱，但是将3DTiles上传到 Cesium ion (opens new window) 就没问题。坐标轴错乱正常情况这马上就让人联想到是不是Cesium不想让我们加载本地数据，必须上传到Cesium ion才能使用。要知道Cesium ion只提供500M的免费空间，而且国内访问速度贼慢。其实不要慌张，碰到问题应该第一时间去官方 github (opens new window) 的 issues (opens new window) 或者官方论坛 (opens new window) ，看看有没有人踩坑。果然就找到了： Unreal load 3dtileset not by ion looks wrong (rotation)(opens new window) 原来是因为 gltfUpAxis 现在只支持 Y 的属性值了，虽然Cesium提供了工具 3D Tiles Tools (opens new window) 可以修复3DTiles数据，不过这也太麻烦了。然后顺腾摸瓜，找到了相关的issue： Add gltfUpAxis support(opens new window) 还有PR： Add gltfUpAxis support(opens new window) 才Merge不久，看来需要用Cesium for Unreal源码，而不能用官方市场 (opens new window) 的版本了。估计您读到这篇博文时，官方版本已经更新并修复这个Bug了。编译流程请参考 Compiling Cesium for Unreal(opens new window) 下面是修复后的效果：最后分享笔者编译好的Cesium for Unreal插件，解压放到工程Plugins目录，或者直接替换引擎里的Cesium for Unreal插件，比如笔者的引擎插件目录： E:Program FilesEpic GamesUE_4.26EnginePluginsMarketplace 链接: Cesium for Unreal插件 (opens new window) 提取码: ydcy 2023-01-10 03:31:211

cesium自定义label标签，cesium 文字标签换行，cesium label标签识别html ①创建vue组件文件， label.vue ②创建js文件封装类，divLabel.js ③实际调用 2023-01-10 03:31:261

Cesium加载3Dtiles漂移 可以Cesium加载3dtiles数据,相对来说也是比较简单。首先给定页面空间来展示3dtiles数据。然后进行空间的绑定。 2023-01-10 03:31:321

cesium圆的outlinewidth设置无效 设置Polygon的outlineWidth为大于1的值时，将不起作用。可以用添加polyline的方式添加宽度大于1的线。当设置颜色或者url之后Cesium会自动创建ColorMaterialProperty。 2023-01-10 03:31:371

猜你想看

perfect 干组词红双喜香烟价格表大全生产车间安全管理培训香烟价格表 what edm是什么意思楚小云百燕之家 scoops bucking 设备管理培训企业管理培训企业管理培训课程 6S管理培训精益生产企业管理培训现场管理培训阅读仓库安全管理培训内容精细化管理企业财务管理培训香烟价格查询领导力沙盘模拟企业经营采购谈判培训企业绩效薪酬管理培训熬姜呷醋 indirecttax 阅读 adopts 七匹狼香烟价格黄山香烟价格海员自找初中升学率中学初中升学率中学 good 反义词大学

cesium加载动图方案三：通过apng-js库实现

共1条回复

相关推荐

猜你想看

大家在看