<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<title></title>
|
<script src="./UE/jquery.min.js"></script>
|
<script src="./UE/tumap.js"></script>
|
<script src="./UE/flv.min.js"></script>
|
<style>
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
padding: 0;
|
margin: 0;
|
overflow: hidden;
|
font-size: 13px;
|
font-family: 微软雅黑;
|
}
|
|
#map {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
border: 1px solid red;
|
background-color: #F5F5F5;
|
box-sizing: border-box;
|
}
|
|
#app {
|
position: absolute;
|
left: 0;
|
top: 0;
|
z-index: 1;
|
}
|
</style>
|
<script>
|
var UE = {
|
id: 'map',
|
|
patroLine: null,
|
|
mainUrl: location.href.substring(0, location.href.lastIndexOf('/') + 1),
|
|
view: {
|
x: 116.5139265, //116.51411,
|
y: 39.7725406 //39.799614
|
},
|
|
map: null,
|
|
init: function () {
|
var that = this
|
this.map = new TUMap({
|
id: this.id,
|
url: "http://127.0.0.1:96", // "http://103.25.37.69:92", //
|
onInit: function () {
|
that.inited()
|
}
|
})
|
},
|
|
inited: function () {
|
// x, y, z, roll, pitch, yaw, distance, callBack, time
|
//this.map.flyToGIS(this.view.x, this.view.y, 0, 0, -45, 0, 30000, null, 5);
|
this.map.flyTo(-554198.375, -964085.9375, 0, 0, -27, -120, 60000, null, 3);
|
|
// 文本标签
|
var p = this.map.transformWGS84ToLocal(this.points[0].x, this.points[0].y);
|
this.txt = this.map.createLabelGIS({
|
id: 1001,
|
x: p.x,
|
y: p.y,
|
z: 1500,
|
size: { width: 100, height: 30 },
|
text: "测试文字",
|
scale: 0.75,
|
type: "Default", // Default,Type1,Type2,Type3
|
canClick: false,
|
image: null,
|
backgroundColor: 0xffffffff,
|
fillColor: "#00ff00",
|
visibility: true
|
});
|
|
// 自定义区域
|
var ps = [];
|
for (var i = 0, c = this.points.length; i < c; i++) {
|
var p = this.map.transformWGS84ToLocal(this.points[i].x, this.points[i].y);
|
ps.push(new TUVector3(p.x, p.y, 0));
|
}
|
var areaObj = this.map.createAreaBoundary({ // createAreaData,createAreaBoundary
|
id: "a01",
|
type: 0, // 0上浮横格，1实色，2箭头，3三角
|
height: 5000, // 默认5000
|
color: "#ff0000",// 默认白色
|
brightness: 10,
|
data: ps
|
});
|
|
this.map.focusOn(new TUVector3(p.x, p.y, 1500), new TURotator(0, -53, 0)); // -90
|
|
////创建区域
|
//areaObject = this.map.createAreaBoundary({
|
// data: [
|
// new TUVector3(0, 0, 0),
|
// new TUVector3(100000, 0, 0),
|
// new TUVector3(100000, 100000, 0),
|
// new TUVector3(0, 100000, 0),
|
// new TUVector3(0, 0, 0)
|
// ],
|
// type: 0, //0上浮横格，1实色，2箭头，3三角
|
// height: 50000, //默认5000
|
// color: "#ff0000",//默认白色
|
// brightness: 10 //默认10
|
//});
|
//this.map.focusOn(new TUVector3(739, 303, 1040), new TURotator(0, -73, 147), 107737);
|
},
|
|
points: [
|
{ x: 116.51446997, y: 39.772785555, z: 0 },
|
{ x: 116.51353149, y: 39.770979271, z: 0 },
|
{ x: 116.51213422, y: 39.771453527, z: 0 },
|
{ x: 116.51317929, y: 39.773225891, z: 0 },
|
{ x: 116.51446997, y: 39.772785555, z: 0 }
|
],
|
|
createRoute: function () {
|
if (this.patroLine) return
|
|
var data = []
|
for (var i = 0, c = this.points.length; i < c; i++) {
|
var p = this.map.transformWGS84ToLocal(
|
this.points[i].x,
|
this.points[i].y
|
)
|
data.push(new TUVector3(p.x, p.y, this.points[i].z || 0))
|
}
|
|
this.polyline = this.map.createPolyline({
|
pathWidth: 5, // 路径宽度
|
pathColor: '#00FF00', // 路径颜色
|
type: 1, // 线路类型 0高亮 1三角 2箭头
|
data: data // 路径点位数组，ue4坐标
|
})
|
|
this.patroLine = this.map.createPatrolLine({
|
points: data // 路径点
|
})
|
|
// 添加一个巡查点
|
this.pointObj = this.map.createLabel({
|
location: data[0],
|
text: '巡查点',
|
backgroundColor: 'rgba(0,0,0,.8)',
|
fillColor: '#00ff00'
|
})
|
},
|
|
startRoute: function () {
|
if (!this.patroLine) return
|
|
this.patroLine.beginPatrol(this.pointObj)
|
},
|
|
stopRoute: function () {
|
if (!this.patroLine) return
|
|
this.patroLine.beginPatrol(this.pointObj)
|
}
|
}
|
|
window.onload = function () {
|
playFlv();
|
//UE.init();
|
//initScreens();
|
}
|
|
function playFlv() {
|
if (flvjs.isSupported()) {
|
document.getElementById('video_play').style.display = 'block'
|
|
var videoElement = document.getElementById('v_video')
|
var flvPlayer = flvjs.createPlayer({
|
type: 'flv',
|
url: 'http://ldjsc.bda.gov.cn/VDSClientMedia/play.flv?1001:28389799:MtlS5nGnxfbr5m0ZbbHV@10.117.5.21:443:2924:1'
|
//url: 'http://ldjsc.bda.gov.cn/VDSClientMedia/play.flv?1001:28389799:MtlS5nGnxfbr5m0ZbbHV@10.117.5.21:443:3016:1'
|
//url: 'http://10.10.5.65:10088/play.flv?1001:28389799:MtlS5nGnxfbr5m0ZbbHV@10.117.5.21:443:3016:1'
|
//url: 'http://10.241.242.78:10088/play.flv?1101:admin:123456@10.10.10.105:554:53:1'
|
//url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
|
})
|
flvPlayer.attachMediaElement(videoElement)
|
flvPlayer.load()
|
flvPlayer.play()
|
}
|
}
|
|
function initScreens() {
|
if (!window.getScreens || !window.isMultiScreen) return;
|
|
var that = this;
|
var permission = navigator.permissions.query({
|
name: 'window-placement'
|
});
|
console.log("permission =>", permission);
|
|
if (permission.state === 'denied') {
|
alert('您禁用了窗口放置权限，请开启使用！');
|
return;
|
}
|
window.getScreens().then(function (e) {
|
console.log(e);
|
//$(body).width((1920*2)+"px");
|
//document.getElementsByTagName("body")[0].style.width = 1920 * 2 + "px";
|
});
|
}
|
</script>
|
</head>
|
|
<body>
|
<div id="map"></div>
|
<div id="app">
|
路径漫游：<input type="button" onclick="UE.createRoute();" value="创建" />
|
<input type="button" onclick="UE.startRoute();" value="开始" />
|
<input type="button" onclick="UE.stopRoute();" value="停止" /><br />
|
</div>
|
<div id="video_play"
|
style="width: 450px; height: 350px; position: absolute; z-index: 999; top: calc(50% - 175px); right: 300px; display: none;">
|
<div id="video_title"
|
style="width: 100%; height: 37px; background: rgba(28, 34, 43, 0.4); border-left: 4px solid #14fad7; padding-left: 20px; box-sizing: border-box; font-size: 18px; color: white; vertical-align: middle; line-height: 37px;">
|
<div>视频播放区</div>
|
</div>
|
<div id="video_content"
|
style="width: 100%; height: calc(100% - 37px - 60px); background: rgba(0, 0, 0, 0.3); padding: 2px; box-sizing: border-box;">
|
<video id="v_video" style="height: 100%; width: 100%; object-fit: fill;" autoplay="autoplay" preload="auto" controls="controls"
|
muted="muted">
|
</video>
|
</div>
|
<div id="video_bottom"
|
style="width: 100%; height: 60px; background: rgba(0, 0, 0, 0.3); padding-left: 20px; box-sizing: border-box; vertical-align: middle; line-height: 60px;">
|
<div style="float: left; margin-top: 11.5px; background-size: 100% 100%; width: 31px; height: 37px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAmCAYAAAClI5npAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKmSURBVHgBvVhLctNAEH0jgTdAlXICzA3ICRAnQDkB8QmcVEEoVjgrqiBVxjdQToA4QXQDzAkIJ0CLrOw4Snfr44+k0UwU61XJGnl6pt98uudJChZIvwc+HLxBitdQdJUVSOj3mu5/6B6rj1Fs2qdqM0gngYcXGFPxhBx4MIEiMkCIBS7V5+hab6pzfhGMyWJi7LiOyB1mNCM/mk3qHPOon+MnFX08DmIsMaqbjQqB9GswxABXNOohHhM8Gwu83SWhenG+ScLBoTqNkuIvZ8tggC97c87gvleytKgQSL8Fx2RwjP3DF1+7BODS6PuCg2k6DbysiHL0Q/QHD7fZbDs5o/ewgZKsd0qh9Yri/JCuUZ58bPp4JzfZ+U/x16LpHDcUTpP1TmbIlK4ogrCRotvg4sAh5+YNGEsc7TpnSGhRHRUT474W8B2rtU/xS5fb87oYpnAw5D1gk+fnBjb/YA7PgQ0UXhpYmdiUYALmawYERfzWQTa03QGWMAGTaS3gUchNG2sHUme1pHIY0bn/37Yh5wFWPnJ0PxOFxJnUt+gjUR+igyf5wyVdY4vG7PCKiKMDIv7JNmGaPfQKUkolgVxExugPsTqL5iUBQYpz9AWSZ0WxJJDPwgz7R7iZTbcTkUsK2C4v2IFPzOX2TG8RyLXaCPvCCudaUVqAwot1W6cYq0FIcV8ZXP1Z4D5AYOhQM/XrqgbIe6ASgdEdpJqKsNtF42koUcGyqysovJucix+0tb8IQrrZacY1ZrTuJzqDdj3ggjuwOTEz8LrfSFijE4FS69lsyuI9sEY7Vk0Nkavn32g7thteQptgLMmkw1RUr855QsnmyNS5FQHpnyPjTpMpb+kbgGbHdyYgJM6isDY8WSF9iqx1hfEeqPjj90kH/AnHa/sMo8M931PnYzlJ3FQAAAAASUVORK5CYII=)
|
no-repeat center;">
|
</div>
|
<div style="float: left; color: #fff; font-size: 20px; margin-left: 10px">
|
荣华路
|
</div>
|
</div>
|
</div>
|
</body>
|
|
</html>
|
