<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
|
<meta name="author" content="通感一体" />
|
<meta name="apple-touch-fullscreen" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
<meta name="format-detection" content="telephone=no" />
|
<meta name="x5-fullscreen" content="true" />
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
|
<!-- 标题及搜索关键字 -->
|
<meta name="keywords" content="通感一体" />
|
<meta name="description" content="通感一体" />
|
<title>通感一体化</title>
|
</head>
|
<style>
|
#redcap{
|
position: absolute;
|
top: 50px;
|
left: 100px;
|
z-index: 10;
|
}
|
</style>
|
<script
|
type="text/javascript"
|
src="./lib/include-lib.js"
|
libpath="./lib/"
|
include="jquery,layer,toastr,font-awesome,bootstrap,layer,haoutil,mars3d"
|
></script>
|
<script src="./js/offlinemap/map_load.js"></script>
|
<script src="./js/jizhan_boat.js"></script>
|
<body>
|
<div id="container"></div>
|
<button id="redcap">Redcap站</button>
|
<!-- <button id="button1"></button>
|
<button id="button2"></button> -->
|
<div class="right_box" id="contentBox">
|
<div class="change2" onclick="toggleContent()"></div>
|
<iframe id="myIframe" src="./index2.html"></iframe>
|
<div class="boat_data" id="boat_data">
|
<div class="boat_left">
|
<iframe src="a.html" frameborder="0" id="video" style="width: 100%;height: 100%;"></iframe>
|
</div>
|
<div class="boat_right">
|
<p style="height: 10%;margin: 0;background-color: rgb(35, 55, 74);color: aliceblue;padding-left: 20px;" onclick="openWindow('cxw.html',600,500)">放大</p>
|
<iframe id="chuan" src="./cxw.html" frameborder="0" style="width: 100%;height: 89%;" ></iframe>
|
</div>
|
<div class="wurenji_data">
|
<p style="height: 10%;margin: 0;background-color: rgb(35, 55, 74);color: aliceblue;padding-left: 20px;" onclick="openWindow('http:\/\/47.100.95.164:38083/planefp-optimize/#/',600,500)">放大</p>
|
<iframe src="http://47.100.95.164:38083/planefp-optimize/#/" frameborder="0" style="width: 100%;height: 90%;"></iframe>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
<!-- <script src="./js/mqtt.js"></script>
|
<script src="./js/mqttws.js"></script> -->
|
|
<script>
|
var wd_width = 1900
|
let width_ = window.screen.width
|
var isHidden = false
|
var toggleBtn = document.getElementById('redcap');
|
var boat_options = {
|
size: BMAP_POINT_SIZE_SMALL,
|
shape: BMAP_POINT_SHAPE_CIRCLE,
|
color: '#ff0000'
|
}
|
var wrj_options = {
|
size: BMAP_POINT_SIZE_SMALL,
|
shape: BMAP_POINT_SHAPE_CIRCLE,
|
color: '#fd9319'
|
}
|
var boat_points = []
|
var wrj_points =[]
|
let css_ = document.createElement('link')
|
if(width_> wd_width){
|
console.log("s")
|
css_.href = './css/lage.css'
|
}else{
|
console.log("l")
|
css_.href = './css/small.css'
|
|
}
|
css_.type = "text/css";
|
css_.rel = "stylesheet";
|
console.log(css_)
|
document.head.appendChild(css_);
|
|
let height_ = window.screen.height
|
console.log(width_,height_,"宽高")
|
var isBoxOpen = false;
|
$(document).ready(function () {
|
|
|
|
var originalIconSize = new BMap.Size(200, 200);
|
// 目标图标尺寸
|
var targetIconSize = new BMap.Size(20, 20);
|
function addLabel_(maker,text,color,x,y){
|
let label = new BMap.Label(text, {offset: new BMap.Size(x, y)});
|
// 设置Label的样式
|
label.setStyle({
|
color: color, // 文本颜色
|
fontSize: "12px", // 字体大小
|
border: "1px solid #ccc", // 边框
|
backgroundColor: "#f5f5f5", // 背景颜色
|
padding: "3px", // 内边距
|
borderRadius: "3px", // 边框圆角
|
boxShadow: "0 1px 5px rgba(0,0,0,0.65)", // 阴影效果
|
textAlign: "center", // 文本对齐方式
|
// width: "80px" // 标签宽度
|
});
|
maker.setLabel(label);
|
}
|
|
|
// 计算缩放比例
|
var scale = targetIconSize.width / originalIconSize.width;
|
|
var baidu_map = new BMap.Map('container'); // 创建Map实例
|
baidu_map.centerAndZoom(new BMap.Point(122.118792,31.1236), 11); // 初始化地图,设置中心点坐标和地图级别
|
|
function onTilesLoaded() {
|
baidu_map.setCenter(new BMap.Point(122.118792,31.0736));
|
baidu_map.removeEventListener('tilesloaded', onTilesLoaded);
|
}
|
baidu_map.addEventListener('tilesloaded', onTilesLoaded);
|
baidu_map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var myIcon = new BMap.Icon("./img2/shexiangtou2_left.png", new BMap.Size(50, 50));
|
// 创建Marker标注，使用小车图标
|
var pt = new BMap.Point(121.488792,31.070236);
|
var marker = new BMap.Marker(pt, {
|
icon: myIcon
|
});
|
var myIcon = new BMap.Icon("./img2/wurenji2.png", new BMap.Size(50, 50));
|
// 创建Marker标注，使用小车图标
|
var pt2 = new BMap.Point(121.3565434886248, 30.84122335627239);
|
var marker2 = new BMap.Marker(pt2, {
|
icon: myIcon
|
});
|
// 为按钮1添加点击事件监听器
|
var myIcon3 = new BMap.Icon("./img2/shexiangtou2_left.png", new BMap.Size(50, 50));
|
// 创建Marker标注，使用小车图标
|
var pt3 = new BMap.Point(121.516777,31.227673);
|
var marker3 = new BMap.Marker(pt3, {
|
icon: myIcon3
|
});
|
|
|
addLabel_(marker,"航道杜丰通感","blue",-25,-25)
|
addLabel_(marker2,"无人机基地通感","blue",-30,-25)
|
addLabel_(marker3,"航道宬苑通感","blue",-25,-25)
|
baidu_map.addOverlay(marker3)
|
baidu_map.addOverlay(marker2)
|
baidu_map.addOverlay(marker)
|
let label_ = marker.getLabel()
|
let label_2 = marker2.getLabel()
|
let label_3 = marker3.getLabel()
|
for(let i=0;i<jizhan_boat.length;i++){
|
console.log(jizhan_boat[i],"asdieidkeieid")
|
boat_points.push(new BMap.Point(jizhan_boat[i]['lng'], jizhan_boat[i]['lat']))
|
}
|
for(let i=0;i<wrj_jizhan.length;i++){
|
console.log(wrj_jizhan[i],"asdieidkeieid")
|
wrj_points.push(new BMap.Point(wrj_jizhan[i]['lng'], wrj_jizhan[i]['lat']))
|
}
|
var pointCollection = new BMap.PointCollection(boat_points, boat_options);
|
var pointCollection2 = new BMap.PointCollection(wrj_points, wrj_options);
|
function jizhanbtn(){
|
isHidden = !isHidden;
|
|
// 根据状态设置按钮文字
|
if (isHidden) {
|
console.log(pointCollection,boat_points)
|
pointCollection = new BMap.PointCollection(boat_points, boat_options);
|
pointCollection2 = new BMap.PointCollection(wrj_points, wrj_options);
|
baidu_map.addOverlay(pointCollection);
|
baidu_map.addOverlay(pointCollection2);
|
$('#redcap').css('color', 'red');
|
// 假设在这里你隐藏了点集合
|
} else {
|
console.log(pointCollection,boat_points)
|
baidu_map.removeOverlay(pointCollection);
|
baidu_map.removeOverlay(pointCollection2);
|
$('#redcap').css('color', 'black');
|
// 假设在这里你显示了点集合
|
}
|
|
}
|
$('#redcap').on('click', jizhanbtn);
|
$('#redcap').on('click', jizhanbtn);
|
marker3.addEventListener('click', function() {
|
label_.setStyle({
|
color:"blue"
|
})
|
label_2.setStyle({
|
color:"blue"
|
})
|
label_3.setStyle({
|
color:'red'
|
})
|
let message_data = {"lat":31.199828,"lng":121.511941,"alt":445.6,"heading":341.8,"pitch":-9.9,"name":'df'}
|
iframe.contentWindow.postMessage(message_data, '*');
|
document.querySelector('.right_box').style.display = 'block';
|
|
// 隐藏无人机数据
|
document.querySelector('.wurenji_data').style.display = 'none';
|
if(width_ >wd_width){
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '75%';
|
document.querySelector('#boat_data').style.width = '65%';
|
document.querySelector('#myIframe').style.width = '33.33%'
|
}
|
// 显示船舶数据
|
document.querySelector('.boat_left').style.display = 'block';
|
document.querySelector('.boat_right').style.display = 'block';
|
let cxw_data = {"cxw_lat":31.222,"cxw_lng":121.51}
|
test_iframe.contentWindow.postMessage(cxw_data, '*');
|
|
})
|
marker2.addEventListener('click', function() {
|
// window.open('https://www.shipxy.com')
|
label_.setStyle({
|
color:"blue"
|
})
|
label_2.setStyle({
|
color:"red"
|
})
|
label_3.setStyle({
|
color:"blue"
|
})
|
|
console.log("dianjile")
|
let message_data = {"lat":30.825031,"lng":121.35679,"alt":643.2,"heading":337.4,"pitch":-23,"name":'dy'}
|
// 隐藏船舶数据
|
document.querySelector('.right_box').style.display = 'block';
|
document.querySelector('.boat_left').style.display = 'none';
|
document.querySelector('.boat_right').style.display = 'none';
|
// 显示无人机数据
|
if(width_ > wd_width){
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '66.66%';
|
document.querySelector('#boat_data').style.width = '49%';
|
document.querySelector('#myIframe').style.width = '49%'
|
}
|
|
document.querySelector('.wurenji_data').style.display = 'block';
|
iframe.contentWindow.postMessage(message_data, '*');
|
let test = iframe.contentWindow
|
console.log(test.document.querySelector('body'),"window")
|
// if (!isBoxOpen) {
|
// toggleContent();
|
// }
|
});
|
// 为按钮2添加点击事件监听器
|
marker.addEventListener('click', function(){
|
|
label_.setStyle({
|
color:"red"
|
})
|
label_2.setStyle({
|
color:"blue"
|
})
|
label_3.setStyle({
|
color:"blue"
|
})
|
//const iframe_chuan = document.querySelector("#chuan").contentWindow;
|
// console.log(iframe_chuan.document.querySelector(".myflag"))
|
// iframe.document.querySelector("body").style.backgroundColor = "blue";
|
let message_data = {"lat":31.061703,"lng":121.47786,"alt":310.7,"heading":313.7,"pitch":-18.6,"name":'df'}
|
document.querySelector('.right_box').style.display = 'block';
|
// 隐藏无人机数据
|
document.querySelector('.wurenji_data').style.display = 'none';
|
if(width_ >wd_width){
|
console.log("eeeee")
|
document.querySelector('.right_box').style.width = '75%';
|
document.querySelector('#boat_data').style.width = '65%';
|
document.querySelector('#myIframe').style.width = '33.33%'
|
}
|
// 显示船舶数据
|
document.querySelector('.boat_left').style.display = 'block';
|
document.querySelector('.boat_right').style.display = 'block';
|
iframe.contentWindow.postMessage(message_data, '*');
|
let cxw_data = {"cxw_lat":31.063613,"cxw_lng":121.476388}
|
test_iframe.contentWindow.postMessage(cxw_data, '*');
|
});
|
// 将标注添加到地图
|
// 切换按钮
|
$(".category_box").click(function () {
|
$(".category_box").removeClass("active")
|
$(this).addClass("active")
|
})
|
// 摄像头折叠
|
$(".change2").click(function () {
|
label_.setStyle({
|
color:"blue"
|
})
|
label_2.setStyle({
|
color:"blue"
|
})
|
// label_3.setStyle({
|
// color:"blue"
|
// })
|
// var $titleHead = $(this).closest(".right_box")
|
// $titleHead.toggleClass("collapsed")
|
})
|
})
|
// 获取按钮和iframe元素
|
var button1 = document.getElementById('button1');
|
var button2 = document.getElementById('button2');
|
var iframe = document.getElementById('myIframe');
|
var test_iframe = document.getElementById('chuan')
|
function toggleContent() {
|
document.querySelector('.right_box').style.display = 'none';
|
}
|
function openWindow(url,w,h){
|
let left = window.screen.width-w-20
|
let top = window.screen.height-h-20
|
var newWindow = window.open(url, 'cxw', `width=${w}px,height=${h}px,left=${left}px,top=${top}px`);
|
|
// 你可以省略left和top特性，这样浏览器会决定新窗口的位置
|
// var newWindow = window.open('https://example.com', '_blank', 'width=800,height=600');
|
}
|
|
|
|
|
|
|
</script>
|
</html>
|
