|
|
|
var map
|
var floores;
|
// mars3d.Map三维地图对象
|
var graphicLayerAnchor;
|
//基站
|
var graphicLayerGetWay;
|
//基站
|
var graphicLayer;
|
var graphicLayerCamera;
|
// 矢量图层对象
|
var graphicLayerFence;
|
// 矢量图层对象
|
$.ajaxSetup({
|
headers: {
|
'x-access-token': localStorage.getItem("hxzkmars3d")
|
}
|
});
|
var mapSplit
|
//双屏对比
|
var mapSplit1
|
var NameTitle
|
var creditHtml = ''
|
|
var terrainClip
|
var detail;//详细信息
|
var Disappear;//离线消失
|
var voice;//开启语音
|
var showfence;//显示围栏
|
var showanchor;//显示基站
|
var showgetway;//显示网关
|
var noterrain; //无地形
|
var basemap; //无底图
|
var sudu;
|
function initMap() {
|
let HomeSetting;
|
let mapPosition;
|
$.ajax({
|
url: "/hxzkuwb/MarsHome",
|
type: "POST",
|
headers: {
|
'x-access-token': localStorage.getItem("hxzkmars3d")
|
},
|
async: false, // 设置为同步请求
|
success: function(data) {
|
HomeSetting = data
|
mapPosition = HomeSetting.mapposition.split(',');
|
Disappear = HomeSetting.offlinehide;
|
NameTitle = HomeSetting.detail
|
detail = HomeSetting.detail
|
showfence = HomeSetting.showfence
|
showanchor = HomeSetting.showanchor
|
showgetway = HomeSetting.showgateway
|
voice = HomeSetting.voice
|
sudu = HomeSetting.sudu
|
},
|
error: function(xhr, status, error) {
|
layer.msg("初始化失败:", error);
|
}
|
});
|
|
map = new mars3d.Map('mars3dContainer', {
|
scene: {
|
center: { lat: mapPosition[1], lng: mapPosition[0], alt: HomeSetting.alt, heading: HomeSetting.heading, pitch: HomeSetting.pitch },
|
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
|
fog: true,
|
fxaa: true,
|
globe: {
|
showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
|
depthTestAgainstTerrain: false,
|
baseColor: "#546a53"
|
},
|
// terrain: {
|
// url: "http://data.mars3d.cn/terrain",
|
// show: true
|
// },
|
cameraController: {
|
zoomFactor: 3.0,
|
minimumZoomDistance: 1,
|
maximumZoomDistance: 50000000,
|
enableRotate: true,
|
enableZoom: true
|
},
|
mapProjection: mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
|
mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL,// 2D下左右一直可以滚动重复世界地图
|
skyBox: {
|
sources: {
|
positiveX: "/hxzkuwb/view/Home/img/skybox_near/qingtian/rightav9.jpg",
|
negativeX: "/hxzkuwb/view/Home/img/skybox_near/qingtian/leftav9.jpg",
|
positiveY: "/hxzkuwb/view/Home/img/skybox_near/qingtian/frontav9.jpg",
|
negativeY: "/hxzkuwb/view/Home/img/skybox_near/qingtian/backav9.jpg",
|
positiveZ: "/hxzkuwb/view/Home/img/skybox_near/qingtian/topav9.jpg",
|
negativeZ: "/hxzkuwb/view/Home/img/skybox_near/qingtian/bottomav9.jpg"
|
},
|
sources2: {
|
positiveX: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetRight.png",
|
negativeX: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetLeft.png",
|
positiveY: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetFront.png",
|
negativeY: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetBack.png",
|
positiveZ: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetUp.png",
|
negativeZ: "/hxzkuwb/view/Home/img/skybox_near/wanxia/SunSetDown.png"
|
},
|
sources3: {
|
negativeX: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_mx.jpg",
|
negativeY: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_my.jpg",
|
negativeZ: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_mz.jpg",
|
positiveX: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_px.jpg",
|
positiveY: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_py.jpg",
|
positiveZ: "/hxzkuwb/view/Home/img/skybox/2/tycho2t3_80_pz.jpg"
|
}
|
}
|
},
|
terrain: {
|
url: "/hxzkuwb/view/Home/demo/titles/terrain/",
|
show: true
|
},
|
control: {
|
mouseDownView: true,
|
compass:true,
|
navigationHelpButton:true,
|
fullscreenButton:true,
|
homeButton:true,
|
locationBar:true,
|
zoom:true,
|
distanceLegend:true,
|
sceneModePicker: true,
|
baseLayerPicker: true, // 是否显示图层选择控件
|
// terrainProviderViewModels: getTerrainProviderViewModelsArr() // 自baseLayerPicker面板的地形可选数组
|
},
|
|
basemaps: [
|
// {
|
// name: "单张图片",
|
// icon: "//data.mars3d.cn/img/control/basemap/bingmap.png",
|
// type: "image",
|
// url: "/hxzkuwb/Home/img/world.jpg",
|
// show: true
|
// },
|
{
|
name: "天地图影像",
|
icon: "/hxzkuwb/view/Home/img/basemaps/tdt_img.png",
|
type: "tdt",
|
layer: "img_d",
|
key: mars3d.Token.tiandituArr,
|
credit: creditHtml
|
},
|
{
|
name: "天地图电子",
|
icon: "/hxzkuwb/view/Home/img/basemaps/tdt_vec.png",
|
type: "group",
|
layers: [
|
{ name: "底图", type: "tdt", layer: "vec_d", key: mars3d.Token.tiandituArr },
|
{ name: "注记", type: "tdt", layer: "vec_z", key: mars3d.Token.tiandituArr }
|
],
|
credit: creditHtml
|
},
|
{
|
name: "高德影像",
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [
|
{ name: "底图", type: "gaode", layer: "img_d" },
|
{ name: "注记", type: "gaode", layer: "img_z" }
|
],
|
credit: creditHtml
|
},
|
{
|
name: "高德电子",
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_vec.png",
|
type: "gaode",
|
layer: "vec",
|
|
credit: creditHtml
|
},
|
{
|
name: "百度影像",
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_img.png",
|
type: "group",
|
layers: [
|
{ name: "底图", type: "baidu", layer: "img_d" },
|
{ name: "注记", type: "baidu", layer: "img_z" }
|
],
|
credit: creditHtml
|
},
|
{
|
name: "百度电子",
|
icon: "/hxzkuwb/view/Home/img/basemaps/gaode_vec.png",
|
type: "baidu",
|
layer: "vec",
|
credit: creditHtml,
|
|
},
|
{
|
name: "谷歌影像",
|
icon: "/hxzkuwb/view/Home/img/basemaps/google_img.png",
|
type: "google",
|
layer: "img_d",
|
chinaCRS: mars3d.ChinaCRS.GCJ02,
|
|
},
|
{
|
name: "谷歌电子",
|
icon: "/hxzkuwb/view/Home/img/basemaps/google_vec.png",
|
type: "google",
|
layer: "vec",
|
chinaCRS: mars3d.ChinaCRS.GCJ02
|
},
|
{
|
name: "ArcGIS影像",
|
icon: "/hxzkuwb/view/Home/img/basemaps/esriWorldImagery.png",
|
type: "arcgis",
|
layer: "img_d", // 使用layer时会自动用内部固定url "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
|
enablePickFeatures: false,
|
show:true
|
},
|
{
|
"id": 2017,
|
"pid": 10,
|
"name": "蓝色底图",
|
"icon": "/hxzkuwb/view/Home/demo/img/basemaps/bd-c-midnight.png",
|
"type": "gaode",
|
"layer": "vec",
|
"chinaCRS": "GCJ02",
|
"invertColor": true,
|
"filterColor": "#4e70a6",
|
"brightness": 0.6,
|
"contrast": 1.8,
|
"gamma": 0.3,
|
"hue": 1,
|
"saturation": 0
|
},
|
{
|
"pid": 10,
|
"name": "黑色底图",
|
"icon": "/hxzkuwb/view/Home/demo/img/basemaps/bd-c-dark.png",
|
"type": "gaode",
|
"layer": "vec",
|
"chinaCRS": "GCJ02",
|
"invertColor": true,
|
"filterColor": "#909090",
|
"brightness": 0.6,
|
"contrast": 1.8,
|
"gamma": 0.3,
|
"hue": 1,
|
"saturation": 0
|
},
|
]
|
})
|
var currentTime = new Date();
|
var newTime = new Date(currentTime.getTime() - 5000);
|
map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(newTime))
|
showCarList() //加载人员数据
|
graphicLayerAnchor = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerAnchor)
|
graphicLayerGetWay = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerGetWay)
|
graphicLayerFence = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerFence)
|
if (showfence == "1"){
|
addfence() //加载围栏数据
|
console.log("加载围栏数据")
|
}
|
if (showanchor == "1"){
|
addAnchor() //加载基站数据
|
console.log("加载基站数据")
|
}
|
if (showgetway == "1"){
|
addGetWay() //加载网关数据
|
console.log("加载网关数据")
|
}
|
if (HomeSetting.basemap == "1"){
|
map.basemap = 2023; //设置无底图
|
console.log("设置无底图")
|
}
|
if (HomeSetting.layer == "1"){
|
LayerAdd1() //加载本地瓦图
|
console.log("加载本地瓦图")
|
}
|
if (HomeSetting.image == "1"){
|
ImgAdd() //加载本地图片
|
console.log("加载本地图片")
|
}
|
if (HomeSetting.threemap == "1"){
|
showQxShequDemo() //调用三维模型
|
console.log("加载三维模型")
|
}
|
|
if(HomeSetting.noterrain == "1"){
|
map.hasTerrain = true //开启地形
|
map.on(mars3d.EventType.terrainLoadSuccess, function (event) {
|
console.log("地形服务加载完成", event)
|
})
|
map.on(mars3d.EventType.terrainLoadError, function (event) {
|
console.log("地形服务加载失败", event)
|
})
|
map.terrainProvider = mars3d.LayerUtil.createTerrainProvider({
|
url: "/hxzkuwb/view/Home/demo/titles/terrain/",
|
})
|
console.log("开启地形")
|
}
|
|
|
|
//限定视角范围
|
// cameraHistory = new mars3d.thing.CameraHistory({
|
// limit: {
|
// // 限定视角范围
|
// position: Cesium.Cartesian3.fromDegrees(mapPosition[0], mapPosition[1], 0),
|
// radius: 50000.0,
|
// debugExtent: true
|
// },
|
// maxCacheCount: 999
|
// })
|
// map.addThing(cameraHistory)
|
|
// cameraHistory.on(mars3d.EventType.change, function (event) {
|
// // 触发自定义事件
|
// var count = event.count
|
// })
|
|
|
const graphicLayerimg = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerimg)
|
AddCamera()
|
CshMap()//初始化地图面板按钮
|
return map
|
}
|
function showCarList() {
|
// 创建矢量数据图层
|
graphicLayer = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayer)
|
|
graphicLayerCamera = new mars3d.layer.GraphicLayer()
|
map.addLayer(graphicLayerCamera)
|
// 鼠标移入提示信息
|
graphicLayerCamera.bindPopup(function(event) {
|
var attr = event.graphic?.attr;
|
var inthtml = `<table style="width: auto;overflow: hidden">
|
<tr>
|
<th scope="col" colspan="0" style="text-align:center;font-size:15px;">${attr.name}</th>
|
</tr>
|
<tr>
|
<td>
|
<div id="video-contianer" style="width: 300px;height: 150px;">
|
<video style="width: 300px;height: 150px;border: 1px solid red" class="video${attr.id}" id="video" preload="auto"autoplay="autoplay"muted></video>
|
<div class="mask${attr.id}" id="mask"></div>
|
</div>
|
</td>
|
</tr>
|
</table>`
|
|
return inthtml
|
}, {
|
autoClose: false,
|
})
|
// 单击地图空白处
|
map.on(mars3d.EventType.clickMap, function(event) {
|
if (lastClickCar) {
|
lastClickCar.circle.show = false
|
lastClickCar = null
|
}
|
// GongJuLanHide()
|
// XinXiZhanShiHide()
|
})
|
// 绑定点击事件
|
graphicLayer.on(mars3d.EventType.click, (event, position) => {
|
var car = event.graphic
|
personMsgtids(car.attr.id)
|
if (lastClickCar) {
|
if (lastClickCar === car) {
|
return
|
}
|
// 重复单击，跳出
|
lastClickCar.circle.show = false
|
lastClickCar = null
|
}
|
car.circle.show = true
|
lastClickCar = car
|
// car.openPopup();
|
}
|
)
|
graphicLayerCamera.on(mars3d.EventType.click, (event, position) => {
|
var car = event.graphic
|
OpenHk(car.attr)
|
// car.openPopup();
|
}
|
)
|
var lastClickCar
|
|
let PersonsList = [];
|
// 定义一个存储已添加模型的ID集合
|
let addedCarIds = new Set();
|
let addedCarIds1 = {};
|
// 定义一个获取人员列表的函数
|
function fetchPersonsList() {
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPSCesium",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
PersonsList = data;
|
// 记录当前在线人员的ID
|
const currentOnlineIds = new Set();
|
const currentNoOnlineIds = new Set();
|
// 遍历人员列表
|
PersonsList.forEach(item => {
|
let parts = item.image.split(',');
|
item.show = true;
|
item.type = 1;
|
// 仅处理在线人员
|
if (item.online === "1") {
|
// 使用 '===' 比较
|
currentOnlineIds.add(item.id);
|
if (!addedCarIds1.hasOwnProperty(item.id)) {
|
let modelParam = {
|
scale: parts[1],
|
url: "/hxzkuwb/view/"+parts[0],
|
pitch: 0,
|
roll: 0,
|
};
|
let car = new mars3d.graphic.Route({
|
id: item.id,
|
name: item.name,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
clampToGround: false,
|
},
|
circle: {
|
radius: 3,
|
materialType: mars3d.MaterialType.CircleWave,
|
speed: 10,
|
count: 3,
|
gradient: 0.1,
|
clampToGround: true,
|
show: false
|
},
|
style: {
|
label: {
|
text: item.name+" "+item.id,
|
font_size: 14,
|
color: "#000000",
|
distanceDisplayCondition: false,
|
clampToGround:false,
|
backgroundOpacity:0.8,
|
addHeight:parseInt(modelParam.scale)+parseInt(modelParam.scale),
|
backgroundPadding:10,
|
outlineWidth:2,
|
outline: true,
|
outlineColor: "#5BFF1A",
|
},
|
|
},
|
attr: item,
|
});
|
graphicLayer.addGraphic(car);
|
addedCarIds1[item.id] = item.online;
|
}
|
} else{
|
currentNoOnlineIds.add(item.id);
|
// 移除不在线人员的模型
|
if (addedCarIds1.hasOwnProperty(item.id)) {
|
// 通过 ID 查找对应的图形并移除
|
graphicLayer.getGraphics().forEach(graphic => {
|
if (graphic.id === item.id) {
|
graphicLayer.removeGraphic(graphic);
|
currentNoOnlineIds.delete(item.id);
|
}
|
}
|
);
|
delete addedCarIds1[item.id];
|
}
|
}
|
});
|
NameTitle =1;
|
}
|
});
|
}
|
function fetchPersonsListNoOnLine() {
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPSCesium",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
PersonsList = data;
|
const currentOnlineIds = new Set();
|
const currentNoOnlineIds = new Set();
|
PersonsList.forEach(item => {
|
let parts = item.image.split(',');
|
item.show = true;
|
item.type = 1;
|
var colors;
|
// 记录在线和不在线人员的ID
|
if (item.online === "1") {
|
currentOnlineIds.add(item.id);
|
colors = "#000000"
|
} else {
|
currentNoOnlineIds.add(item.id);
|
colors = "red"
|
}
|
|
if (!addedCarIds1.hasOwnProperty(item.id)) {
|
let modelParam = {
|
scale: parts[1],
|
url: "/hxzkuwb/view/"+parts[0],
|
pitch: 0,
|
roll: 0,
|
};
|
let car = new mars3d.graphic.Route({
|
id: item.id,
|
name: item.name,
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
clampToGround: true,
|
},
|
circle: {
|
radius: 3,
|
materialType: mars3d.MaterialType.CircleWave,
|
speed: 10,
|
count: 3,
|
gradient: 0.1,
|
clampToGround: true,
|
show: false
|
},
|
style: {
|
label: {
|
text: item.name+" "+item.id,
|
font_size: 14,
|
color: colors,
|
distanceDisplayCondition: false,
|
clampToGround:false,
|
backgroundOpacity:0.8,
|
addHeight:parseInt(modelParam.scale)+parseInt(modelParam.scale),
|
backgroundPadding:10,
|
outlineWidth:2,
|
outline: true,
|
outlineColor: "#5BFF1A",
|
},
|
},
|
attr: item,
|
});
|
// 将模型添加到图层中
|
graphicLayer.addGraphic(car);
|
// 打开模型弹窗
|
// car.openPopup();
|
// 将已添加模型的ID记录到集合中
|
addedCarIds1[item.id] = item.online;
|
}
|
})
|
}
|
});
|
}
|
|
// 定义一个更新轨迹的函数
|
function updateTrajectories() {
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPS",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
var listALL = data;
|
graphicLayer.eachGraphic( (car) => {
|
// 取出对应车辆的轨迹列表
|
var path = listALL.filter( (item) => item.ptagid === car.id);
|
path.forEach( (item) => {
|
var point = new mars3d.LngLatPoint(item.baoliu2,item.baoliu3,parseInt(item.baoliu4)/parseInt(100));
|
car.addDynamicPosition(point, item.paddtiem);
|
if (item.psos == "1"){
|
car.circle = show;
|
}
|
}
|
);
|
}
|
);
|
}
|
});
|
}
|
function updateTrajectoriesNoOnLine() {
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPS1",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
var listALL = data;
|
graphicLayer.eachGraphic( (car) => {
|
// 取出对应车辆的轨迹列表
|
var path = listALL.filter( (item) => item.ptagid === car.id);
|
path.forEach( (item) => {
|
var point = new mars3d.LngLatPoint(item.baoliu2,item.baoliu3,parseInt(item.baoliu4)/parseInt(100));
|
car.addDynamicPosition(point, item.paddtiem);
|
if (item.ponline != addedCarIds1[item.ptagid]){
|
graphicLayer.removeGraphic(car)
|
delete addedCarIds1[item.ptagid];
|
}
|
}
|
);
|
}
|
);
|
}
|
});
|
}
|
// 每五秒获取一次人员列表
|
setInterval(function (){
|
if (Disappear == "0"){
|
fetchPersonsListNoOnLine()
|
}else{
|
fetchPersonsList()
|
}
|
}, 5000);
|
// 每五秒更新一次轨迹
|
setInterval(function (){
|
if (Disappear == "0"){
|
updateTrajectoriesNoOnLine()
|
}else{
|
updateTrajectories()
|
}
|
}, 5000);
|
|
// 页面加载时立即获取一次人员列表
|
setTimeout(function (){
|
fetchPersonsList();
|
},500)
|
}
|
function addfence() {
|
var fences = [];
|
var fencesName = [];
|
$.ajax({
|
url: "/hxzkuwb/baidufenceName.do",
|
type: "GET",
|
async: false,
|
// 设置为 false 以使请求同步
|
success: function(data) {
|
fencesName = data;
|
},
|
error: function(xhr, status, error) {
|
console.error("请求失败: ", status, error);
|
}
|
});
|
$.ajax({
|
async: false,
|
//同步的
|
type: "GET",
|
url: "/hxzkuwb/baidufence.do",
|
dataType: "json",
|
success: function(data) {
|
fences = data.fences;
|
for (let i = 0; i < fences.length; i++) {
|
let fencesList = fences[i].split(';')
|
let fence = [];
|
for (let j = 0; j < fencesList.length; j++) {
|
const coordinateString = fencesList[j];
|
const [longitude,latitude] = coordinateString.split(',');
|
fence.push([parseFloat(longitude), parseFloat(latitude)]);
|
}
|
let colorFence = ""
|
let JuXingcolorFence = ""
|
if (fencesName[i].color == "红色"){
|
colorFence = "#C70708"
|
JuXingcolorFence="rgba(227,60,47,0.5)"
|
}
|
if (fencesName[i].color == "蓝色"){
|
colorFence = "#0D3DC1"
|
JuXingcolorFence="rgba(13,130,125,0.5)"
|
|
}
|
if (fencesName[i].color == "绿色"){
|
colorFence = "#20D85C"
|
JuXingcolorFence="rgba(54,150,80,0.5)"
|
}
|
if (fencesName[i].color == "黑色"){
|
colorFence = "#1E1E1E"
|
JuXingcolorFence="rgba(0,0,0,0.5)"
|
}
|
if (fencesName[i].color == "白色"){
|
colorFence = "#FFFFFF"
|
JuXingcolorFence="rgba(255,255,255,0.5)"
|
}
|
|
if(fencesName[i].shape =="多边形"){
|
const graphic = new mars3d.graphic.WallPrimitive({
|
positions: fence,
|
style: {
|
closure: true,
|
diffHeight: fencesName[i].baoliu11/100,
|
materialType: mars3d.MaterialType.LineFlow,
|
materialOptions: {
|
// 动画线材质
|
image: "img/textures/fence.png",
|
axisY: true,
|
color: colorFence,
|
speed: 10 // 速度，建议取值范围1-100
|
},
|
label: {
|
text: fencesName[i].name,
|
font_size: 18,
|
outline: true,
|
outlineColor: colorFence,
|
color: "#ffffff",
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_near: 0
|
}
|
},
|
|
})
|
graphicLayerFence.addGraphic(graphic)
|
}else{
|
|
|
var parseInt
|
var graphic = new mars3d.graphic.RectanglePrimitive({
|
positions: [
|
fence[0],
|
fence[1]
|
],
|
style: {
|
color: JuXingcolorFence,
|
diffHeight: fencesName[i].baoliu11/100,
|
label: {
|
text: fencesName[i].name,
|
font_size: 18,
|
color: "#FFFFFF",
|
distanceDisplayCondition: true,
|
distanceDisplayCondition_far: 500000,
|
distanceDisplayCondition_near: 0
|
}
|
},
|
|
})
|
graphicLayerFence.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
}
|
}
|
|
},
|
});
|
return fences;
|
}
|
function addAnchor(){
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getAnchor",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
PersonsList = data;
|
// 记录当前在线人员的ID
|
// 遍历人员列表
|
PersonsList.forEach(item => {
|
// if (item.baoliu1 == floores){
|
item.show = true;
|
var Anchor = new mars3d.graphic.BillboardEntity({
|
position: [item.baoliu2, item.baoliu3, 0],
|
style: {
|
image: "/hxzkuwb/Home/HomeImg/anchoron.png",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale:0.5,
|
label: {
|
text: "基站编号："+item.pname,
|
font_size: 12,
|
color: "#ffffff",
|
distanceDisplayCondition: false,
|
clampToGround:false,
|
verticalOrigin:Cesium.VerticalOrigin.TOP,
|
pixelOffsetY:-30
|
}
|
},
|
attr: item
|
})
|
graphicLayerAnchor.addGraphic(Anchor) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
// }else{
|
// return
|
// }
|
});
|
}
|
});
|
}
|
function addGetWay(){
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGetWay",
|
dataType: 'json',
|
data: {},
|
success: function(data) {
|
PersonsList = data;
|
// 记录当前在线人员的ID
|
// 遍历人员列表
|
PersonsList.forEach(item => {
|
item.show = true;
|
let modelParam = {
|
scale: 0.1,
|
url: "//data.mars3d.cn/gltf/mars/leida.glb",
|
pitch: 0,
|
roll: 0,
|
};
|
let GetWay = new mars3d.graphic.Route({
|
maxCacheCount: -1,
|
model: {
|
...modelParam,
|
clampToGround: true,
|
},
|
attr: item,
|
style: {
|
label: {
|
text: item.ptagid+""+item.pname,
|
font_size: 18,
|
color: "#ffffff",
|
distanceDisplayCondition: false,
|
clampToGround:false,
|
addHeight:7
|
}
|
},
|
});
|
// 将模型添加到图层中
|
graphicLayerGetWay.addGraphic(GetWay);
|
var point = new mars3d.LngLatPoint(item.baoliu2,item.baoliu3);
|
GetWay.addDynamicPosition(point, item.paddtiem);
|
});
|
}
|
});
|
}
|
function LayerAdd(){
|
var tileLayer = new mars3d.layer.XyzLayer({
|
url: "/hxzkuwb/Home/demo/titles/{z}/{x}_{y}.png",
|
minimumLevel: 0,
|
maximumLevel: 20,
|
zIndex: 25
|
})
|
map.addLayer(tileLayer)
|
}
|
function LayerAdd1(){
|
tileLayer = new mars3d.layer.TmsLayer({
|
name: "TMS瓦片",
|
url: "/hxzkuwb/Home/demo/titles/"
|
})
|
map.addLayer(tileLayer)
|
}
|
function ImgAdd(){
|
var tileLayer = new mars3d.layer.ImageLayer({
|
name: "1234",
|
url: "/hxzkuwb/Home/demo/img/map1.png",
|
rectangle: { xmin: 113.402366, xmax: 113.414727, ymin: 38.443572, ymax: 38.443684 },
|
zIndex: 20,
|
})
|
map.addLayer(tileLayer)
|
}
|
|
function AddCamera(){
|
$.post("/hxzkuwb/FindHaiKang",function (data){
|
for (var i = 0 ; i <data.length;i++){
|
var graphic = new mars3d.graphic.BillboardEntity({
|
position: [data[i].posx, data[i].posy, 10],
|
style: {
|
image: "/hxzkuwb/view/Home/HomeImg/camera.png",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale:0.15,
|
},
|
attr: data[i]
|
})
|
graphicLayerCamera.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
|
graphic.bindPopup(function(event) {
|
var attr = event.graphic?.attr;
|
var inthtml = `<table style="width: auto;overflow: hidden">
|
<tr>
|
<th scope="col" colspan="0" style="text-align:center;font-size:15px;">${attr.name}</th>
|
</tr>
|
<tr>
|
<td>
|
<div id="video-contianer" style="width: 300px;height: 150px;">
|
<video style="width: 300px;height: 150px;" class="video${attr.id}" id="video" preload="auto"autoplay="autoplay"muted></video>
|
<div class="mask${attr.id}" id="mask"></div>
|
</div>
|
</td>
|
</tr>
|
</table>`
|
return inthtml
|
}, {
|
autoClose: false,
|
closeOnClick: false,
|
})
|
}
|
})
|
// // 演示个性化处理graphic
|
// initGraphicManager(graphic)
|
}
|
setTimeout(function (){
|
$.post("/hxzkuwb/FindHaiKang",function (data){
|
for (var i = 0 ; i <data.length; i++){
|
const videoContainer = document.getElementById('video-contianer');
|
const videoElement = document.querySelector('.video'+data[i].id);
|
const maskElement = document.querySelector('.mask'+data[i].id);
|
// 创建 WebRtcStreamer 实例
|
let webRtcServer = null;
|
var ip = 'http://'+data[i].shebeiport+':8000'
|
// 'rtsp://admin:hxzk2015@192.168.31.65:554/Streaming/Channels/101'
|
var rtps = 'rtsp://'+data[i].username+':'+data[i].password+'@'+data[i].ip+':'+data[i].port+'/Streaming/Channels/'+data[i].baoliu1
|
// 初始化视频
|
function initVideo() {
|
try {
|
webRtcServer = new WebRtcStreamer(videoElement, ip);
|
webRtcServer.connect(rtps); // 这里需要替换为你实际的 RTSP 地址
|
} catch (error) {
|
}
|
}
|
|
// 处理双击和单击事件
|
let clickCount = 0;
|
|
function dbClick() {
|
clickCount++;
|
if (clickCount === 2) {
|
btnFull(); // 双击全屏
|
clickCount = 0;
|
}
|
setTimeout(() => {
|
if (clickCount === 1) {
|
clickCount = 0;
|
}
|
}, 250);
|
}
|
|
// 视频全屏
|
function btnFull() {
|
if (videoElement.webkitRequestFullScreen) {
|
videoElement.webkitRequestFullScreen();
|
} else if (videoElement.mozRequestFullScreen) {
|
videoElement.mozRequestFullScreen();
|
} else if (videoElement.requestFullscreen) {
|
videoElement.requestFullscreen();
|
}
|
}
|
|
// 处理视频点击事件
|
function handleClickVideo() {
|
// 这里假设 isOn 是一个全局变量或通过某种方式获取
|
const isOn = true; // 你需要替换为实际的逻辑
|
const spareId = 1; // 你需要替换为实际的逻辑
|
|
if (isOn) {
|
// 触发 selectVideo 事件
|
// 这里假设你有一个自定义事件或回调函数来处理 selectVideo
|
// 例如：window.dispatchEvent(new CustomEvent('selectVideo', { detail: spareId }));
|
dbClick();
|
} else {
|
btnFull();
|
}
|
}
|
|
// 监听页面卸载事件
|
window.onbeforeunload = () => {
|
if (webRtcServer) {
|
webRtcServer.disconnect();
|
}
|
};
|
|
// 初始化视频流
|
initVideo();
|
// maskElement.addEventListener('click', handleClickVideo);
|
}
|
})
|
},2000)
|
function OpenHk(data){
|
setTimeout(function (){
|
const videoContainer = document.getElementById('video-contianer');
|
const videoElement = document.querySelector('.video'+data.id);
|
const maskElement = document.querySelector('.mask'+data.id);
|
// 创建 WebRtcStreamer 实例
|
let webRtcServer = null;
|
var ip = 'http://'+data.shebeiport+':8000'
|
// 'rtsp://admin:hxzk2015@192.168.31.65:554/Streaming/Channels/101'
|
var rtps = 'rtsp://'+data.username+':'+data.password+'@'+data.ip+':'+data.port+'/Streaming/Channels/'+data.baoliu1
|
// 初始化视频
|
function initVideo() {
|
try {
|
webRtcServer = new WebRtcStreamer(videoElement, ip);
|
webRtcServer.connect(rtps); // 这里需要替换为你实际的 RTSP 地址
|
} catch (error) {
|
}
|
}
|
|
// 处理双击和单击事件
|
let clickCount = 0;
|
|
function dbClick() {
|
clickCount++;
|
if (clickCount === 2) {
|
btnFull(); // 双击全屏
|
clickCount = 0;
|
}
|
setTimeout(() => {
|
if (clickCount === 1) {
|
clickCount = 0;
|
}
|
}, 250);
|
}
|
|
// 视频全屏
|
function btnFull() {
|
if (videoElement.webkitRequestFullScreen) {
|
videoElement.webkitRequestFullScreen();
|
} else if (videoElement.mozRequestFullScreen) {
|
videoElement.mozRequestFullScreen();
|
} else if (videoElement.requestFullscreen) {
|
videoElement.requestFullscreen();
|
}
|
}
|
|
// 处理视频点击事件
|
function handleClickVideo() {
|
// 这里假设 isOn 是一个全局变量或通过某种方式获取
|
const isOn = true; // 你需要替换为实际的逻辑
|
const spareId = 1; // 你需要替换为实际的逻辑
|
|
if (isOn) {
|
// 触发 selectVideo 事件
|
// 这里假设你有一个自定义事件或回调函数来处理 selectVideo
|
// 例如：window.dispatchEvent(new CustomEvent('selectVideo', { detail: spareId }));
|
dbClick();
|
} else {
|
btnFull();
|
}
|
}
|
|
// 监听页面卸载事件
|
window.onbeforeunload = () => {
|
if (webRtcServer) {
|
webRtcServer.disconnect();
|
}
|
};
|
|
// 初始化视频流
|
initVideo();
|
maskElement.addEventListener('click', handleClickVideo);
|
},1000)
|
}
|
function CshMap(){
|
map.control.compass.show = false
|
map.control.navigationHelpButton.show = false
|
map.control.fullscreenButton.show = false
|
map.control.homeButton.show = false
|
map.control.locationBar.show = false
|
map.control.zoom.show = false
|
map.control.sceneModePicker.show = false
|
map.control.baseLayerPicker.show = false
|
map.control.mouseDownView.show = false
|
map.control.distanceLegend.show = false
|
}
|
