项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

实现方法

1、生成随机竖直飞线

     /*** @description: 产生随机线* @param center：中心点坐标* @param num：随机线数量* @return 返回线*/generateRandomLines: function (center, num) {let geometryInstances = []for (let i = 0; i < num; i++) {let lon = center[0] + (Math.random() - 0.5) * 0.1;let lat = center[1] + (Math.random() - 0.5) * 0.1;const geometry = new Cesium.PolylineGeometry({positions: Cesium.Cartesian3.fromDegreesArrayHeights([lon, lat, 0, lon, lat, 5000 * Math.random()]),width: 1.0,})const instance = new Cesium.GeometryInstance({ geometry: geometry })geometryInstances.push(instance)}return geometryInstances}

2、设置片源着色器

 const fragmentShaderSource = `uniform vec4 color;uniform float speed;uniform float percent;uniform float gradient;czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st;float t = fract(czm_frameNumber * speed / 1000.0);t *= (1.0 + percent);float alpha = smoothstep(t- percent, t, st.s) * step(-t, -st.s);alpha += gradient;material.diffuse = color.rgb;material.alpha = alpha;material.emission = vec3(0.7);return material;}`

3、设置 Primitive

 const primitive = new Cesium.Primitive({geometryInstances: this.generateRandomLines([104.065, 30.659], 100),appearance: new Cesium.PolylineMaterialAppearance({material: new Cesium.Material({fabric: {uniforms: {color: new Cesium.Color(1.0, 0.5, 0.0, 0.5),speed: 5.0,percent: 0.2,gradient: 0.00},source: fragmentShaderSource},}),}),allowPicking: false})viewer.scene.primitives.add(primitive)

Cesium竖直飞线相关推荐

cesium绘制动态线，多段线
动态线实现传递顶点时,附加每个顶点距线段起点的距离,用此距离来实现线段分段 shader中对传入的距离取模,即可实现分段绘制不通的颜色 PolylineColorAppearance + Fabri ...
cesium画飞线_基于Cesium绘制抛物弧线
Cesium绘制抛物弧线,供大家参考,具体内容如下在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录思路两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> ...
cesium实现飞线特效
效果如下另外我这边做了4种飞线特效,是用不同的着色器来实现的此效果依赖着色器,主要代码如下: 根据经纬度.高计算飞线数据 computeFlyline (point1,point2,h ) {le ...
cesium画飞线_Cesium+earthSD实现相机飞行动画
//创建相机跟随 createCameraFollow(line) {//var p1 = [ //[[DtoR(-122.174699), DtoR(37.433888), 0], [ 2.0991 ...
Cesium实现流动线/动态纹理
之前主要以超图Webgl使用为主,后面由于一些原因,主要分享cesium的使用心得在使用cesium的时候,常常需要一些动态效果,例如人口迁徙图,管线流动图等,但是cesium示例中没有类似的示例, ...
HTML表格竖边框线,Table表格横竖线实现Css
.tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999 ...
饼图加引导线_【如何在饼形图中添加引导线（Excel）】excle里面一条竖状线
EXCEL中如何插入图表,有两个竖轴,图内一个柱状,一个线状图, 在EXCEL中先做好表格(需要的数据),点击插入中的图表.选择自定义图标,其中有项柱状-线状格式.点击下一步后按步骤就可以完成了 Ex ...
Cesium三维地球上添加点、线、面、文字、图标（图片）、模型等标绘
添加标绘之前要明白一点:Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象,或者说Cesium 提供 Entity API 来绘制控件数据.所以我们添加的所有标绘都是e ...
cesium绘制点、线、面
cesium绘制点.线.面地图地形上点 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler ...

Cesium竖直飞线

目录

项目地址

实现效果

实现方法

Cesium竖直飞线相关推荐

最新文章

热门文章