3 changed files with 339 additions and 19 deletions
@ -0,0 +1,300 @@ |
|||||
|
/** |
||||
|
* 地图相关方法 |
||||
|
* 雷达扫描(viewer) |
||||
|
* |
||||
|
*/ |
||||
|
|
||||
|
class CircleScan { |
||||
|
viewer; |
||||
|
lastStageList; |
||||
|
constructor(viewer) { |
||||
|
this.viewer = viewer |
||||
|
this.lastStageList = [] |
||||
|
} |
||||
|
/** |
||||
|
* 雷达扫描 |
||||
|
* @param {*} position 扫描中心 如[117.270739,31.84309,32] |
||||
|
* @param {*} scanColor 扫描颜色 如"rgba(0,255,0,1)" |
||||
|
* @param {*} maxRadius 扫描半径，单位米 如1000米 |
||||
|
* @param {*} duration 持续时间，单位毫秒 如4000 |
||||
|
*/ |
||||
|
add( |
||||
|
position, |
||||
|
scanColor: any = null, |
||||
|
maxRadius, |
||||
|
duration |
||||
|
) { |
||||
|
this.lastStageList.push( |
||||
|
this.showRadarScan(position, scanColor, maxRadius, duration) |
||||
|
) |
||||
|
return this.lastStageList |
||||
|
} |
||||
|
clear() { |
||||
|
this.lastStageList.forEach((ele) => { |
||||
|
this.clearScanEffects(ele) |
||||
|
}) |
||||
|
this.lastStageList = [] |
||||
|
} |
||||
|
/** |
||||
|
* 雷达扫描 |
||||
|
* @param {*} position 扫描中心 如[117.270739,31.84309,32] |
||||
|
* @param {*} scanColor 扫描颜色 如"rgba(0,255,0,1)" |
||||
|
* @param {*} maxRadius 扫描半径，单位米 如1000米 |
||||
|
* @param {*} duration 持续时间，单位毫秒 如4000 |
||||
|
*/ |
||||
|
showRadarScan( |
||||
|
position, |
||||
|
scanColor = null, |
||||
|
maxRadius, |
||||
|
duration |
||||
|
) { |
||||
|
const cartographicCenter = new Cesium.Cartographic( |
||||
|
Cesium.Math.toRadians(position[0]), |
||||
|
Cesium.Math.toRadians(position[1]), |
||||
|
position[2] |
||||
|
) |
||||
|
scanColor = scanColor ? new Cesium.Color.fromCssColorString(scanColor) : Cesium.Color.LIME |
||||
|
const lastStage = this._addRadarScanPostStage( |
||||
|
cartographicCenter, |
||||
|
maxRadius, |
||||
|
scanColor, |
||||
|
duration |
||||
|
) |
||||
|
return lastStage |
||||
|
} |
||||
|
/** |
||||
|
* 添加雷达扫描线 |
||||
|
* @param {*} cartographicCenter 扫描中心 |
||||
|
* @param {*} maxRadius 扫描半径 |
||||
|
* @param {*} scanColor 扫描颜色 |
||||
|
* @param {*} duration 持续时间 |
||||
|
*/ |
||||
|
_addRadarScanPostStage( |
||||
|
cartographicCenter, |
||||
|
radius, |
||||
|
scanColor, |
||||
|
duration |
||||
|
) { |
||||
|
const _Cartesian3Center = |
||||
|
Cesium.Cartographic.toCartesian(cartographicCenter) |
||||
|
const _Cartesian4Center = new Cesium.Cartesian4( |
||||
|
_Cartesian3Center.x, |
||||
|
_Cartesian3Center.y, |
||||
|
_Cartesian3Center.z, |
||||
|
1 |
||||
|
) |
||||
|
|
||||
|
const _CartographicCenter1 = new Cesium.Cartographic( |
||||
|
cartographicCenter.longitude, |
||||
|
cartographicCenter.latitude, |
||||
|
cartographicCenter.height + 500 |
||||
|
) |
||||
|
const _Cartesian3Center1 = |
||||
|
Cesium.Cartographic.toCartesian(_CartographicCenter1) |
||||
|
const _Cartesian4Center1 = new Cesium.Cartesian4( |
||||
|
_Cartesian3Center1.x, |
||||
|
_Cartesian3Center1.y, |
||||
|
_Cartesian3Center1.z, |
||||
|
1 |
||||
|
) |
||||
|
|
||||
|
const _CartographicCenter2 = new Cesium.Cartographic( |
||||
|
cartographicCenter.longitude + Cesium.Math.toRadians(0.001), |
||||
|
cartographicCenter.latitude, |
||||
|
cartographicCenter.height |
||||
|
) |
||||
|
const _Cartesian3Center2 = |
||||
|
Cesium.Cartographic.toCartesian(_CartographicCenter2) |
||||
|
const _Cartesian4Center2 = new Cesium.Cartesian4( |
||||
|
_Cartesian3Center2.x, |
||||
|
_Cartesian3Center2.y, |
||||
|
_Cartesian3Center2.z, |
||||
|
1 |
||||
|
) |
||||
|
const _RotateQ = new Cesium.Quaternion() |
||||
|
const _RotateM = new Cesium.Matrix3() |
||||
|
|
||||
|
const _time = new Date().getTime() |
||||
|
|
||||
|
const _scratchCartesian4Center = new Cesium.Cartesian4() |
||||
|
const _scratchCartesian4Center1 = new Cesium.Cartesian4() |
||||
|
const _scratchCartesian4Center2 = new Cesium.Cartesian4() |
||||
|
const _scratchCartesian3Normal = new Cesium.Cartesian3() |
||||
|
const _scratchCartesian3Normal1 = new Cesium.Cartesian3() |
||||
|
|
||||
|
const _this = this |
||||
|
const ScanPostStage = new Cesium.PostProcessStage({ |
||||
|
fragmentShader: this._getRadarScanShader(), |
||||
|
uniforms: { |
||||
|
u_scanCenterEC: function () { |
||||
|
return Cesium.Matrix4.multiplyByVector( |
||||
|
_this.viewer.camera._viewMatrix, |
||||
|
_Cartesian4Center, |
||||
|
_scratchCartesian4Center |
||||
|
) |
||||
|
}, |
||||
|
u_scanPlaneNormalEC: function () { |
||||
|
const temp = Cesium.Matrix4.multiplyByVector( |
||||
|
_this.viewer.camera._viewMatrix, |
||||
|
_Cartesian4Center, |
||||
|
_scratchCartesian4Center |
||||
|
) |
||||
|
const 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: function () { |
||||
|
const temp = Cesium.Matrix4.multiplyByVector( |
||||
|
_this.viewer.camera._viewMatrix, |
||||
|
_Cartesian4Center, |
||||
|
_scratchCartesian4Center |
||||
|
) |
||||
|
const temp1 = Cesium.Matrix4.multiplyByVector( |
||||
|
_this.viewer.camera._viewMatrix, |
||||
|
_Cartesian4Center1, |
||||
|
_scratchCartesian4Center1 |
||||
|
) |
||||
|
const 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 |
||||
|
|
||||
|
const 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, |
||||
|
}, |
||||
|
}) |
||||
|
this.viewer.scene.postProcessStages.add(ScanPostStage) |
||||
|
|
||||
|
return ScanPostStage |
||||
|
} |
||||
|
/** |
||||
|
* 雷达扫描线效果Shader |
||||
|
*/ |
||||
|
_getRadarScanShader() { |
||||
|
const 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' |
||||
|
return scanSegmentShader |
||||
|
} |
||||
|
/** |
||||
|
* 清除特效对象 |
||||
|
* @param {*} lastStage 特效对象 |
||||
|
*/ |
||||
|
clearScanEffects(lastStage) { |
||||
|
this.viewer.scene.postProcessStages.remove(lastStage) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
export { |
||||
|
CircleScan |
||||
|
} |
||||
Loading…
Reference in new issue