最近再做eact-cesium项目来预警了在地图上其经纬度闪烁，找了好久才找到方法(当然是别人封装的)。

效果图

/**

*圆形扩大扫描圈

* */

function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {

var ScanSegmentShader =

"uniform sampler2D colorTexture;\n" +

"uniform sampler2D depthTexture;\n" +

"varying vec2 v_textureCoordinates;\n" +

"uniform vec4 u_scanCenterEC;\n" +

"uniform vec3 u_scanPlaneNormalEC;\n" +

"uniform float u_radius;\n" +

"uniform vec4 u_scanColor;\n" +

"vec4 toEye(in vec2 uv, in float depth)\n" +

" {\n" +

" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +

" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +

" posInCamera =posInCamera / posInCamera.w;\n" +

" return posInCamera;\n" +

" }\n" +

"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +

"{\n" +

"vec3 v01 = point -planeOrigin;\n" +

"float d = dot(planeNormal, v01) ;\n" +

"return (point - planeNormal * d);\n" +

"}\n" +

"float getDepth(in vec4 depth)\n" +

"{\n" +

"float z_window = czm_unpackDepth(depth);\n" +

"z_window = czm_reverseLogDepth(z_window);\n" +

"float n_range = czm_depthRange.near;\n" +

"float f_range = czm_depthRange.far;\n" +

"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +

"}\n" +

"void main()\n" +

"{\n" +

"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +

"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +

"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +

"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +

"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +

"if(dis < u_radius)\n" +

"{\n" +

"float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +

"f = pow(f, 4.0);\n" +

"gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +

"}\n" +

"}\n";

var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);

var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);

var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);

var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);

var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);

var _time = (new Date()).getTime();

var _scratchCartesian4Center = new Cesium.Cartesian4();

var _scratchCartesian4Center1 = new Cesium.Cartesian4();

var _scratchCartesian3Normal = new Cesium.Cartesian3();

var ScanPostStage = new Cesium.PostProcessStage({

fragmentShader: ScanSegmentShader,

uniforms: {

u_scanCenterEC: function () {

return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);

},

u_scanPlaneNormalEC: function () {

var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);

var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);

_scratchCartesian3Normal.x = temp1.x - temp.x;

_scratchCartesian3Normal.y = temp1.y - temp.y;

_scratchCartesian3Normal.z = temp1.z - temp.z;

Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);

return _scratchCartesian3Normal;

},

u_radius: function () {

return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;

},

u_scanColor: scanColor

}

});

viewer.scene.postProcessStages.add(ScanPostStage);

return (ScanPostStage);

}

function addCircleScan(viewer,data){

viewer.scene.globe.depthTestAgainstTerrain = true; //防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后，标绘将位于地形的顶部；如果设为false(默认值)，那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。

var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(data.lon), Cesium.Math.toRadians(data.lat), 0); //中心位子

return AddCircleScanPostStage(viewer, CartographicCenter,data.r,data.scanColor,data.interval);

}

/**

*区域雷达扫描

* */

function AddRadarScanPostStage(viewer, cartographicCenter, radius, scanColor, duration) {

var ScanSegmentShader =

"uniform sampler2D colorTexture;\n" +

"uniform sampler2D depthTexture;\n" +

"varying vec2 v_textureCoordinates;\n" +

"uniform vec4 u_scanCenterEC;\n" +

"uniform vec3 u_scanPlaneNormalEC;\n" +

"uniform vec3 u_scanLineNormalEC;\n" +

"uniform float u_radius;\n" +

"uniform vec4 u_scanColor;\n" +

"vec4 toEye(in vec2 uv, in float depth)\n" +

" {\n" +

" vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +

" vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +

" posInCamera =posInCamera / posInCamera.w;\n" +

" return posInCamera;\n" +

" }\n" +

"bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +

"{\n" +

"vec3 v01 = testPt - ptOnLine;\n" +

"normalize(v01);\n" +

"vec3 temp = cross(v01, lineNormal);\n" +

"float d = dot(temp, u_scanPlaneNormalEC);\n" +

"return d > 0.5;\n" +

"}\n" +

"vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +

"{\n" +

"vec3 v01 = point -planeOrigin;\n" +

"float d = dot(planeNormal, v01) ;\n" +

"return (point - planeNormal * d);\n" +

"}\n" +

"float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\n" +

"{\n" +

"vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\n" +

"return length(tempPt - ptOnLine);\n" +

"}\n" +

"float getDepth(in vec4 depth)\n" +

"{\n" +

"float z_window = czm_unpackDepth(depth);\n" +

"z_window = czm_reverseLogDepth(z_window);\n" +

"float n_range = czm_depthRange.near;\n" +

"float f_range = czm_depthRange.far;\n" +

"return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +

"}\n" +

"void main()\n" +

"{\n" +

"gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +

"float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +

"vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +

"vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +

"float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +

"float twou_radius = u_radius * 2.0;\n" +

"if(dis < u_radius)\n" +

"{\n" +

"float f0 = 1.0 -abs(u_radius - dis) / u_radius;\n" +

"f0 = pow(f0, 64.0);\n" +

"vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\n" +

"float f = 0.0;\n" +

"if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\n" +

"{\n" +

"float dis1= length(prjOnPlane.xyz - lineEndPt);\n" +

"f = abs(twou_radius -dis1) / twou_radius;\n" +

"f = pow(f, 3.0);\n" +

"}\n" +

"gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\n" +

"}\n" +

"}\n";

var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);

var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);

var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);

var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);

var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);

var _CartographicCenter2 = new Cesium.Cartographic(cartographicCenter.longitude + Cesium.Math.toRadians(0.001), cartographicCenter.latitude, cartographicCenter.height);

var _Cartesian3Center2 = Cesium.Cartographic.toCartesian(_CartographicCenter2);

var _Cartesian4Center2 = new Cesium.Cartesian4(_Cartesian3Center2.x, _Cartesian3Center2.y, _Cartesian3Center2.z, 1);

var _RotateQ = new Cesium.Quaternion();

var _RotateM = new Cesium.Matrix3();

var _time = (new Date()).getTime();

var _scratchCartesian4Center = new Cesium.Cartesian4();

var _scratchCartesian4Center1 = new Cesium.Cartesian4();

var _scratchCartesian4Center2 = new Cesium.Cartesian4();

var _scratchCartesian3Normal = new Cesium.Cartesian3();

var _scratchCartesian3Normal1 = new Cesium.Cartesian3();

var ScanPostStage = new Cesium.PostProcessStage({

fragmentShader: ScanSegmentShader,

uniforms: {

u_scanCenterEC: function () {

return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);

},

u_scanPlaneNormalEC: function () {

var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);

var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);

_scratchCartesian3Normal.x = temp1.x - temp.x;

_scratchCartesian3Normal.y = temp1.y - temp.y;

_scratchCartesian3Normal.z = temp1.z - temp.z;

Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);

return _scratchCartesian3Normal;

},

u_radius: radius,

u_scanLineNormalEC: function () {

var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);

var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);

var temp2 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center2, _scratchCartesian4Center2);

_scratchCartesian3Normal.x = temp1.x - temp.x;

_scratchCartesian3Normal.y = temp1.y - temp.y;

_scratchCartesian3Normal.z = temp1.z - temp.z;

Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);

_scratchCartesian3Normal1.x = temp2.x - temp.x;

_scratchCartesian3Normal1.y = temp2.y - temp.y;

_scratchCartesian3Normal1.z = temp2.z - temp.z;

var tempTime = (((new Date()).getTime() - _time) % duration) / duration;

Cesium.Quaternion.fromAxisAngle(_scratchCartesian3Normal, tempTime * Cesium.Math.PI * 2, _RotateQ);

Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM);

Cesium.Matrix3.multiplyByVector(_RotateM, _scratchCartesian3Normal1, _scratchCartesian3Normal1);

Cesium.Cartesian3.normalize(_scratchCartesian3Normal1, _scratchCartesian3Normal1);

return _scratchCartesian3Normal1;

},

u_scanColor: scanColor

}

});

viewer.scene.postProcessStages.add(ScanPostStage);

return (ScanPostStage);

}

function addRadarScan(viewer,data){

viewer.scene.globe.depthTestAgainstTerrain = true; //防止移动、放大缩小会视觉偏移depthTestAgainstTerrain // 设置该属性为true之后，标绘将位于地形的顶部；如果设为false(默认值)，那么标绘将位于平面上。缺陷：开启该属性有可能在切换图层时会引发标绘消失的bug。

var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(data.lon), Cesium.Math.toRadians(data.lat),0); //中心位子

return AddRadarScanPostStage(viewer, CartographicCenter,data.r,data.scanColor,data.interval);

}

只需要调用 addCircleScan方法传入一个viewer和data就行

data:{

lon:"",//经度

lat:""，//纬度

r:"",//扫描半径

scanColor:"",//颜色注意必须是var scanColor = new Cesium.Color(1.0, 0.0, 0.0, 1);rgba形式的‘red’和‘#fff’都不行

interval:"",//时间

}

可以下载链接: https://pan.baidu.com/s/1EdqlgYD6DHNKGXTvO-7tbg 提取码: pjbe

cesium雷达图_cesium添加闪烁点，雷达图（一般用于预警）相关推荐

  1. cesium雷达图_Cesium专栏-雷达反射率（附源码下载）

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  2. python雷达和柱形图_Python Pygal常见数据图（折线图、柱状图、饼图、点图、仪表图和雷达图）详解...

    Pygal 同样支持各种不同的数据图,比如饼图.折线图等.Pygal 的设计很好,不管是创建哪种数据图,Pygal 的创建方式基本是一样的,都是先创建对应的数据图对象,然后添加数据,最后对数据图进行配 ...

  3. 【雷达图】R语言绘制雷达图（ggradar），NBA季后赛数据为例

    雷达图简介 雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法.轴的相对位置和角度通常是无信息的. 雷达图也称为网络图,蜘蛛图,星图,蜘蛛网图,不规则多边形 ...

  4. Tableau绘制K线图、布林线、圆环图、雷达图

    Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...

  5. R语言使用ggradar包可视化基本雷达图（radar chart、蜘蛛图spider plot）、可视化单个数据对象的雷达图

    R语言使用ggradar包可视化基本雷达图(radar chart.蜘蛛图spider plot).可视化单个数据对象的雷达图 目录

  6. R语言使用ggradar包可视化基本雷达图（radar chart、蜘蛛图spider plot）、可视化单个数据对象的雷达图、自定义雷达图的线条类型、线条宽度、数据点大小、色彩等

    R语言使用ggradar包可视化基本雷达图(radar chart.蜘蛛图spider plot).可视化单个数据对象的雷达图.自定义雷达图的线条类型.线条宽度.数据点大小.色彩等(Customize ...

  7. R语言使用fmsb包、gradar包可视化雷达图（radar chart、蜘蛛图spider plot）、ggpubr包可视化点图、GGally包可视化多变量的平行坐标轴图

    R语言使用fmsb包.gradar包可视化雷达图(radar chart.蜘蛛图spider plot).ggpubr包可视化点图.GGally包可视化多变量的平行坐标轴图 目录

  8. Android之玩转MPAndroidChart让（折线图、柱形图、饼状图、散列图、雷达图）优雅的舞...

    2019独角兽企业重金招聘Python工程师标准>>> 把开源项目MPAndroidChart里面的折线图.柱形图.饼状图.散列图.雷达图怎么使用和一些属性详细的介绍,当我们项目 g ...

  9. Pyecharts：pyecharts(图文+代码)实战(柱状图/条形图/散点图、漏斗图、仪表盘、折线/面积图、水球图、地图、平行坐标系、饼图、极坐标系、雷达图、词云图)之绘制各种吊炸天的图表

    Pyecharts:pyecharts(图文+代码)实战(柱状图/条形图/散点图.漏斗图.仪表盘.折线/面积图.水球图.地图.平行坐标系.饼图.极坐标系.雷达图.词云图)之绘制各种吊炸天的图表 目录 ...

  10. 地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型

    地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...

最新文章

  1. linux检测文件名编码,Linux下查看文件编码，文件或文件名编码格式转换 | 缥缈的云...
  2. c3074 无法使用带圆括号的_如何选择路面裂缝贴缝带？
  3. logs is not in the form of topic-partition or topic-partition.uniqueId-delete
  4. 前端“黑话”polyfill
  5. 交换机的基本配置实验报告_无线网络设计配置即实验报告
  6. 迁移性好、多用途，港中文提出特征分离的无监督人类三维姿态表征
  7. F1-VmwareCentOS7.x
  8. Java(31)_JDBC连接mysql数据库（一）
  9. int转byte数组以及相关原理
  10. 【科普】AHCI模式是什么，与IDE模式有什么区别？
  11. C#: 生辰八字五行计算算法
  12. 快速使用ros小乌龟教程——ROS初体验
  13. 辐射4 Hello World
  14. 如何制作unity艺术字体
  15. 我安装archlinux的过程总结
  16. 员工激励格言之《士气与斗志的激励》
  17. 360安全安卫士自带的卸载程序的文件在哪里
  18. java byte与char互转原理_【转】java byte与char互转原理
  19. Spring事务 作者：哇塞大嘴好帅(我爱大嘴网)
  20. 仅1799元起，iQOO Z5火热预售中：满血配置超长续航

热门文章

  1. NeRF神经辐射场学习笔记（十）— BungeeNeRF（CityNeRF）实现以及代码注释
  2. 为什么你一直学不好SEO优化？
  3. 荣耀畅玩7c能用鸿蒙吗,荣耀畅玩7C评测：人脸识别双摄 超高性价比
  4. MSE、RMSE、MAE、R方等指标整理
  5. css backdrop-filter属性 用来做图片的部分模糊效果
  6. MTK DDR进行ETT之后的压力---测试环境的搭建
  7. 手机便签软件哪个好用 手机便签软件推荐
  8. javascript系列丛书之读后感
  9. 缺失值处理的三种方法
  10. WEP/WPA/WPA2/WPA3初识