<!--
|
* @Author : yuan
|
* @Date : 2025-08-05 10:02:04
|
* @LastEditors : yuan
|
* @LastEditTime : 2025-09-26 16:54:05
|
* @FilePath : \video copy.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>
|
|
<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
|
|
// 是否支持图像渲染像素化处理
|
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
viewer.resolutionScale = window.devicePixelRatio
|
}
|
|
// 开启抗锯齿
|
viewer.scene.postProcessStages.fxaa.enabled = true
|
|
|
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()
|
|
function getBeidouGridStep (level) {
|
// 北斗一级是180°x90°，每一级经纬度都/2
|
const lonStep = 180 / Math.pow(2, level - 1)
|
const latStep = 90 / Math.pow(2, level - 1)
|
return { lonStep, latStep }
|
}
|
|
function createBeidouGridPrimitive (viewer, minLon, maxLon, minLat, maxLat, level) {
|
const { lonStep, latStep } = getBeidouGridStep(level)
|
const instances = []
|
|
for (let lon = minLon; lon < maxLon; lon += lonStep) {
|
for (let lat = minLat; lat < maxLat; lat += latStep) {
|
// 计算每个格子的经纬度范围
|
const west = lon
|
const east = lon + lonStep
|
const south = lat
|
const north = lat + latStep
|
|
// 这里生成四角
|
const positions = Cesium.Cartesian3.fromDegreesArray([
|
west, south,
|
east, south,
|
east, north,
|
west, north
|
])
|
|
// BoxGeometry 模拟立体格子 (给定高度)
|
const boxHeight = 240 // 立体高度
|
const boxGeometry = Cesium.BoxGeometry.fromDimensions({
|
vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
|
dimensions: new Cesium.Cartesian3(
|
Cesium.Math.toRadians(lonStep) * 6378137, // 经度转米
|
Cesium.Math.toRadians(latStep) * 6378137,
|
boxHeight
|
)
|
})
|
|
// 中心点（经纬度中点 + 高度）
|
const centerLon = west + lonStep / 2
|
const centerLat = south + latStep / 2
|
const center = Cesium.Cartesian3.fromDegrees(centerLon, centerLat, boxHeight / 2)
|
|
instances.push(new Cesium.GeometryInstance({
|
geometry: boxGeometry,
|
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(center),
|
attributes: {
|
color: Cesium.ColorGeometryInstanceAttribute.fromColor(
|
Cesium.Color.YELLOW.withAlpha(0.1)
|
)
|
}
|
}))
|
}
|
}
|
|
const primitive = new Cesium.Primitive({
|
geometryInstances: instances,
|
appearance: new Cesium.PerInstanceColorAppearance({
|
translucent: true,
|
closed: false
|
})
|
})
|
|
viewer.scene.primitives.add(primitive)
|
}
|
|
// 示例范围（根据模型范围自行改）
|
createBeidouGridPrimitive(viewer, 114.9, 115.0, 26, 26.1, 20)
|
|
|
// viewer.flyTo(tileset);
|
setTimeout(() => {
|
var position = Cesium.Cartesian3.fromDegrees(115, 26, 1500)//定义飞行终点的坐标
|
|
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("已抵达北京天安门");
|
},
|
})
|
|
}, 3000)
|
</script>
|
</body>
|
|
</html>
|
