Cesium 雷达效果：

1、无遮挡雷达

利用entity球体实现
重要：利用球体的旋转功能和Cesium的CallbackProperty函数不断的旋转

let num = 0
const randar = this.viewer.entities.add({position: position, //Cesium.Cartesian3orientation: new Cesium.CallbackProperty(() => { num += 0.3;if (num >= maxAngle) num1 = 0;return Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll((num * Math.PI) / 180, 0, 0));}, false),ellipsoid: {radii: radii || new Cesium.Cartesian3(5000.0, 5000.0, 2000.0), // 扇形半径innerRadii: innerRadii || new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径minimumClock: Cesium.Math.toRadians(-10),maximumClock: Cesium.Math.toRadians(10),minimumCone: Cesium.Math.toRadians(90), // 上下偏角  可以都设置为90maximumCone: Cesium.Math.toRadians(90),material: Cesium.Color.GREEN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.GREEN.withAlpha(.8),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //RELATIVE_TO_GROUND CLAMP_TO_GROUND},});

2、贴地原面扫射

利用着色器完成

//geographySpace: new Cesium.Cartographic(Cesium.Math.toRadians(lng), Cesium.Math.toRadians(lat), alt);//位置
//radarRadius:角度
// color:颜色
// time:间隔时间
this.addRadarScanPostStage(geographySpace, radarRadius, color, time);
function addRadarScanPostStage(cartographicCenter: Cesium.Cartographic, radius: number, scanColor: Cesium.Color, duration: number) {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" +// lineEndPt扫描线"vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius * 0.5;\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: () => {return Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);},u_scanPlaneNormalEC: () => {var temp = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);var temp1 = Cesium.Matrix4.multiplyByVector(this.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: () => {var temp = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);var temp1 = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);var temp2 = Cesium.Matrix4.multiplyByVector(this.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}});return this.viewer.scene.postProcessStages.add(ScanPostStage);}

3、贴地扇形

思路：一个点绕另一个点旋转得到扇形，如果这个扇形的每一个点都绕扇形原点旋转，得到旋转的扇形。

//计算扇形的点![在这里插入图片描述](https://img-blog.csdnimg.cn/f3e2f67f28034021a3ac2674fe159984.gif#pic_center)const computer = (B: Cesium.Cartesian3, A: Cesium.Cartesian3, angle: number)=> {// 计算B的地面法向量let arr = [B]var chicB = Cesium.Cartographic.fromCartesian(B);chicB.height = 0;var dB = Cesium.Cartographic.toCartesian(chicB);for (let index = 0; index <angle; index++) {var normaB = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(dB, B, new Cesium.Cartesian3()), new Cesium.Cartesian3());// 构造基于B的法向量旋转90度的矩阵var Q = Cesium.Quaternion.fromAxisAngle(normaB, Cesium.Math.toRadians(index));var m3 = Cesium.Matrix3.fromQuaternion(Q);var m4 = Cesium.Matrix4.fromRotationTranslation(m3);// 计算A点相对B点的坐标A1var A1 = Cesium.Cartesian3.subtract(A, B, new Cesium.Cartesian3());//对A1应用旋转矩阵var p = Cesium.Matrix4.multiplyByPoint(m4, A1, new Cesium.Cartesian3());// 新的A的坐标var p2 = Cesium.Cartesian3.add(p, B, new Cesium.Cartesian3());arr.push(p2) }return arr
}

4、有遮挡雷达

import * as Cesium from 'cesium'export type ShelterRadarTypeProps = {viewer: Cesium.Viewer
}
export type CreateRadarType = {position: Cesium.Cartesian3,num?: number,maxAngle?: number,radii?: Cesium.Cartesian3,innerRadii?: Cesium.Cartesian3
}
export class ShelterRadar {private viewer: Cesium.Viewerprivate randarArr: Cesium.Entity[] = []constructor(props: ShelterRadarTypeProps) {this.viewer = props.viewer}createRadar(params: CreateRadarType) {const { position, num, maxAngle = 120, radii, innerRadii } = paramslet num1 = num || 0const randar = this.viewer.entities.add({position: position,orientation: new Cesium.CallbackProperty(() => {num1 += 0.3;if (num1 >= maxAngle) num1 = 0;return Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll((num1 * Math.PI) / 180, 0, 0));}, false),ellipsoid: {radii: radii || new Cesium.Cartesian3(5000.0, 5000.0, 2000.0), // 扇形半径innerRadii: innerRadii || new Cesium.Cartesian3(1.0, 1.0, 1.0), // 内半径minimumClock: Cesium.Math.toRadians(-10),maximumClock: Cesium.Math.toRadians(10),minimumCone: Cesium.Math.toRadians(90), // 上下偏角  可以都设置为90maximumCone: Cesium.Math.toRadians(90),material: Cesium.Color.GREEN.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.GREEN.withAlpha(.8),heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //RELATIVE_TO_GROUND CLAMP_TO_GROUND},});this.randarArr.push(randar)return randar;}clear() {for (let i = 0; i < this.randarArr.length; i++) {this.viewer.entities.remove(this.randarArr[i])}this.randarArr = []}clearOne(entity: Cesium.Entity) {this.viewer.entities.remove(entity)this.randarArr = this.randarArr.filter(x => x.id !== entity.id)}
}export type createRadarType = {lat: number;lng: number;alt?: number;scanColor?: Cesium.Color;duration?: number;radius?: number;
}
export class StickRadar {private viewer: Cesium.Viewerprivate randarArr: any = []constructor(props: ShelterRadarTypeProps) {this.viewer = props.viewer}createRadar(params: createRadarType) {const { lat, lng, alt = 0, scanColor, duration, radius } = paramsconst geographySpace = new Cesium.Cartographic(Cesium.Math.toRadians(lng), Cesium.Math.toRadians(lat), alt);// 扫描颜色const color = scanColor || new Cesium.Color(119 / 255, 214 / 255, 209 / 255, 0.6)// 持续时间 毫秒var time = duration || 4000;// 绘制平面雷达扫描线var radarRadius = radius || 3000const radar = this.addRadarScanPostStage(geographySpace, radarRadius, color, time);this.randarArr.push(radar)}/*添加雷达扫描线 地形遮挡开启cartographicCenter 扫描中心【new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat), 0);】radius  半径 米【1500】scanColor 扫描颜色【new Cesium.Color(1.0, 0.0, 0.0, 1)】duration 持续时间 毫秒【4000】*/addRadarScanPostStage(cartographicCenter: Cesium.Cartographic, radius: number, scanColor: Cesium.Color, duration: number) {/* // 彩色纹理uniform sampler2D colorTexture;// 深度纹理uniform sampler2D depthTexture;// 纹理坐标varying vec2 v_textureCoordinates;// 扫描中心uniform vec4 u_scanCenterEC;// 扫描平面法线ECuniform vec3 u_scanPlaneNormalEC;// 扫描线法线ECuniform vec3 u_scanLineNormalEC;// 半径uniform float u_radius;// 扫描的颜色uniform vec4 u_scanColor;vec4 toEye( in vec2 uv, infloat depth) {vec2 xy = vec2((uv.x * 2.0 - 1.0), (uv.y * 2.0 - 1.0));vec4 posInCamera = czm_inverseProjection * vec4(xy, depth, 1.0);posInCamera = posInCamera / posInCamera.w;return posInCamera;}bool isPointOnLineRight( in vec3 ptOnLine, invec3 lineNormal, invec3 testPt) {vec3 v01 = testPt - ptOnLine;normalize(v01);vec3 temp = cross(v01, lineNormal);float d = dot(temp, u_scanPlaneNormalEC);return d > 0.5;}vec3 pointProjectOnPlane( in vec3 planeNormal, invec3 planeOrigin, invec3 point) {vec3 v01 = point - planeOrigin;float d = dot(planeNormal, v01);return (point - planeNormal * d);}float distancePointToLine( in vec3 ptOnLine, invec3 lineNormal, invec3 testPt) {vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);return length(tempPt - ptOnLine);}float getDepth( in vec4 depth) {float z_window = czm_unpackDepth(depth);z_window = czm_reverseLogDepth(z_window);float n_range = czm_depthRange.near;float f_range = czm_depthRange.far;return (2.0 * z_window - n_range - f_range) / (f_range - n_range);}void main() {// 得到釉色 = 结构二维(彩色纹理,纹理坐标)gl_FragColor = texture2D(colorTexture, v_textureCoordinates);// 深度 = (釉色 = 结构二维(深度纹理,纹理坐标))float depth = getDepth(texture2D(depthTexture, v_textureCoordinates));// 视角 = (纹理坐标,深度)vec4 viewPos = toEye(v_textureCoordinates, depth);// 平面点投影 = (扫描平面法线,扫描中心,视角)vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);// 差值float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);// 直径 = 两个半径float twou_radius = u_radius * 2.0;if (dis < u_radius) {float f0 = 1.0 - abs(u_radius - dis) / u_radius;f0 = pow(f0, 64.0);vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;float f = 0.0;if (isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz)) {float dis1 = length(prjOnPlane.xyz - lineEndPt);f = abs(twou_radius - dis1) / twou_radius;f = pow(f, 3.0);}gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);}} */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" +// lineEndPt扫描线"vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius * 0.5;\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: () => {return Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);},u_scanPlaneNormalEC: () => {var temp = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);var temp1 = Cesium.Matrix4.multiplyByVector(this.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: () => {var temp = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center, _scratchCartesian4Center);var temp1 = Cesium.Matrix4.multiplyByVector(this.viewer.camera.viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);var temp2 = Cesium.Matrix4.multiplyByVector(this.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}});return this.viewer.scene.postProcessStages.add(ScanPostStage);}clear() {for (let i = 0; i < this.randarArr.length; i++) {this.viewer.scene.postProcessStages.remove(this.randarArr[i])}this.randarArr = []}
}

调用 const radar = new StickRadar({ viewer: Viewer }); radar.createRadar({ lat: 36.089227, lng: -112.121947 });

Cesium 四种雷达扫描效果相关推荐

Cesium实现雷达扫描效果
Cesium实现雷达扫描效果效果: html: <div id="cesiumContainer"></div> <canvas id=" ...
vue 雷达扫描_canvas实现雷达扫描效果
今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: ************************************** ...
使用QT绘制雷达扫描效果
话不多说直接上代码,代码规范性可能差了点,但是效果得以实现,在这里记录一下. 源码工程在这里下载地址 scan.h的代码如下 #ifndef SCAN_H #define SCAN_H#include ...
css loading 字体动画效果,CSS实现四种loading动画效果
四种加载效果 /*第一种*/.demo1 { 4px; height: 4px; border-radius: 2px; background: #68b2ce;float: left; margin ...
android脚本附近的人,Android仿微信、QQ附近好友雷达扫描效果
1.概述最近一直到在带实习生,因为人比较多,所以很长一段时间没有更新博客了,今天更新一篇雷达扫描附近好友效果,以后尽量每周更新一篇,先看一下效果: 2．实现 1.效果分析效果分为两个部分,一个是上 ...
纯shader实现雷达扫描效果(three.js实战13)
1. demo效果 2. 实现要点 2.1 绘制雷达边框这一步其实就是绘制一个圆,输入一个屏幕坐标st,原型坐标还有半径,使用distance求出坐标上任意点到圆心的距离,将这个距离接近圆半径的点绘 ...
vue 雷达扫描_雷达扫描效果（canvas）
[实例简介]雷达扫描 [实例截图] [核心代码] radar canvas { margin: 20px auto; display: block; } var CFG = { perDeg: 1, ...
Flutter 雷达扫描效果、Flutter旋转扫描
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
3.7 使用极坐标网格工具制作雷达扫描效果 [Illustrator CC教程]
原文:http://coolketang.com/staticDesign/5a979c7417d00900358f230f.html 1. 本节课将为您演示[极坐标网格工具]的使用.首先鼠标长按工具 ...

Cesium 四种雷达扫描效果

Cesium 雷达效果：

Cesium 四种雷达扫描效果相关推荐

最新文章

热门文章