mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-05 07:37:31 +00:00
927 lines
36 KiB
HTML
927 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||
<title></title>
|
||
<script src="../Build/Cesium/Cesium.js"></script>
|
||
|
||
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
|
||
<!-- <script type="text/javascript" src="CesiumPopup.js"></script> -->
|
||
|
||
<link href="https://cdn.bootcdn.net/ajax/libs/video.js/5.15.0/video-js.css" rel="stylesheet">
|
||
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.15.0/video.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
|
||
<style>
|
||
@import url(../Build/Cesium/Widgets/widgets.css);
|
||
html,
|
||
body,
|
||
#cesiumContainer {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<script>
|
||
|
||
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjYzOTI5NC0yM2QyLTQyOTgtYWM5OS1lM2MwNTYwMGEzMjciLCJpZCI6ODQ1MjYsImlhdCI6MTY0NjM1ODM5OX0.BzsVR7Lt9RhsCia-R7E64KunaAME0HGD7Sv2-xF-RIQ';
|
||
|
||
var viewer = new Cesium.Viewer('cesiumContainer', {
|
||
|
||
|
||
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
|
||
url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
|
||
maximumLevel: 18,
|
||
}),
|
||
|
||
// terrainProvider: Cesium.createWorldTerrain({
|
||
// requestVertexNormals: true,
|
||
// requestWaterMask: true
|
||
// }),
|
||
shouldAnimate: true,
|
||
selectionIndicator: false,
|
||
infoBox: false,
|
||
geocoder: false, // 位置查找工具
|
||
baseLayerPicker: false,// 图层选择器（地形影像服务）
|
||
timeline: false, // 底部时间线
|
||
homeButton: false,// 视角返回初始位置
|
||
fullscreenButton: false, // 全屏
|
||
animation: false, // 左下角仪表盘（动画器件）
|
||
sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
|
||
navigationHelpButton: false, //导航帮助按钮
|
||
});
|
||
//viewer.scene.debugShowFramesPerSecond = true;
|
||
viewer.cesiumWidget.creditContainer.style.display = "none";
|
||
var towerJson;
|
||
|
||
// viewer.flyTo(tileset);
|
||
var position = Cesium.Cartesian3.fromDegrees(120.619907115,31.317987368,500);//定义飞行终点的坐标
|
||
console.log(position);
|
||
viewer.camera.flyTo({
|
||
// 设置相机前往的位置
|
||
destination: position,
|
||
// 相机的朝向
|
||
orientation: {
|
||
// 如果围绕y轴旋转，偏航角
|
||
heading: Cesium.Math.toRadians(0),
|
||
// 如果围绕x轴旋转，俯仰角
|
||
pitch: Cesium.Math.toRadians(-90),
|
||
// 如果围绕z轴旋转，翻滚角
|
||
roll: 0.0,
|
||
},
|
||
duration: 1,
|
||
complete: function () {
|
||
// 在相机移动完成后执行
|
||
// console.log("已抵达北京天安门");
|
||
},
|
||
});
|
||
|
||
viewer.scene.globe.depthTestAgainstTerrain=true
|
||
|
||
|
||
|
||
let ECEF = (function () {
|
||
var _=function () {
|
||
this.PI = 3.141592653589793238;
|
||
this.a = 6378137.0;
|
||
this.b = 6356752.3142
|
||
this.f = (this.a - this.b) / this.a;
|
||
this.e_sq = this.f * (2.0 - this.f);
|
||
this.ee = 0.00669437999013;
|
||
this.WGSF = 1 / 298.257223563;
|
||
this.WGSe2 = this.WGSF * (2 - this.WGSF);
|
||
this.WGSa = 6378137.00000;
|
||
this.EPSILON = 1.0e-12;
|
||
}
|
||
_.prototype.CalculateCoordinates = function (point, azimuth, elevation, distance) {
|
||
var vertical_height = distance * Math.sin(2 * this.PI / 360 * elevation);//垂直高度
|
||
var horizontal_distance = distance * Math.cos(2 * this.PI / 360 * elevation);//水平距离
|
||
if (azimuth > 360) azimuth = azimuth % 360;
|
||
if (azimuth < 0) azimuth = 360 + (azimuth % 360);
|
||
|
||
var point1 = this.lonLat2WebMercator(point);
|
||
var lnglat = null;
|
||
|
||
var x_length , y_length
|
||
if (azimuth <= 90) {//第四象限
|
||
x_length = horizontal_distance * Math.cos(2 * this.PI / 360 * azimuth);
|
||
y_length = horizontal_distance * Math.sin(2 * this.PI / 360 * azimuth);
|
||
lnglat = {
|
||
x: point1.x + x_length,
|
||
y: point1.y - y_length
|
||
}
|
||
} else if (azimuth > 90 && azimuth <= 180) {//第三象限
|
||
x_length = horizontal_distance * Math.sin(2 * this.PI / 360 * (azimuth - 90));
|
||
y_length = horizontal_distance * Math.cos(2 * this.PI / 360 * (azimuth - 90));
|
||
lnglat = {
|
||
x: point1.x - x_length,
|
||
y: point1.y - y_length
|
||
}
|
||
} else if (azimuth > 180 && azimuth <= 270) {//第二象限
|
||
x_length = horizontal_distance * Math.cos(2 * this.PI / 360 * (azimuth - 180));
|
||
y_length = horizontal_distance * Math.sin(2 * this.PI / 360 * (azimuth - 180));
|
||
lnglat = {
|
||
x: point1.x - x_length,
|
||
y: point1.y + y_length
|
||
}
|
||
} else {//第一象限
|
||
x_length = horizontal_distance * Math.sin(2 * this.PI / 360 * (azimuth - 270));
|
||
y_length = horizontal_distance * Math.cos(2 * this.PI / 360 * (azimuth - 270));
|
||
lnglat = {
|
||
x: point1.x + x_length,
|
||
y: point1.y + y_length
|
||
}
|
||
}
|
||
lnglat = this.webMercator2LonLat(lnglat);
|
||
return {
|
||
lng: lnglat.x,
|
||
lat: lnglat.y,
|
||
height: vertical_height
|
||
}
|
||
}
|
||
/*
|
||
*经纬度转Web墨卡托
|
||
*@lonLat 经纬度
|
||
*/
|
||
_.prototype.lonLat2WebMercator = function (lonLat) {
|
||
let x = lonLat.x * this.a / 180;
|
||
let y = Math.log(Math.tan((90 + lonLat.y) * this.PI / 360)) / (this.PI / 180);
|
||
y = y * this.a / 180;
|
||
return {
|
||
x: x,
|
||
y: y
|
||
}
|
||
}
|
||
|
||
/*
|
||
*Web墨卡托转经纬度
|
||
*@mercator 平面坐标
|
||
*/
|
||
_.prototype.webMercator2LonLat = function (mercator) {
|
||
let x = mercator.x / this.a * 180;
|
||
let y = mercator.y / this.a * 180;
|
||
y = 180 / this.PI * (2 * (Math.exp(y * this.PI / 180)) - this.PI / 2);
|
||
return {
|
||
x: x,
|
||
y: y
|
||
}
|
||
}
|
||
|
||
_.prototype.get_atan = function (z, y) {
|
||
let x;
|
||
if (z == 0) {
|
||
x = this.PI / 2;
|
||
} else {
|
||
if (y == 0) {
|
||
x = this.PI;
|
||
} else {
|
||
x = Math.atan(Math.abs(y / z));
|
||
if ((y > 0) && (z < 0)) {
|
||
x = this.PI - x;
|
||
} else if ((y < 0) && (z < 0)) {
|
||
x = this.PI + x;
|
||
} else if ((y < 0) && (z > 0)) {
|
||
x = 2 * this.M_PI - x;
|
||
}
|
||
}
|
||
}
|
||
return x;
|
||
}
|
||
//WGS84转ECEF坐标系
|
||
_.prototype.ConvertLLAToXYZ = function (LLACoor) {
|
||
let lon = this.PI / 180 * LLACoor.longitude;
|
||
let lat = this.PI / 180 * LLACoor.latitude;
|
||
let H = LLACoor.altitude;
|
||
let N0 = this.a / Math.sqrt(1.0 - this.ee * Math.sin(lat) * Math.sin(lat));
|
||
let x = (N0 + H) * Math.cos(lat) * Math.cos(lon);
|
||
let y = (N0 + H) * Math.cos(lat) * Math.sin(lon);
|
||
let z = (N0 * (1.0 - this.ee) + H) * Math.sin(lat);
|
||
return {
|
||
x: x,
|
||
y: y,
|
||
z: z
|
||
}
|
||
}
|
||
|
||
//ECEF坐标系转WGS84
|
||
_.prototype.ConvertXYZToLLA = function (XYZCoor) {
|
||
let longitude = this.get_atan(XYZCoor.x, XYZCoor.y);
|
||
if (longitude < 0) {
|
||
longitude = longitude + this.PI;
|
||
}
|
||
let latitude = this.get_atan(Math.sqrt(XYZCoor.x * XYZCoor.x + XYZCoor.y * XYZCoor.y), XYZCoor.z);
|
||
|
||
let W = Math.sqrt(1 - this.WGSe2 * Math.sin(latitude) * Math.sin(latitude));
|
||
let N = this.WGSa / W;
|
||
let B1;
|
||
do {
|
||
B1 = latitude;
|
||
W = Math.sqrt(1 - this.WGSe2 * Math.sin(B1) * Math.sin(B1));
|
||
N = this.WGSa / W;
|
||
latitude = this.get_atan(Math.sqrt(XYZCoor.x * XYZCoor.x + XYZCoor.y * XYZCoor.y), (XYZCoor.z + N * this.WGSe2 * Math.sin(B1)));
|
||
}
|
||
while (Math.abs(latitude - B1) > this.EPSILON);
|
||
|
||
var altitude = Math.sqrt(XYZCoor.x * XYZCoor.x + XYZCoor.y * XYZCoor.y) / Math.cos(latitude) - this.WGSa / Math.sqrt(1 - this.WGSe2 * Math.sin(latitude) * Math.sin(latitude));
|
||
|
||
return {
|
||
longitude: longitude * 180 / this.PI,
|
||
latitude: latitude * 180 / this.PI,
|
||
altitude: altitude
|
||
}
|
||
}
|
||
/*北东天坐标系转WGS84
|
||
@ a A点坐标
|
||
@ p 相对参数，距离、方位角、仰角
|
||
*/
|
||
// 俯视角pitch -elevation
|
||
//航向角heading（yaw） -azimuth
|
||
_.prototype.enu_to_ecef = function (a, p) {
|
||
//距离
|
||
let distance = p.distance;
|
||
//方位角
|
||
let azimuth = p.azimuth;
|
||
//仰角
|
||
let elevation = p.elevation;
|
||
|
||
let zUp = elevation >= 0 ? distance * Math.sin(this.PI / 180 * elevation) : (-1) * distance * Math.sin(this.PI / 180 * Math.abs(elevation));
|
||
|
||
let d = distance * Math.cos(this.PI / 180 * Math.abs(elevation));
|
||
let xEast;
|
||
let yNorth;
|
||
if (azimuth <= 90) {
|
||
xEast = d * Math.sin(this.PI / 180 * azimuth);
|
||
yNorth = d * Math.cos(this.PI / 180 * azimuth);
|
||
} else if (azimuth > 90 && azimuth < 180) {
|
||
xEast = d * Math.cos(this.PI / 180 * (azimuth - 90));
|
||
yNorth = (-1) * d * Math.sin(this.PI / 180 * (azimuth - 90));
|
||
} else if (azimuth > 180 && azimuth < 270) {
|
||
xEast = (-1) * d * Math.sin(this.PI / 180 * (azimuth - 180));
|
||
yNorth = (-1) * d * Math.cos(this.PI / 180 * (azimuth - 180));
|
||
} else {
|
||
xEast = (-1) * d * Math.sin(this.PI / 180 * (360 - azimuth));
|
||
yNorth = d * Math.cos(this.PI / 180 * (360 - azimuth));
|
||
}
|
||
|
||
let lamb = this.radians(a.latitude);
|
||
let phi = this.radians(a.longitude);
|
||
let h0 = a.altitude;
|
||
|
||
let s = Math.sin(lamb);
|
||
let N = this.a / Math.sqrt(1.0 - this.e_sq * s * s);
|
||
|
||
let sin_lambda = Math.sin(lamb);
|
||
let cos_lambda = Math.cos(lamb);
|
||
|
||
let sin_phi = Math.sin(phi);
|
||
let cos_phi = Math.cos(phi);
|
||
|
||
let x0 = (h0 + N) * cos_lambda * cos_phi;
|
||
let y0 = (h0 + N) * cos_lambda * sin_phi;
|
||
let z0 = (h0 + (1 - this.e_sq) * N) * sin_lambda;
|
||
|
||
let t = cos_lambda * zUp - sin_lambda * yNorth;
|
||
|
||
let zd = sin_lambda * zUp + cos_lambda * yNorth;
|
||
let xd = cos_phi * t - sin_phi * xEast;
|
||
let yd = sin_phi * t + cos_phi * xEast;
|
||
|
||
return this.ConvertXYZToLLA({
|
||
x: xd + x0,
|
||
y: yd + y0,
|
||
z: zd + z0
|
||
})
|
||
}
|
||
_.prototype.radians = function (degree) {
|
||
return this.PI / 180 * degree;
|
||
}
|
||
return _
|
||
})()
|
||
|
||
let CesiumVideo3d = (function () {
|
||
|
||
var videoShed3dShader = "\r\n\r\n\r\n\r\nuniform float mixNum;\r\nuniform sampler2D colorTexture;\r\nuniform sampler2D stcshadow; \r\nuniform sampler2D videoTexture;\r\nuniform sampler2D depthTexture;\r\nuniform mat4 _shadowMap_matrix; \r\nuniform vec4 shadowMap_lightPositionEC; \r\nuniform vec4 shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness; \r\nuniform vec4 shadowMap_texelSizeDepthBiasAndNormalShadingSmooth; \r\nvarying vec2 v_textureCoordinates;\r\nvec4 toEye(in vec2 uv, in float depth){\r\n vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\r\n vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\r\n posInCamera =posInCamera / posInCamera.w;\r\n return posInCamera;\r\n}\r\nfloat getDepth(in vec4 depth){\r\n float z_window = czm_unpackDepth(depth);\r\n z_window = czm_reverseLogDepth(z_window);\r\n float n_range = czm_depthRange.near;\r\n float f_range = czm_depthRange.far;\r\n return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\r\n}\r\nfloat _czm_sampleShadowMap(sampler2D shadowMap, vec2 uv){\r\n return texture2D(shadowMap, uv).r;\r\n}\r\nfloat _czm_shadowDepthCompare(sampler2D shadowMap, vec2 uv, float depth){\r\n return step(depth, _czm_sampleShadowMap(shadowMap, uv));\r\n}\r\nfloat _czm_shadowVisibility(sampler2D shadowMap, czm_shadowParameters shadowParameters){\r\n float depthBias = shadowParameters.depthBias;\r\n float depth = shadowParameters.depth;\r\n float nDotL = shadowParameters.nDotL;\r\n float normalShadingSmooth = shadowParameters.normalShadingSmooth;\r\n float darkness = shadowParameters.darkness;\r\n vec2 uv = shadowParameters.texCoords;\r\n depth -= depthBias;\r\n vec2 texelStepSize = shadowParameters.texelStepSize;\r\n float radius = 1.0;\r\n float dx0 = -texelStepSize.x * radius;\r\n float dy0 = -texelStepSize.y * radius;\r\n float dx1 = texelStepSize.x * radius;\r\n float dy1 = texelStepSize.y * radius;\r\n float visibility = \r\n (\r\n _czm_shadowDepthCompare(shadowMap, uv, depth)\r\n +_czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(0.0, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, dy0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, 0.0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, 0.0), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx0, dy1), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(0.0, dy1), depth) +\r\n _czm_shadowDepthCompare(shadowMap, uv + vec2(dx1, dy1), depth)\r\n ) * (1.0 / 9.0)\r\n ;\r\n return visibility;\r\n}\r\nvec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point){\r\n vec3 v01 = point -planeOrigin;\r\n float d = dot(planeNormal, v01) ;\r\n return (point - planeNormal * d);\r\n}\r\nfloat ptm(vec3 pt){\r\n return sqrt(pt.x*pt.x + pt.y*pt.y + pt.z*pt.z);\r\n}\r\nvoid main() \r\n{ \r\n const float PI = 3.141592653589793;\r\n vec4 color = texture2D(colorTexture, v_textureCoordinates);\r\n vec4 currD = texture2D(depthTexture, v_textureCoordinates);\r\n if(currD.r>=1.0){\r\n gl_FragColor = color;\r\n return;\r\n }\r\n \r\n float depth = getDepth(currD);\r\n vec4 positionEC = toEye(v_textureCoordinates, depth);\r\n vec3 normalEC = vec3(1.0);\r\n czm_shadowParameters shadowParameters; \r\n shadowParameters.texelStepSize = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.xy; \r\n shadowParameters.depthBias = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.z; \r\n shadowParameters.normalShadingSmooth = shadowMap_texelSizeDepthBiasAndNormalShadingSmooth.w; \r\n shadowParameters.darkness = shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness.w; \r\n shadowParameters.depthBias *= max(depth * 0.01, 1.0); \r\n vec3 directionEC = normalize(positionEC.xyz - shadowMap_lightPositionEC.xyz); \r\n float nDotL = clamp(dot(normalEC, -directionEC), 0.0, 1.0); \r\n vec4 shadowPosition = _shadowMap_matrix * positionEC; \r\n shadowPosition /= shadowPosition.w; \r\n if (any(lessThan(shadowPosition.xyz, vec3(0.0))) || any(greaterThan(shadowPosition.xyz, vec3(1.0)))) \r\n { \r\n gl_FragColor = color;\r\n return;\r\n }\r\n\r\n shadowParameters.texCoords = shadowPosition.xy; \r\n shadowParameters.depth = shadowPosition.z; \r\n shadowParameters.nDotL = nDotL; \r\n float visibility = _czm_shadowVisibility(stcshadow, shadowParameters); \r\n\r\n vec4 videoColor = texture2D(videoTexture,shadowPosition.xy);\r\n if(visibility==1.0){\r\n gl_FragColor = mix(color,vec4(videoColor.xyz,1.0),mixNum*videoColor.a);\r\n }else{\r\n if(abs(shadowPosition.z-0.0)<0.01){\r\n return;\r\n }\r\n gl_FragColor = color;\r\n }\r\n} ";
|
||
// var Cesium=null
|
||
|
||
var videoShed3d=function(viewer, param) {
|
||
|
||
// Cesium=cesium
|
||
this.ECEF = new ECEF();
|
||
this.param = param;
|
||
|
||
var option = this._initCameraParam();
|
||
this.optionType = {
|
||
Color: 1,
|
||
Image: 2,
|
||
Video: 3
|
||
}
|
||
console.log(option)
|
||
this.near = option.near ? option.near : 0.1;
|
||
if (option || (option = {}), this.viewer = viewer, this._cameraPosition = option.cameraPosition, this._position = option.position,
|
||
this.type = option.type, this._alpha = option.alpha || 1, this.url = option.url, this.color = option.color,
|
||
this._debugFrustum = Cesium.defaultValue(option.debugFrustum, !0), this._aspectRatio = option.aspectRatio || this._getWinWidHei(),
|
||
this._camerafov = option.fov || Cesium.Math.toDegrees(this.viewer.scene.camera.frustum.fov), this.texture = option.texture || new Cesium.Texture({
|
||
context: this.viewer.scene.context,
|
||
source: {
|
||
width: 1,
|
||
height: 1,
|
||
arrayBufferView: new Uint8Array([255, 255, 255, 255])
|
||
},
|
||
flipY: !1
|
||
}), this._videoPlay = Cesium.defaultValue(option.videoPlay, !0), this.defaultShow = Cesium.defaultValue(option.show, !0), !this.cameraPosition || !this.position) return void console.log('初始化失败：请确认相机位置与视点位置正确!');
|
||
switch (this.type) {
|
||
default:
|
||
case this.optionType.Video:
|
||
this.activeVideo(this.url);
|
||
break;
|
||
case this.optionType.Image:
|
||
this.activePicture(this.url);
|
||
this.deActiveVideo();
|
||
break;
|
||
case this.optionType.Color:
|
||
this.activeColor(this.color),
|
||
this.deActiveVideo();
|
||
}
|
||
this._createShadowMap(),
|
||
this._getOrientation(),
|
||
this._addCameraFrustum()
|
||
this._addPostProcess()
|
||
this.viewer.scene.primitives.add(this)
|
||
}
|
||
Object.defineProperties(videoShed3d.prototype, {
|
||
alpha: {
|
||
get: function () {
|
||
return this._alpha
|
||
},
|
||
set: function (e) {
|
||
return this._alpha = e
|
||
}
|
||
},
|
||
aspectRatio: {
|
||
get: function () {
|
||
return this._aspectRatio
|
||
},
|
||
set: function (e) {
|
||
this._aspectRatio = e,
|
||
this._changeVideoWidHei()
|
||
}
|
||
},
|
||
debugFrustum: {
|
||
get: function () {
|
||
return this._debugFrustum
|
||
},
|
||
set: function (e) {
|
||
this._debugFrustum = e,
|
||
this.cameraFrustum.show = e
|
||
}
|
||
},
|
||
fov: {
|
||
get: function () {
|
||
return this._camerafov
|
||
},
|
||
set: function (e) {
|
||
this._camerafov = e,
|
||
this._changeCameraFov()
|
||
}
|
||
},
|
||
cameraPosition: {
|
||
get: function () {
|
||
return this._cameraPosition
|
||
},
|
||
set: function (e) {
|
||
e && (this._cameraPosition = e, this._changeCameraPos())
|
||
}
|
||
},
|
||
position: {
|
||
get: function () {
|
||
return this._position
|
||
},
|
||
set: function (e) {
|
||
e && (this._position = e, this._changeViewPos())
|
||
}
|
||
},
|
||
videoPlay: {
|
||
get: function () {
|
||
return this._videoPlay
|
||
},
|
||
set: function (e) {
|
||
this._videoPlay = Boolean(e),
|
||
this._videoEle && (this.videoPlay ? this._videoEle.paly() : this._videoEle.pause())
|
||
}
|
||
},
|
||
params: {
|
||
get: function () {
|
||
var t = {}
|
||
return t.type = this.type,
|
||
this.type == this.optionType.Color ? t.color = this.color : t.url = this.url,
|
||
t.position = this.position,
|
||
t.cameraPosition = this.cameraPosition,
|
||
t.fov = this.fov,
|
||
t.aspectRatio = this.aspectRatio,
|
||
t.alpha = this.alpha,
|
||
t.debugFrustum = this.debugFrustum,
|
||
t
|
||
}
|
||
},
|
||
show: {
|
||
get: function () {
|
||
return this.defaultShow
|
||
},
|
||
set: function (e) {
|
||
this.defaultShow = Boolean(e),
|
||
this._switchShow()
|
||
}
|
||
}
|
||
})
|
||
videoShed3d.prototype._initCameraParam = function () {
|
||
var viewPoint = this.ECEF.enu_to_ecef({ longitude: this.param.position.x * 1, latitude: this.param.position.y * 1, altitude: this.param.position.z * 1 },
|
||
{ distance: this.param.far, azimuth: this.param.rotation.y * 1, elevation: this.param.rotation.x * 1 });
|
||
var position = Cesium.Cartesian3.fromDegrees(120.619907115,31.317987368,200);
|
||
var cameraPosition = Cesium.Cartesian3.fromDegrees(this.param.position.x * 1, this.param.position.y * 1, this.param.position.z * 1);
|
||
return {
|
||
type: 3,
|
||
url: this.param.url,
|
||
cameraPosition: cameraPosition,
|
||
position: position,
|
||
alpha: this.param.alpha,
|
||
near: this.param.near,
|
||
fov: this.param.fov,
|
||
debugFrustum: this.param.debugFrustum
|
||
}
|
||
}
|
||
/**
|
||
* 旋转
|
||
*/
|
||
videoShed3d.prototype._changeRotation = function (e) {
|
||
if (e) {
|
||
this.param.rotation = e;
|
||
var option = this._initCameraParam();
|
||
this.position = option.position;
|
||
}
|
||
}
|
||
/**
|
||
* 相机位置
|
||
*/
|
||
videoShed3d.prototype._changeCameraPosition = function (e) {
|
||
if (e) {
|
||
this.param.position = e;
|
||
var option = this._initCameraParam();
|
||
this.cameraPosition = option.cameraPosition;
|
||
}
|
||
}
|
||
videoShed3d.prototype._changeFar = function (e) {
|
||
if (e) {
|
||
this.param.far = e;
|
||
var option = this._initCameraParam();
|
||
this.position = option.position;
|
||
}
|
||
}
|
||
videoShed3d.prototype._changeNear = function (e) {
|
||
if (e) {
|
||
this.param.near = e;
|
||
this.near = this.param.near;
|
||
this._changeCameraPos();
|
||
}
|
||
}
|
||
/**获取三维地图容器像素大小
|
||
*/
|
||
videoShed3d.prototype._getWinWidHei = function () {
|
||
var viewer = this.viewer.scene;
|
||
return viewer.canvas.clientWidth / viewer.canvas.clientHeight;
|
||
}
|
||
videoShed3d.prototype._changeCameraFov = function () {
|
||
this.viewer.scene.postProcessStages.remove(this.postProcess)
|
||
this.viewer.scene.primitives.remove(this.cameraFrustum),
|
||
this._createShadowMap(this.cameraPosition, this.position),
|
||
this._getOrientation(),
|
||
this._addCameraFrustum(),
|
||
this._addPostProcess()
|
||
}
|
||
videoShed3d.prototype._changeVideoWidHei = function () {
|
||
this.viewer.scene.postProcessStages.remove(this.postProcess),
|
||
this.viewer.scene.primitives.remove(this.cameraFrustum)
|
||
this._createShadowMap(this.cameraPosition, this.position),
|
||
this._getOrientation(),
|
||
this._addCameraFrustum(),
|
||
this._addPostProcess()
|
||
}
|
||
videoShed3d.prototype._changeCameraPos = function () {
|
||
this.viewer.scene.postProcessStages.remove(this.postProcess),
|
||
this.viewer.scene.primitives.remove(this.cameraFrustum),
|
||
this.viewShadowMap.destroy(),
|
||
this.cameraFrustum.destroy(),
|
||
this._createShadowMap(this.cameraPosition, this.position),
|
||
this._getOrientation(),
|
||
this._addCameraFrustum(),
|
||
this._addPostProcess()
|
||
}
|
||
videoShed3d.prototype._changeViewPos = function () {
|
||
this.viewer.scene.postProcessStages.remove(this.postProcess),
|
||
this.viewer.scene.primitives.remove(this.cameraFrustum),
|
||
this.viewShadowMap.destroy(),
|
||
this.cameraFrustum.destroy(),
|
||
this._createShadowMap(this.cameraPosition, this.position),
|
||
this._getOrientation(),
|
||
this._addCameraFrustum(),
|
||
this._addPostProcess()
|
||
}
|
||
videoShed3d.prototype._switchShow = function () {
|
||
this.show ? !this.postProcess && this._addPostProcess() : (this.viewer.scene.postProcessStages.remove(this.postProcess), delete this.postProcess, this.postProcess = null),
|
||
this.cameraFrustum.show = this.show
|
||
}
|
||
/** 创建视频Element
|
||
* @param {String} url 视频地址
|
||
**/
|
||
videoShed3d.prototype._createVideoEle = function (url) {
|
||
this.videoId = "visualDomId";
|
||
var t = document.createElement("SOURCE");
|
||
t.type = "video/mp4",
|
||
t.src = url;
|
||
var i = document.createElement("SOURCE");
|
||
i.type = "video/quicktime",
|
||
i.src = url;
|
||
var a = document.createElement("VIDEO");
|
||
return a.setAttribute("autoplay", !0),
|
||
a.setAttribute("loop", !0),
|
||
a.setAttribute("crossorigin", !0),
|
||
a.appendChild(t),
|
||
a.appendChild(i),
|
||
//document.body.appendChild(a),
|
||
this._videoEle = a,
|
||
a
|
||
}
|
||
/** 视频投射
|
||
* @param {String} url 视频地址
|
||
*/
|
||
videoShed3d.prototype.activeVideo = function (url) {
|
||
var video = this._createVideoEle(url),
|
||
that = this;
|
||
if (video) {
|
||
this.type = that.optionType.Video;
|
||
var viewer = this.viewer;
|
||
this.activeVideoListener || (this.activeVideoListener = function () {
|
||
that.videoTexture && that.videoTexture.destroy(),
|
||
that.videoTexture = new Cesium.Texture({
|
||
context: viewer.scene.context,
|
||
source: video,
|
||
width: 1,
|
||
height: 1,
|
||
pixelFormat: Cesium.PixelFormat.RGBA,
|
||
pixelDatatype: Cesium.PixelDatatype.UNSIGNED_BYTE
|
||
})
|
||
}),
|
||
viewer.clock.onTick.addEventListener(this.activeVideoListener)
|
||
}
|
||
}
|
||
videoShed3d.prototype.deActiveVideo = function () {
|
||
if (this.activeVideoListener) {
|
||
this.viewer.clock.onTick.removeEventListener(this.activeVideoListener),
|
||
delete this.activeVideoListener
|
||
}
|
||
}
|
||
/** 图片投放
|
||
* @param {String} url 图片地址
|
||
**/
|
||
videoShed3d.prototype.activePicture = function (url) {
|
||
this.videoTexture = this.texture;
|
||
var that = this,
|
||
img = new Image;
|
||
img.onload = function () {
|
||
that.type = that.optionType.Image,
|
||
that.videoTexture = new Cesium.Texture({
|
||
context: that.viewer.scene.context,
|
||
source: img
|
||
})
|
||
},
|
||
img.onerror = function () {
|
||
console.log('图片加载失败:' + url)
|
||
},
|
||
img.src = url
|
||
}
|
||
videoShed3d.prototype.locate = function () {
|
||
var cameraPosition = Cesium.clone(this.cameraPosition),
|
||
position = Cesium.clone(this.position);
|
||
this.viewer.Camera.position = cameraPosition,
|
||
this.viewer.camera.direction = Cesium.Cartesian3.subtract(position, cameraPosition, new Cesium.Cartesian3(0, 0, 0)),
|
||
this.viewer.camera.up = Cesium.Cartesian3.normalize(cameraPosition, new Cesium.Cartesian3(0, 0, 0))
|
||
}
|
||
videoShed3d.prototype.update = function (e) {
|
||
this.viewShadowMap && this.viewer.scene.frameState.shadowMaps.push(this.viewShadowMap) // *重点* 多投影
|
||
}
|
||
videoShed3d.prototype.destroy = function () {
|
||
this.viewer.scene.postProcessStages.remove(this.postProcess),
|
||
this.viewer.scene.primitives.remove(this.cameraFrustum),
|
||
//this._videoEle && this._videoEle.parentNode.removeChild(this._videoEle),
|
||
this.activeVideoListener && this.viewer.clock.onTick.removeEventListener(this.activeVideoListener),
|
||
this.activeVideoListener && delete this.activeVideoListener,
|
||
delete this.postProcess,
|
||
delete this.viewShadowMap,
|
||
delete this.color,
|
||
delete this.viewDis,
|
||
delete this.cameraPosition,
|
||
delete this.position,
|
||
delete this.alpha,
|
||
delete this._camerafov,
|
||
delete this._cameraPosition,
|
||
delete this.videoTexture,
|
||
delete this.cameraFrustum,
|
||
delete this._videoEle,
|
||
delete this._debugFrustum,
|
||
delete this._position,
|
||
delete this._aspectRatio,
|
||
delete this.url,
|
||
delete this.orientation,
|
||
delete this.texture,
|
||
delete this.videoId,
|
||
delete this.type,
|
||
this.viewer.scene.primitives.remove(this),
|
||
delete this.viewer
|
||
}
|
||
// 创建shadowmap
|
||
videoShed3d.prototype._createShadowMap = function () {
|
||
var e = this.cameraPosition,
|
||
t = this.position,
|
||
i = this.viewer.scene,
|
||
a = new Cesium.Camera(i);
|
||
a.position = e,
|
||
a.direction = Cesium.Cartesian3.subtract(t, e, new Cesium.Cartesian3(0, 0, 0)), //计算两个笛卡尔的组分差异。
|
||
a.up = Cesium.Cartesian3.normalize(e, new Cesium.Cartesian3(0, 0, 0)); // 归一化
|
||
var n = Cesium.Cartesian3.distance(t, e);
|
||
this.viewDis = n,
|
||
a.frustum = new Cesium.PerspectiveFrustum({
|
||
fov: Cesium.Math.toRadians(this.fov),
|
||
aspectRatio: this.aspectRatio,
|
||
near: this.near,
|
||
far: 1000
|
||
});
|
||
this.viewShadowMap = new Cesium.ShadowMap({
|
||
lightCamera: a,
|
||
enable: !1,
|
||
isPointLight: !1,
|
||
isSpotLight: !0,
|
||
cascadesEnabled: !1,
|
||
context: i.context,
|
||
pointLightRadius: n
|
||
})
|
||
}
|
||
// 获取shadowmap位置
|
||
videoShed3d.prototype._getOrientation = function () {
|
||
var e = this.cameraPosition,
|
||
t = this.position,
|
||
i = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(t, e, new Cesium.Cartesian3), new Cesium.Cartesian3),
|
||
a = Cesium.Cartesian3.normalize(e, new Cesium.Cartesian3),
|
||
n = new Cesium.Camera(this.viewer.scene);
|
||
n.position = e,
|
||
n.direction = i,
|
||
n.up = a,
|
||
i = n.directionWC,
|
||
a = n.upWC;
|
||
var r = n.rightWC,
|
||
o = new Cesium.Cartesian3,
|
||
l = new Cesium.Matrix3,
|
||
u = new Cesium.Quaternion;
|
||
r = Cesium.Cartesian3.negate(r, o);
|
||
var d = l;
|
||
Cesium.Matrix3.setColumn(d, 0, r, d),
|
||
Cesium.Matrix3.setColumn(d, 1, a, d),
|
||
Cesium.Matrix3.setColumn(d, 2, i, d);
|
||
var c = Cesium.Quaternion.fromRotationMatrix(d, u);
|
||
|
||
|
||
|
||
|
||
|
||
/*var viewMatrix=n.viewMatrix;
|
||
var inverseViewMatrix=n.inverseViewMatrix;
|
||
console.log("视图矩阵=",viewMatrix);
|
||
console.log("逆视图矩阵=",inverseViewMatrix);
|
||
|
||
var frustum = new Cesium.PerspectiveFrustum({
|
||
fov :20,
|
||
aspectRatio : 0.75,
|
||
near : 1.0,
|
||
far : 10.0
|
||
});
|
||
|
||
var projectionMatrix=frustum.projectionMatrix;
|
||
var infiniteProjectionMatrix=frustum.infiniteProjectionMatrix;
|
||
console.log("投影矩阵=",projectionMatrix);
|
||
console.log("透视投影矩阵=",infiniteProjectionMatrix);
|
||
|
||
//透视投 影矩阵反转
|
||
var inverseInfiniteProjectionMatrix=new Cesium.Matrix4();
|
||
Cesium.Matrix4.inverse(infiniteProjectionMatrix,inverseInfiniteProjectionMatrix);
|
||
console.log("透视投 影矩阵反转=",inverseInfiniteProjectionMatrix);
|
||
|
||
//逆视图投影矩阵
|
||
var inverseViewProjectionMatrix=new Cesium.Matrix4();
|
||
Cesium.Matrix4.multiply(inverseInfiniteProjectionMatrix,inverseViewMatrix,inverseViewProjectionMatrix)
|
||
console.log("逆视图投影矩阵=",inverseViewProjectionMatrix);
|
||
|
||
//视图投影矩阵
|
||
var viewProjectionMatrix=new Cesium.Matrix4();
|
||
Cesium.Matrix4.inverse(inverseViewProjectionMatrix,viewProjectionMatrix);
|
||
console.log("视图投影矩阵=",viewProjectionMatrix);
|
||
|
||
//远平面标准模型矩阵
|
||
var matrix4 = Cesium.Matrix4.fromUniformScale(10);
|
||
console.log("远平面标准模型矩阵=",matrix4);
|
||
|
||
//模型矩阵
|
||
var modelMatrix=new Cesium.Matrix4();
|
||
Cesium.Matrix4.multiply(inverseViewMatrix,matrix4,modelMatrix)
|
||
console.log("模型矩阵=",modelMatrix);
|
||
|
||
//视图矩阵与逆视图投影矩阵相乘得到立方体模型视图
|
||
var uBoxMV=new Cesium.Matrix4();
|
||
Cesium.Matrix4.multiply(viewMatrix,inverseViewProjectionMatrix,uBoxMV)
|
||
console.log("立方体模型视图=",uBoxMV);
|
||
|
||
//逆立方体模型视图
|
||
var uInverseBoxMV=new Cesium.Matrix4();
|
||
Cesium.Matrix4.multiply(viewMatrix,viewProjectionMatrix,uInverseBoxMV)
|
||
console.log("立方体模型视图=",uInverseBoxMV);
|
||
|
||
//将这两个模型视图赋予分类基元类的一致性映射 参数便可以最终实现视频监控图像与实景三维场景的融 合
|
||
|
||
var geometry =this.creacteGeometry(5,5);
|
||
var instance = new Cesium.GeometryInstance({
|
||
// geometry: //new Cesium.Geometry({}),
|
||
// geometry: new Cesium.GeometryInstance({
|
||
// geometry:new Cesium.FrustumOutlineGeometry ({
|
||
// origin: Cesium.Cartesian3.fromDegrees(cameraLong,cameraLat, cameraHeight),
|
||
// orientation:orientation,
|
||
// frustum: perspectiveFrustum,
|
||
// _drawNearPlane: true
|
||
// }),
|
||
geometry:geometry,
|
||
classificationType:Cesium.ClassificationType.BOTH,
|
||
// modelMatrix: modelMatrix,
|
||
attributes : {
|
||
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#ff0000').withAlpha(1.0)),
|
||
show : new Cesium.ShowGeometryInstanceAttribute(true)
|
||
}
|
||
});
|
||
var videoElement = this._createVideoEle("http://localhost:7070/video/北京路与天马路交叉口高点枪机.mkv");
|
||
var material = Cesium.Material.fromType('Image');
|
||
material.uniforms.image = videoElement;
|
||
var _uniformMap ={
|
||
u_boxMV:uBoxMV,
|
||
u_inverseBoxMV:uInverseBoxMV
|
||
};
|
||
this.viewer.scene.primitives.add(new Cesium.Primitive({
|
||
geometryInstances: instance,
|
||
appearance: new Cesium.MaterialAppearance ({
|
||
material: material,
|
||
close:false,
|
||
}),
|
||
modelMatrix: modelMatrix,
|
||
_uniformMap:_uniformMap,
|
||
asynchronous:false,
|
||
compressVertices:false,
|
||
allowPicking:false
|
||
}));*/
|
||
|
||
//ClassificationPrimitive
|
||
return this.orientation = c,
|
||
c
|
||
}
|
||
videoShed3d.prototype.creacteGeometry = function (width, height) {
|
||
var hwidth = width / 2.0;
|
||
var hheigt = height / 2.0;
|
||
var positions = new Float64Array([hwidth, 0.0, hheigt, -hwidth, 0.0, hheigt, -hwidth, 0.0, -hheigt, hwidth, 0.0, -hheigt]);
|
||
var sts = new Float32Array([1.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0]);
|
||
var indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
|
||
var ge = this._createGeometry(positions, sts, indices);
|
||
return ge;
|
||
},
|
||
videoShed3d.prototype._createGeometry = function (positions, sts, indices) {
|
||
/* var Cesium = this.Cesium;*/
|
||
return new Cesium.Geometry({
|
||
attributes: {
|
||
position: new Cesium.GeometryAttribute({
|
||
componentDatatype: Cesium.ComponentDatatype.DOUBLE,
|
||
componentsPerAttribute: 3,
|
||
values: positions
|
||
}),
|
||
normal: new Cesium.GeometryAttribute({
|
||
componentDatatype: Cesium.ComponentDatatype.FLOAT,
|
||
componentsPerAttribute: 3,
|
||
values: new Float32Array([255.0, 0.0, 0.0, 255.0, 0.0, 0.0, 255.0, 0.0, 0.0, 255.0, 0.0, 0.0])
|
||
// values: new Float32Array([0.0, 0.0, 0.0,0.0, 0.0, 0.0,0.0, 0.0, 0.0,0.0, 0.0, 0.0])
|
||
}),
|
||
st: new Cesium.GeometryAttribute({
|
||
componentDatatype: Cesium.ComponentDatatype.FLOAT,
|
||
componentsPerAttribute: 2,
|
||
values: sts
|
||
})
|
||
},
|
||
indices: indices,
|
||
primitiveType: Cesium.PrimitiveType.TRIANGLES,
|
||
vertexFormat: new Cesium.VertexFormat({
|
||
position: true,
|
||
color: true
|
||
}),
|
||
boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
|
||
});
|
||
},
|
||
//创建视锥
|
||
videoShed3d.prototype._addCameraFrustum = function () {
|
||
var e = this;
|
||
this.cameraFrustum = new Cesium.Primitive({
|
||
geometryInstances: new Cesium.GeometryInstance({
|
||
geometry: new Cesium.FrustumOutlineGeometry({
|
||
origin: e.cameraPosition,
|
||
orientation: e.orientation,
|
||
frustum: this.viewShadowMap._lightCamera.frustum,
|
||
_drawNearPlane: !0
|
||
}),
|
||
attributes: {
|
||
color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(0, 0.5, 0.5))
|
||
}
|
||
}),
|
||
appearance: new Cesium.PerInstanceColorAppearance({
|
||
translucent: !1,
|
||
flat: !0
|
||
}),
|
||
asynchronous: !1,
|
||
show: this.debugFrustum && this.show
|
||
}),
|
||
this.viewer.scene.primitives.add(this.cameraFrustum)
|
||
}
|
||
videoShed3d.prototype._addPostProcess = function () {
|
||
var e = this,
|
||
t = videoShed3dShader,
|
||
i = e.viewShadowMap._isPointLight ? e.viewShadowMap._pointBias : e.viewShadowMap._primitiveBias;
|
||
this.postProcess = new Cesium.PostProcessStage({
|
||
fragmentShader: t,
|
||
uniforms: {
|
||
mixNum: function () {
|
||
return e.alpha
|
||
},
|
||
stcshadow: function () {
|
||
return e.viewShadowMap._shadowMapTexture
|
||
},
|
||
videoTexture: function () {
|
||
return e.videoTexture
|
||
},
|
||
_shadowMap_matrix: function () {
|
||
return e.viewShadowMap._shadowMapMatrix
|
||
},
|
||
shadowMap_lightPositionEC: function () {
|
||
return e.viewShadowMap._lightPositionEC
|
||
},
|
||
shadowMap_texelSizeDepthBiasAndNormalShadingSmooth: function () {
|
||
var t = new Cesium.Cartesian2;
|
||
return t.x = 1 / e.viewShadowMap._textureSize.x,
|
||
t.y = 1 / e.viewShadowMap._textureSize.y,
|
||
Cesium.Cartesian4.fromElements(t.x, t.y, i.depthBias, i.normalShadingSmooth, this.combinedUniforms1)
|
||
},
|
||
shadowMap_normalOffsetScaleDistanceMaxDistanceAndDarkness: function () {
|
||
return Cesium.Cartesian4.fromElements(i.normalOffsetScale, e.viewShadowMap._distance, e.viewShadowMap.maximumDistance, e.viewShadowMap._darkness, this.combinedUniforms2)
|
||
}
|
||
|
||
}
|
||
}),
|
||
this.viewer.scene.postProcessStages.add(this.postProcess);
|
||
}
|
||
return videoShed3d;
|
||
})()
|
||
|
||
new CesiumVideo3d(viewer,
|
||
{
|
||
position:{
|
||
|
||
x:120.61990711,
|
||
y: 31.317987368,
|
||
z:300
|
||
},
|
||
far:12000,
|
||
|
||
rotation:{
|
||
y:0,
|
||
x:-60
|
||
},
|
||
url:'/Apps/jiankong.mp4',
|
||
alpha:1,
|
||
near:0.5,
|
||
fov:200,
|
||
debugFrustum:true
|
||
})
|
||
</script>
|
||
</body>
|
||
|
||
</html> |