<!--
|
* @Author : yuan
|
* @Date : 2025-08-05 10:02:04
|
* @LastEditors : yuan
|
* @LastEditTime : 2025-08-06 15:03:06
|
* @FilePath : \video.html
|
* @Description :
|
* Copyright 2025 OBKoro1, All Rights Reserved.
|
* 2025-08-05 10:02:04
|
-->
|
<!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.js"></script>
|
<script src="./ZLMRTCClient.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/Widgets/widgets.css);
|
|
html,
|
body,
|
#cesiumContainer {
|
width: 100%;
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
|
.box-container {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 99;
|
text-align: center;
|
background: yellowgreen;
|
}
|
|
.box-container>div {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.box-container>div>div {
|
width: 96px;
|
height: 36px;
|
line-height: 36px;
|
}
|
|
#VIDEO {
|
position: fixed;
|
left: 10px;
|
bottom: 10px;
|
width: 160px;
|
height: 90px;
|
z-index: 99;
|
}
|
</style>
|
|
|
</head>
|
|
<body>
|
<div id="cesiumContainer">
|
|
|
</div>
|
|
<div class="box-container">
|
<div>
|
<div>heading</div>
|
<div>
|
<button onclick="optionsChange('heading', 1, 1)">+1</button>
|
</div>
|
<div>
|
<button onclick="optionsChange('heading', 2, 1)">-1</button>
|
</div>
|
</div>
|
<div>
|
<div>pitch</div>
|
<div>
|
<button onclick="optionsChange('pitch', 1, 1)">+1</button>
|
</div>
|
<div>
|
<button onclick="optionsChange('pitch', 2, 1)">-1</button>
|
</div>
|
</div>
|
<div>
|
<div>roll</div>
|
<div>
|
<button onclick="optionsChange('roll', 1, 1)">+1</button>
|
</div>
|
<div>
|
<button onclick="optionsChange('roll', 2, 1)">-1</button>
|
</div>
|
</div>
|
<div>
|
<div></div>
|
<div></div>
|
<div></div>
|
</div>
|
<div>
|
<div></div>
|
<div></div>
|
<div></div>
|
</div>
|
<div>
|
<div></div>
|
<div></div>
|
<div></div>
|
</div>
|
</div>
|
|
<video id="VIDEO" class="video-player" controls autoplay muted playsinline>
|
您的浏览器太旧，不支持HTML5视频，请升级浏览器。
|
</video>
|
|
<script>
|
let ele = document.getElementById('VIDEO')
|
|
let webrtcPlayer = new window.ZLMRTCClient.Endpoint({
|
element: ele, // video 标签
|
debug: true, // 是否打印日志
|
zlmsdpUrl: 'https://wrj.shuixiongit.com/index/api/webrtc?app=live&stream=7CTDM7100BN4J5-165-0-7-normal-0&type=play', //流地址
|
simulecast: false,
|
useCamera: false,
|
audioEnable: true,
|
videoEnable: true,
|
recvOnly: true,
|
usedatachannel: false,
|
})
|
|
console.log(webrtcPlayer, 111111)
|
|
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, e => {
|
console.log(e, 'WEBRTC_ICE_CANDIDATE_ERROR')
|
})
|
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, e => {
|
console.log(e, 'WEBRTC_ON_REMOTE_STREAMS')
|
})
|
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, e => {
|
console.log(e, 'WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED')
|
})
|
webrtcPlayer.on(window.ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, s => {
|
console.log(e, 'WEBRTC_ON_LOCAL_STREAM')
|
})
|
</script>
|
|
<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(114.82299452552775, 25.992290470862866, 500)//定义飞行终点的坐标
|
|
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
|
|
const imageryProvider_stand = new Cesium.UrlTemplateImageryProvider({
|
url: `https://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e110584a27d506da2740edca951683f4`,
|
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
maximumLevel: 18,
|
credit: 'stand_tc',
|
})
|
|
viewer?.imageryLayers.addImageryProvider(imageryProvider_stand)
|
|
async function loadTerrain () {
|
let worldTerrain
|
try {
|
worldTerrain = await Cesium.createWorldTerrainAsync()
|
viewer.scene.terrainProvider = worldTerrain
|
} catch (error) {
|
console.error('地形加载失败:', error)
|
}
|
}
|
|
loadTerrain()
|
|
class CreateFrustum {
|
constructor(viewer, options) {
|
this.position = options.position
|
this.viewer = viewer
|
this.fov = options.fov || 0
|
this.near = options.near || 0
|
this.far = options.far || 0
|
this.heading = options.heading || 0
|
this.pitch = options.pitch || 0
|
this.roll = options.roll || 0
|
this.width = options.width
|
this.height = options.height
|
|
this.videoScreen = null
|
this.add()
|
}
|
|
UpdateWidth (value) {
|
this.width = value
|
this.add()
|
}
|
UpdateHeight (value) {
|
this.height = value
|
this.add()
|
}
|
UpdateFov (value) {
|
this.fov = value
|
this.add()
|
}
|
UpdateNear (value) {
|
this.near = value
|
this.add()
|
}
|
UpdateFar (value) {
|
this.far = value
|
this.add()
|
}
|
UpdateHeading (value) {
|
this.heading = value
|
this.add()
|
}
|
UpdatePitch (value) {
|
this.pitch = value
|
this.add()
|
}
|
UpdateRoll (value) {
|
this.roll = value
|
this.add()
|
}
|
UpdataPosition (position) {
|
if (!position) return
|
this.position = position
|
this.add()
|
}
|
|
// 更新视锥体的姿态
|
Update (position, headingPitchRoll) {
|
this.position = Cesium.Cartesian3.fromDegrees(
|
position.longitude,
|
position.latitude,
|
position.altitude
|
)
|
this.orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
this.position,
|
new Cesium.HeadingPitchRoll.fromDegrees(
|
headingPitchRoll.heading,
|
headingPitchRoll.pitch,
|
headingPitchRoll.roll
|
)
|
)
|
this.add()
|
}
|
|
// 创建视锥体和轮廓线
|
add () {
|
this.clear()
|
this.viewer.scene.globe.depthTestAgainstTerrain = true
|
|
this.addFrustum()
|
this.addOutline()
|
this.addCenterline()
|
}
|
|
// 清除视锥体和轮廓线
|
clear () {
|
this.viewer.scene.globe.depthTestAgainstTerrain = false
|
|
if (this.videoScreen) {
|
this.videoScreen.destroyed()
|
|
this.videoScreen = null
|
}
|
|
this.clearFrustum()
|
this.clearOutline()
|
this.clearCenterline()
|
}
|
|
// 清除视锥体
|
clearFrustum () {
|
if (this.frustumPrimitive) {
|
this.viewer.scene.primitives.remove(this.frustumPrimitive)
|
this.frustumPrimitive = null
|
}
|
}
|
|
// 清除轮廓线
|
clearOutline () {
|
if (this.outlinePrimitive) {
|
this.viewer.scene.primitives.remove(this.outlinePrimitive)
|
this.outlinePrimitive = null
|
}
|
}
|
|
clearCenterline () {
|
if (this.centerDataSource) {
|
this.centerDataSource.entities.removeAll()
|
this.viewer.dataSources.remove(this.centerDataSource)
|
this.centerDataSource = null
|
}
|
}
|
|
// 创建视锥体
|
addFrustum () {
|
const frustum = new Cesium.PerspectiveFrustum({
|
// 查看的视场角，绕Z轴旋转，以弧度方式输入
|
fov: Cesium.Math.toRadians(this.fov),
|
// 视锥体的宽度/高度
|
aspectRatio: this.height / this.width,
|
// 近面距视点的距离
|
near: this.near,
|
// 远面距视点的距离
|
far: this.far,
|
})
|
const position = Cesium.Cartesian3.fromDegrees(
|
this.position.longitude,
|
this.position.latitude,
|
this.position.altitude
|
)
|
const frustumGeometry = new Cesium.FrustumGeometry({
|
frustum: frustum,
|
origin: position,
|
orientation: Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
),
|
vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
|
})
|
|
// 取出视锥体的顶点坐标
|
const geometry = Cesium.FrustumOutlineGeometry.createGeometry(frustumGeometry)
|
|
console.log(geometry, 1111111111)
|
|
const result = []
|
for (let i = 0; i < geometry.attributes.position.values.length; i += 3) {
|
result.push(Array.from(geometry.attributes.position.values).slice(i, i + 3))
|
}
|
|
// 将顶点分为近面(前4个)和远面(后4个)
|
const nearVertices = result.slice(0, 4)
|
const farVertices = result.slice(4, 8)
|
|
let videoPolygon = []
|
let videoIntersectionPolygon = []
|
|
let pointColor = [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.YELLOW, Cesium.Color.BLUE]
|
|
// 处理四条棱线(近面顶点到远面对应顶点)
|
for (let i = 0; i < 4; i++) {
|
const nearVertex = new Cesium.Cartesian3(...nearVertices[i])
|
const farVertex = new Cesium.Cartesian3(...farVertices[i])
|
|
this.viewer.entities.add({
|
name: 'Point with height',
|
position: farVertex,
|
point: {
|
pixelSize: 10,
|
color: pointColor[i],
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND // 或 NONE, RELATIVE_TO_GROUND
|
}
|
})
|
|
const ray = new Cesium.Ray()
|
ray.origin = nearVertex
|
// 计算方向向量（终点 - 起点）并归一化
|
ray.direction = Cesium.Cartesian3.normalize(
|
Cesium.Cartesian3.subtract(farVertex, nearVertex, new Cesium.Cartesian3()),
|
new Cesium.Cartesian3()
|
)
|
|
// 检测射线与地球表面交点
|
const pickPosition = this.viewer.scene.globe.pick(ray, this.viewer.scene)
|
|
// 有交点则使用交点，否则使用远面顶点
|
if (pickPosition) {
|
videoIntersectionPolygon.push(pickPosition)
|
}
|
|
videoPolygon.push(farVertex)
|
}
|
|
// 获得视锥体和地面的交点,构成平面,并使用video标签做为材质
|
if (videoPolygon.length === 4) {
|
if (!this.videoScreen) {
|
this.initVideoMesh()
|
}
|
|
if (videoIntersectionPolygon.length < 4) {
|
this.videoScreen.transform(videoPolygon, Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
), false)
|
} else {
|
this.videoScreen.transform(videoIntersectionPolygon, Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
), true)
|
}
|
}
|
|
const instance = new Cesium.GeometryInstance({
|
geometry: frustumGeometry,
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.fromBytes(0, 213, 144, 20)
|
),
|
},
|
})
|
const primitive = new Cesium.Primitive({
|
geometryInstances: instance,
|
releaseGeometryInstances: false,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
closed: true,
|
flat: true,
|
}),
|
asynchronous: false,
|
})
|
|
this.frustumPrimitive = this.viewer.scene.primitives.add(primitive)
|
}
|
|
// 创建轮廓线
|
addOutline () {
|
const frustum = new Cesium.PerspectiveFrustum({
|
// 查看的视场角度，绕Z轴旋转，以弧度方式输入
|
// The angle of the field of view (FOV), in radians.
|
// This angle will be used as the horizontal FOV if the width is greater than the height, otherwise it will be the vertical FOV.
|
fov: Cesium.Math.toRadians(this.fov),
|
// 视锥体的宽度/高度
|
aspectRatio: this.height / this.width,
|
// 近面距视点的距离
|
near: this.near,
|
// 远面距视点的距离
|
far: this.far,
|
})
|
const position = Cesium.Cartesian3.fromDegrees(
|
this.position.longitude,
|
this.position.latitude,
|
this.position.altitude
|
)
|
const frustumGeometry = new Cesium.FrustumOutlineGeometry({
|
frustum: frustum,
|
origin: position,
|
orientation: Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
),
|
vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
|
})
|
|
|
const instance = new Cesium.GeometryInstance({
|
geometry: frustumGeometry,
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.fromBytes(0, 213, 144, 255)
|
),
|
},
|
})
|
const primitive = new Cesium.Primitive({
|
geometryInstances: instance,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
closed: true,
|
flat: true,
|
}),
|
asynchronous: false,
|
})
|
this.outlinePrimitive = this.viewer.scene.primitives.add(primitive)
|
}
|
|
addCenterline () {
|
this.centerDataSource = new Cesium.CustomDataSource()
|
this.viewer.dataSources.add(this.centerDataSource)
|
|
const position = Cesium.Cartesian3.fromDegrees(
|
this.position.longitude,
|
this.position.latitude,
|
this.position.altitude
|
)
|
|
let matrix = Cesium.Matrix3.fromQuaternion(
|
Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll.fromDegrees(this.heading, this.pitch, this.roll)
|
),
|
new Cesium.Matrix3()
|
)
|
|
let right1 = Cesium.Matrix3.getColumn(matrix, 0, new Cesium.Cartesian3())
|
let up1 = Cesium.Matrix3.getColumn(matrix, 1, new Cesium.Cartesian3())
|
let direction = Cesium.Matrix3.getColumn(matrix, 2, new Cesium.Cartesian3())
|
|
// const direction = new Cartesian3(-0.10668226241650887, 0.8103322335050215, -0.5761775474872814)
|
|
let frontDirect = Cesium.Cartesian3.multiplyByScalar(
|
direction,
|
this.far,
|
new Cesium.Cartesian3()
|
)
|
let bottomCenter = Cesium.Cartesian3.add(position, frontDirect, new Cesium.Cartesian3())
|
|
// 创建Entity来显示中心线
|
this.centerDataSource.entities.add({
|
name: 'Center Line of Frustum',
|
polyline: {
|
positions: [position, bottomCenter],
|
width: 1,
|
// material: Cesium.Color.RED.withAlpha(0.5)
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.fromBytes(0, 213, 144, 255),
|
dashLength: 30.0,
|
gapColor: Cesium.Color.TRANSPARENT,
|
gapWidth: 1.0,
|
}),
|
},
|
})
|
}
|
|
initVideoMesh () {
|
let element = document.getElementById('VIDEO')
|
|
if (element === '') return
|
|
// 需要同步时钟,否则视频不会动
|
// let synchronizer = new Cesium.VideoSynchronizer({
|
// clock: this.viewer.clock,
|
// element: element
|
// })
|
// this.viewer.clock.shouldAnimate = true
|
|
this.videoScreen = new VideoScreen({
|
viewer: this.viewer,
|
options: {
|
element,
|
stRotation: 90 // 视频画面的旋转角度
|
}
|
})
|
}
|
}
|
|
/**
|
* 视频幕布
|
*/
|
class VideoScreen {
|
|
// 投射多边形
|
curMesh = null
|
|
/**
|
* @typedef {Object} Options 视频幕布配置参数
|
* @property {String} src 视频源地址
|
* @property {Array} [positions=[]] 视频幕布几何体顶点坐标
|
* @property {number} [stRotation=90.0] 几何体纹理的旋转角度
|
* @property {Boolean} [tapGround=false] 几何体是否完全贴地
|
*/
|
options = {
|
src: '',
|
positions: [],
|
stRotation: 0,
|
tapGround: false
|
}
|
|
constructor(config) {
|
const { viewer, options } = config
|
|
if (!viewer || !options) {
|
console.error('Missing required parameters when new FrustumEditor')
|
return
|
}
|
this._viewer = viewer
|
|
this._entityVideoDataSource = null
|
this._entityVideoDataSource = new Cesium.CustomDataSource('entityVideoDataSource')
|
this._viewer.dataSources.add(this._entityVideoDataSource)
|
|
this.options = {
|
...this.options,
|
...options
|
}
|
|
this.init()
|
}
|
|
init () {
|
const { element, tapGround, positions, stRotation } = this.options
|
|
// 创建Polygon
|
const mesh = this._entityVideoDataSource.entities.add({
|
polygon: {
|
hierarchy: new Cesium.PolygonHierarchy(positions),
|
material: element,
|
// perPositionHeight: !tapGround, // 启用每个位置的高度
|
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
}
|
})
|
this.curMesh = mesh
|
}
|
|
/**
|
* 改变姿态
|
* @param positions {Array} 新的顶点坐标
|
*/
|
transform (positions, orientation, isIntersect = false) {
|
if (this.curMesh) {
|
// 更新VideoPolygon的顶点
|
|
// 获取物体的heading和pitch
|
const headingInRadians = Cesium.Math.toRadians(option.heading) // 将heading角度转换为弧度
|
const pitchInRadians = Cesium.Math.toRadians(option.pitch) // 将pitch角度转换为弧度
|
|
// 计算纹理的旋转角度，假设纹理的旋转取决于物体的heading和pitch
|
// 例如：纹理的旋转角度可能是基于物体的旋转和视角的调整
|
let stRotation = headingInRadians + pitchInRadians
|
|
this.curMesh.polygon.perPositionHeight = !isIntersect // 启用每个位置的高度
|
|
this.curMesh.polygon.heightReference = !isIntersect ? Cesium.HeightReference.NONE : Cesium.HeightReference.CLAMP_TO_GROUND
|
|
this.curMesh.polygon.hierarchy = new Cesium.PolygonHierarchy(positions)
|
|
this.curMesh.orientation = orientation
|
}
|
}
|
|
/**
|
* 获取地球面与线的交点
|
* @param p1 {lng,lat,height} 线的起点
|
* @param p2 {lng,lat,height} 线的终点
|
* @return {null|*}
|
*/
|
getInterPointByLine (p1, p2) {
|
const startPoint = p1 instanceof Cesium.Cartographic ? p1 : Cesium.Cartographic.fromDegrees(p1.lng, p1.lat, p1.height) // 替换为起点的经纬度和高度
|
const endPoint = p2 instanceof Cesium.Cartographic ? p2 : Cesium.Cartographic.fromDegrees(p2.lng, p2.lat, p2.height) // 替换为终点的经纬度和高度
|
// 创建起点和终点的笛卡尔坐标
|
const startCartesian = this._viewer.scene.globe.ellipsoid.cartographicToCartesian(startPoint)
|
const endCartesian = this._viewer.scene.globe.ellipsoid.cartographicToCartesian(endPoint)
|
// 通过原点和方向 创建射线
|
const direction = Cesium.Cartesian3.subtract(endCartesian, startCartesian, new Cesium.Cartesian3())
|
const ray = new Cesium.Ray(startCartesian, direction)
|
|
// 计算射线与地球表面的交点
|
const result = Cesium.IntersectionTests.rayEllipsoid(ray, this._viewer.scene.globe.ellipsoid)
|
|
if (result && result.start !== result.stop) {
|
// 计算交点的位置
|
console.log(`start ${result.start}, stop ${result.stop}`)
|
const intersectionPoint = Cesium.Ray.getPoint(ray, result.start)
|
|
// 将交点的笛卡尔坐标转换为地理坐标
|
const intersectionCartographic = Cesium.Cartographic.fromCartesian(intersectionPoint)
|
return intersectionCartographic
|
} else {
|
console.log(`该方向上无交点 ${p1}, ${p2}`)
|
return null
|
}
|
}
|
|
/**
|
* 显示隐藏
|
* @param targetVal {Boolean}
|
*/
|
toggle (targetVal) {
|
const { curMesh } = this
|
if (curMesh) {
|
curMesh.show = typeof targetVal === 'boolean' ? targetVal : !curMesh.show
|
}
|
}
|
|
destroyed () {
|
if (this._entityVideoDataSource) {
|
this._entityVideoDataSource?.entities.removeAll()
|
this._viewer.dataSources.remove(this._entityVideoDataSource, true)
|
this._entityVideoDataSource = null
|
}
|
|
this._viewer = null
|
}
|
}
|
|
let option = {
|
longitude: 114.82299452552775,
|
latitude: 25.992290470862866,
|
height: 250,
|
pitch: 90,
|
roll: 0,
|
heading: 0,
|
videoWidth: 16,
|
videoHeight: 9
|
}
|
|
let viewInfoFrustum = new CreateFrustum(viewer, {
|
position: {
|
longitude: option?.longitude,
|
latitude: option?.latitude,
|
altitude: option?.height,
|
},
|
|
width: option?.videoWidth,
|
height: option?.videoHeight,
|
|
fov: 64,
|
near: 0.01,
|
far: 250,
|
roll: option.roll,
|
pitch: option.pitch,
|
heading: option.heading,
|
})
|
|
function optionsChange (type, changeType, val) {
|
viewInfoFrustum.clear()
|
|
changeType === 1 ? option[type] += 1 : option[type] -= 1
|
|
viewInfoFrustum = new CreateFrustum(viewer, {
|
position: {
|
longitude: option?.longitude,
|
latitude: option?.latitude,
|
altitude: option?.height,
|
},
|
|
width: option?.videoWidth,
|
height: option?.videoHeight,
|
|
fov: 64,
|
near: 0.01,
|
far: 250,
|
roll: option.roll,
|
pitch: option.pitch,
|
heading: option.heading,
|
})
|
|
}
|
</script>
|
</body>
|
|
</html>
|
