xt3d的博客

Cesium实战专栏20.二维点转三维点前言实现效果实现思路关键代码前言我接触到的很多三维项目都是从之前的二维项目转换升级而来，其中就会遇到数据的兼容问题，因为在二维地图项目中，我们一般都是二维平面数据，但是在三维项目中需要具有高程值，比如我们的监控点位、消防栓点位、各种POI数据等等，拿到的数据都只是经纬度，无法直接在三维中进行展示，我们可以通过GIS桌面软件批量拾取高度值，这里我们使用前端的方式进行转换。实现效果实现思路主要通过scene.clampToHeight()方法进行转换，sce

Cesium实战专栏19.动态水面效果实现效果实现思路关键代码实现效果实现思路Cesium沙盒中有水体的例子，参考链接https://sandcastle.cesium.com/?src=Materials.html primitive.appearance.material = new Cesium.Material({ fabric: { type: "Water", uniforms: { specularMap: "../images/ear

Cesium实战专栏18.echarts图层实现效果实现思路关键代码实现效果实现思路自定义echarts坐标系，将经纬度坐标转为屏幕坐标关键代码export default class EchartsglLayer { constructor(viewer, option) { //注册坐标系 echarts.registerCoordinateSystem('cesium', this.getE3CoordinateSystem(viewer));

Cesium实战专栏17.鼠标位置拾取工具实现效果实现思路关键代码实现效果实现思路通过scene对象的pickPosition方法拾取鼠标处的笛卡尔坐标，转为经纬度显示到面板上即可关键代码 initEvents() { this.eventHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); this.registerMouseEvents(); } //注

Cesium实战专栏16.军事标绘编辑效果图思路关键代码效果图思路军事标绘编辑与点线面实体编辑思路一致，鼠标点击拾取到要编辑的对象，根据实体对象的坐标点生成编辑节点，移动编辑节点后更新实体对象的坐标。关键代码```javascript// 军事标绘编辑类 import { point3dsToPoint2ds } from "../PlotUtils/utils3d"import { cartesian3ToPoint3D } from "../../PlotBase/PlotBas

Cesium实战专栏15.军事标绘绘制前言实现效果实现思路关键代码前言军事标绘符号是很多GIS系统都有的功能，二维地图有很多类似的插件，但是三维的还比较少。实现效果实现思路关于军事标绘各种箭头符号的算法不用我们自己研究，已经有很多开源的可以使用，我们需要做的是研究如何将其与cesium结合，从二维转到三维。不同的箭头符号需要的经纬度点数不同，我们将笛卡尔坐标转为经纬度坐标，通过算法生成二维的箭头符号，再重新转为笛卡尔坐标即可。关键代码以多边形符号为例import { poin2dsToPo

Cesium实战专栏14.自定义html标注图层前言实现效果实现思路关键代码前言在Cesium中可以通过entity的Lebel属性来实现文本标注的功能，但是原始的标注功能样式往往达不到我们想要的效果，比如我们需要像html元素那样可以通过css来自由的设置样式。我们可以通过自定义html标注的方式来实现可以自由定义样式的标注功能。实现效果实现思路自定义html标注图层功能与自定义气泡弹框功能思路相似，通过笛卡尔坐标转为屏幕坐标，实时更新DOM元素的坐标使其保持正确的位置即可。关键代码 /

Cesium实战专栏13.3dtiles高度调整前言实现效果关键代码前言有时候通过数据处理软件转换处理的3dtiles数据加载到前端显示的时候会发现看不见或者一闪而过，又或是看得见但是移动场景的时候 会发现模型会飘着移动，感觉模型位置没有固定。最可能的原因就是生成的数据高度不对。实现效果关键代码 // cesiumlab 矢量面拉伸实例 面数据具有高度字段 import appConfig from "../../appConfig" let CesiumInit = { init

Cesium实战专栏12.gltf模型标绘编辑前言前一篇讲了gltf模型标绘，这一篇是对标绘对象的编辑功能进行封装。实现效果实现思路标绘对象鼠标交互编辑主要通过监听场景鼠标事件实现关键代码//编辑类//左键按下编辑对象隐藏编辑对象移动开始//左键抬起编辑对象显示编辑对象移动结束import MousePoint from "../../PlotBase/MousePoint"class GltfPlotEditor { constructor(viewer, gltfPlo

这里写自定义目录标题前言效果图实现思路绘制类封装绘制类使用前言在cesium中gltf模型非常重要，可以用来展现各种各样的三维元素，比如人、车、树等等。我们可以用代码来构建gltf模型，但是在真正的项目中往往需要鼠标交互的方式来添加模型，所以我们需要封装鼠标交互的一个工具来实现模型的添加，这样便于用户使用。效果图实现思路在cesium中我们添加一个gltf模型只需要模型文件和坐标点，所以我们需要的是封装一个工具来获取用户输入的点坐标，在Cesium中通过ScreenSpaceEventHandl

前言雷达扫描效果可以用来做点半径查询时，查询过程中的显示动画，表示正在扫描此处的数据，就类似手机管家、电脑管家扫描可清除垃圾的时候那种动画效果，也可以用来实现其他动态效果，丰富场景的视觉效果。效果图关键代码//雷达扫描类export default class RadarsEffects { constructor(viewer) { this.radarsScans = []; this.viewer = viewer; } //添加雷

前言之前在某个三维安防布控管理平台中需要在场景中绘制警戒区，用来表示某些区域具有特定意义，需要进行封锁，不允许靠近，比如军事重地、某些重要会议场所等。使用的是Cesium中的墙体类，实现拉伸显示来模拟警戒区，但是静态的看起来比较死板，不是领导想要的效果，后来使用CallbackProperty类实现动态墙体的效果，逼格瞬间提升不少。效果图实现思路通过CallbackProperty类动态改变墙体的高度，达到动态效果关键代码 /* * 动态立体墙类 */ class Fence {

前言动态扩散圆往往用来模拟一些从中心点像周围扩散的现象，比如地震源，事件发生点等。效果图实现思路通过自定义材质类的方式来实现关键代码定义材质类//自定义材质类function EllipsoidFadeMaterialProperty(color, duration) { this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = u

前言Cesium中对于线样式的设置已经提供了很多种材质（如箭头线、虚线、发光线、边框线等）以供选择，但是在项目开发中，这些材质往往不能满足需求。在某个项目中就需要能够模拟水流、能量等流动的效果，在火星科技上面就找到了一个比较满足需求的效果，无奈源码不是开源的，只能参考着效果做。效果图实现思路通过自定义材质类的方式来实现关键代码// 自定义材质类function PolylineTrailLinkMaterialProperty(color, duration) { this._def

前言在webgis项目中，轨迹回放是一个很常用的功能。之前使用leaflet开发项目的时候，发现有很多别人已经开发好的插件可以实现轨迹回放功能，但是在Cesium中，这种例子还比较少，就只能自己琢磨写一个。效果图因为是录屏软件录的所以看起来是一帧一帧的，实际效果可以在Cesium实战专栏上查看。实现思路在Cesium中实现类似的效果目前我知道的有两种方法。一种是结合Cesium时间和SampledPositionProperty类实现、另一种是通过czml文件实现。本实例通过时间和Sampled

前言很多时候需要在前端展示大量的点位信息，此时会出现点位密集，页面卡顿并且影响美观，使用点聚合是解决此问题的方法之一。本实例参考百度API中的点聚合功能在Cesium实现类似效果的点聚合功能。效果图实现思路Cesium中提供了EntityCluster类来实现聚合功能，该类有一个事件clusterEvent，该事件中能够获取到聚合的各种参数（如聚合点位数量）。关键代码// 点聚合实例// 使用cesium原生的聚合功能 参考百度聚合let cesiumInit = { init(e

前言做过webgis开发的兄弟应该都用过openlayers、leaflet、百度地图api等地图开发库，都知道在地图中显示信息一般使用的都是气泡弹框的形式，使用气泡弹框的好处就是弹框能够跟着地图移动，能够将需要展示的信息紧密地与地图点位相关联，用户体验比较好。在Cesium中展示属性信息通过可以使用气泡窗口的方式来进行展示，但是Cesium自带的信息窗口比较难看，并且不会跟随场景移动，所以只能自己进行气泡窗口的扩展开发。效果图信息窗口的实现思路信息窗口主要是能够跟随场景进行移动，通过地理坐标点转

前言很多时候我们需要在点击实体的时候，显示实体的某些属性信息，比如监控点位，在点击监控的时候显示监控的名称、ip、状态等信息。要显示实体的信息，首先在创建实体的时候将信息设置到实体的属性上面，点击实体的时候拿到设置的信息进行展示。有两种方式获取点击的实体。1.注册场景鼠标点数事件，通过鼠标点拾取实体对象。2.监听viewer对象的实体选中改变事件，获取选中的实体对象。效果图关键代码// 获取实体信息实例 //获取实体信息的方式有两种 1.是通过viewer.selectedEntityC

前言大多数时候需要对点线面实体进行编辑，比如新增节点、移动节点节点、平移整个实体等。效果图点线面实体编辑的实现思路实体编辑的思路主要是通过实体坐标串生成编辑节点和中节点实体，给每个节点实体设置一个索引，监听鼠标对节点实体的操作，移动节点实体后获取最新的点位信息给编辑的实体对象。实体编辑类的封装import * as turf from "@turf/turf"export default class EntityEdit { constructor(viewer) {

这里写自定义目录标题前言鼠标交互绘制实体的思路实体绘制类封装使用实体绘制类前言在Cesium项目中，点线面实体对象的绘制是很常用，也是很基本的一个功能，Cesium中提供了Entity类来构建点线面实体，能够通过点串数据用代码构建点线面，但是并没有提供鼠标交互绘制的类，只能自己进行一些简单的封装。鼠标交互绘制实体的思路在Cesium中，虽然没有提供鼠标交互绘制的相关类，但是我们可以通过监听鼠标点击事件，获取点击点坐标串，这样就能够实现鼠标交互绘制的功能。Cesium中的ScreenSpaceEven