地图资源按需加载
This commit is contained in:
parent
7e802739e7
commit
3a870ed8e2
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= VUE_APP_TITLE %></title>
|
||||
<script src="./jsmap/jsmap.js"> </script>
|
||||
<!-- <script src="./jsmap/jsmap.js"> </script> -->
|
||||
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/>
|
||||
<script type="text/javascript">
|
||||
document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
|
||||
|
|
|
|||
|
|
@ -793,198 +793,206 @@ export default {
|
|||
that.timerTime = setInterval(() => {
|
||||
that.showTime();
|
||||
}, 1000);
|
||||
window.map = new jsmap.JSMap({
|
||||
mapType: jsmap.JSMapType.MAP_3D,
|
||||
container: 'mapContainer',
|
||||
mapServerURL: 'data/map',
|
||||
enableShadows: false, //是否开启阴影 默认false
|
||||
enableLighting: false, //是否开发光照 默认false
|
||||
showBuildingMarker: true,
|
||||
// showNavigationDisplay: true,
|
||||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||
floorControlOptions: {
|
||||
floorHeight: 20,//楼层间距
|
||||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||||
offset: {
|
||||
x: 50,
|
||||
y: 200,
|
||||
}//控件偏移位置
|
||||
},
|
||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||
backgroundColor: '#3798ff', //背景颜色
|
||||
viewOptions: {
|
||||
//屏幕中心坐标
|
||||
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
||||
// center: {x:120,y:30,z:10},
|
||||
//相机距屏幕中心点距离（单位m）
|
||||
distance: 550,
|
||||
// 旋转角（单位°）
|
||||
rotate: 0,
|
||||
//倾斜角（单位°）
|
||||
tilt: 45,
|
||||
}
|
||||
});
|
||||
window.map.openMapById('0000');
|
||||
window.map.on('loadComplete', e => {
|
||||
that.riskMaskerLayers();//风险区域
|
||||
that.userMaskerLayers();//人员
|
||||
that.cameraMaskerLayers();//摄像头
|
||||
that.domMarkerLayers();//监控视频
|
||||
that.polygonMarkerLayers();//危险作业
|
||||
that.speakersMaskerLayers();//喇叭
|
||||
// that.jobDomMarkerLayers();//危险作业图片
|
||||
that.areaMarkerLayers();//危险作业图片
|
||||
let compassControl = new jsmap.JSCompassControl({
|
||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||
offset: {
|
||||
x: 420,
|
||||
y: 50
|
||||
debugger;
|
||||
console.log( window.location.host);
|
||||
let host = window.location.host;
|
||||
let jsUrl = host.indexOf('localhost')>-1?'/http://222.222.144.147:6013/jsmap/jsmap.js':host+'/jsmap/jsmap.js';
|
||||
that.loadScript('mapId', 'http://222.222.144.147:6013/jsmap/jsmap.js', () => {
|
||||
debugger;
|
||||
window.map = new jsmap.JSMap({
|
||||
mapType: jsmap.JSMapType.MAP_3D,
|
||||
container: 'mapContainer',
|
||||
mapServerURL: 'data/map',
|
||||
enableShadows: false, //是否开启阴影 默认false
|
||||
enableLighting: false, //是否开发光照 默认false
|
||||
showBuildingMarker: true,
|
||||
// showNavigationDisplay: true,
|
||||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||||
floorControlOptions: {
|
||||
floorHeight: 20,//楼层间距
|
||||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||||
offset: {
|
||||
x: 50,
|
||||
y: 200,
|
||||
}//控件偏移位置
|
||||
},
|
||||
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
|
||||
backgroundColor: '#3798ff', //背景颜色
|
||||
viewOptions: {
|
||||
//屏幕中心坐标
|
||||
center: { x: 114.63059258861512, y: 38.81407163905287, z: 1 },
|
||||
// center: {x:120,y:30,z:10},
|
||||
//相机距屏幕中心点距离（单位m）
|
||||
distance: 550,
|
||||
// 旋转角（单位°）
|
||||
rotate: 0,
|
||||
//倾斜角（单位°）
|
||||
tilt: 45,
|
||||
}
|
||||
});
|
||||
window.map.addControl(compassControl);
|
||||
let zoomControl = new jsmap.JSZoomControl({
|
||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||
offset: {
|
||||
x: 450,
|
||||
y: 5
|
||||
}
|
||||
});
|
||||
window.map.addControl(zoomControl);
|
||||
});
|
||||
window.map.on('mapClickNode', event => {
|
||||
let item = event;
|
||||
let that = this;
|
||||
let type = event.nodeType.toString();
|
||||
console.log(type === 'Symbol(icontextmaker)');
|
||||
if (item.markers.length > 0) {
|
||||
if (type === 'Symbol(boxmarker)') {
|
||||
let areaId = item.properties.get("areaId");
|
||||
console.log(areaId);
|
||||
that.$API.am.area.item.req(areaId).then(res=>{
|
||||
that.areaItemDetail = res;
|
||||
that.screenJob = false;
|
||||
that.screenWarning = false;
|
||||
that.screenRisk = true;
|
||||
})
|
||||
//风险区域
|
||||
} else if (type === 'Symbol(icontextmaker)') {
|
||||
//摄像头和人员
|
||||
if (document.getElementById(item.markers[0].id) === null) {
|
||||
if (item.markers[0].image === "/img/camera.svg") {
|
||||
//摄像头
|
||||
this.params.json.data.channelId = item.markers[0].id;
|
||||
let domMarker = new jsmap.JSDomMarker({
|
||||
id: item.markers[0].id + 'mark',
|
||||
position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
|
||||
floorId: 1,
|
||||
depthTest: true,
|
||||
content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
||||
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||
marginOffset: {
|
||||
x: 30,
|
||||
y: -50
|
||||
},
|
||||
properties: {
|
||||
type: 0,
|
||||
},
|
||||
callback: (node) => {
|
||||
console.log(node);
|
||||
}
|
||||
});
|
||||
this.domMarkerLayer.addMarker(domMarker);
|
||||
var otest = document.getElementById(item.markers[0].id);
|
||||
// 创建一个新dom,并设置icon，绑定点击事件
|
||||
let newEle = document.createElement("div");
|
||||
newEle.className = "v_title";
|
||||
newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
|
||||
let title = document.createElement("div");
|
||||
title.innerText = "实时监控";
|
||||
newEle.style.color = "#ffffff";
|
||||
let close = document.createElement("div");
|
||||
close.className = "v_close";
|
||||
close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
|
||||
newEle.appendChild(title);
|
||||
newEle.appendChild(close);
|
||||
let newEle2 = document.createElement("video");
|
||||
newEle2.id = item.markers[0].id + 'videoPlayer';
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
||||
// 在对应dom 下追加创建的dom
|
||||
otest.appendChild(newEle);
|
||||
otest.appendChild(newEle2);
|
||||
newEle2.onclick = () => {
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||
this.$API.am.video.item.req(this.params).then(res => {
|
||||
console.log(res);
|
||||
this.url = res.url;
|
||||
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
||||
if (flvjs.isSupported()) {
|
||||
let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
|
||||
var mediaDataSource = {
|
||||
type: 'flv',
|
||||
hasAudio:false,
|
||||
hasVideo:true,
|
||||
isLive:false,
|
||||
withCredentials:false,
|
||||
url:URLS
|
||||
};
|
||||
let flvPlayer = flvjs.createPlayer(mediaDataSource, {
|
||||
enableWorker: false,
|
||||
lazyLoadMaxDuration: 3 * 60,
|
||||
seekType: 'range',
|
||||
});
|
||||
flvPlayer.attachMediaElement(videoElement);
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||
flvPlayer.load();
|
||||
}
|
||||
})
|
||||
};
|
||||
close.onclick = () => {
|
||||
let nodeMark = document.getElementById(item.markers[0].id);
|
||||
nodeMark.remove();
|
||||
}
|
||||
} else {
|
||||
//人员
|
||||
that.screenUserItem = item.properties.get("employee");
|
||||
that.screenUser = true;
|
||||
// debugger;
|
||||
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
|
||||
duration: 1000,
|
||||
range: 200
|
||||
})
|
||||
}
|
||||
window.map.openMapById('0000');
|
||||
window.map.on('loadComplete', e => {
|
||||
that.riskMaskerLayers();//风险区域
|
||||
that.userMaskerLayers();//人员
|
||||
that.cameraMaskerLayers();//摄像头
|
||||
that.domMarkerLayers();//监控视频
|
||||
that.polygonMarkerLayers();//危险作业
|
||||
that.speakersMaskerLayers();//喇叭
|
||||
// that.jobDomMarkerLayers();//危险作业图片
|
||||
that.areaMarkerLayers();//危险作业图片
|
||||
let compassControl = new jsmap.JSCompassControl({
|
||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||
offset: {
|
||||
x: 420,
|
||||
y: 50
|
||||
}
|
||||
} else if (type === 'Symbol(polygonmarker)') {
|
||||
//危险作业
|
||||
that.screenRisk = false;
|
||||
that.screenWarning = false;
|
||||
that.areaDetailId = item.properties.get("area");
|
||||
let areaWork = that.areaList.filter(area=>{
|
||||
return area.id==that.areaDetailId
|
||||
});
|
||||
});
|
||||
window.map.addControl(compassControl);
|
||||
let zoomControl = new jsmap.JSZoomControl({
|
||||
position: jsmap.JSControlPosition.LEFT_TOP,
|
||||
offset: {
|
||||
x: 450,
|
||||
y: 5
|
||||
}
|
||||
});
|
||||
window.map.addControl(zoomControl);
|
||||
});
|
||||
window.map.on('mapClickNode', event => {
|
||||
let item = event;
|
||||
let that = this;
|
||||
let type = event.nodeType.toString();
|
||||
console.log(type === 'Symbol(icontextmaker)');
|
||||
if (item.markers.length > 0) {
|
||||
if (type === 'Symbol(boxmarker)') {
|
||||
let areaId = item.properties.get("areaId");
|
||||
console.log(areaId);
|
||||
that.$API.am.area.item.req(areaId).then(res=>{
|
||||
that.areaItemDetail = res;
|
||||
that.screenJob = false;
|
||||
that.screenWarning = false;
|
||||
that.screenRisk = true;
|
||||
})
|
||||
//风险区域
|
||||
} else if (type === 'Symbol(icontextmaker)') {
|
||||
//摄像头和人员
|
||||
if (document.getElementById(item.markers[0].id) === null) {
|
||||
if (item.markers[0].image === "/img/camera.svg") {
|
||||
//摄像头
|
||||
this.params.json.data.channelId = item.markers[0].id;
|
||||
let domMarker = new jsmap.JSDomMarker({
|
||||
id: item.markers[0].id + 'mark',
|
||||
position: new jsmap.JSPoint(item.markers[0].position.x, item.markers[0].position.y, 0),
|
||||
floorId: 1,
|
||||
depthTest: true,
|
||||
content: `<div id="` + item.markers[0].id + `" style="display: block;position:absolute;z-index: 10;top: 0;background: rgba(24,36,51,.7);padding: 0 16px 16px;box-sizing: border-box" id="vchannelWrap"></div>`,
|
||||
offset: jsmap.JSControlPosition.RIGHT_CENTER,
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
|
||||
marginOffset: {
|
||||
x: 30,
|
||||
y: -50
|
||||
},
|
||||
properties: {
|
||||
type: 0,
|
||||
},
|
||||
callback: (node) => {
|
||||
console.log(node);
|
||||
}
|
||||
});
|
||||
this.domMarkerLayer.addMarker(domMarker);
|
||||
var otest = document.getElementById(item.markers[0].id);
|
||||
// 创建一个新dom,并设置icon，绑定点击事件
|
||||
let newEle = document.createElement("div");
|
||||
newEle.className = "v_title";
|
||||
newEle.setAttribute("style", "display:flex;justify-content: space-between;padding:10px 0");
|
||||
let title = document.createElement("div");
|
||||
title.innerText = "实时监控";
|
||||
newEle.style.color = "#ffffff";
|
||||
let close = document.createElement("div");
|
||||
close.className = "v_close";
|
||||
close.setAttribute("style", "width: 16px;height: 16px;background: url(/img/close.png) no-repeat;background-size: 100% 100%;");
|
||||
newEle.appendChild(title);
|
||||
newEle.appendChild(close);
|
||||
let newEle2 = document.createElement("video");
|
||||
newEle2.id = item.markers[0].id + 'videoPlayer';
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url('/img/v_mask.png') no-repeat;background-size: 100% 100%;");
|
||||
// 在对应dom 下追加创建的dom
|
||||
otest.appendChild(newEle);
|
||||
otest.appendChild(newEle2);
|
||||
newEle2.onclick = () => {
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||
this.$API.am.video.item.req(this.params).then(res => {
|
||||
console.log(res);
|
||||
this.url = res.url;
|
||||
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
|
||||
if (flvjs.isSupported()) {
|
||||
let videoElement = document.getElementById(item.markers[0].id + 'videoPlayer');
|
||||
var mediaDataSource = {
|
||||
type: 'flv',
|
||||
hasAudio:false,
|
||||
hasVideo:true,
|
||||
isLive:false,
|
||||
withCredentials:false,
|
||||
url:URLS
|
||||
};
|
||||
let flvPlayer = flvjs.createPlayer(mediaDataSource, {
|
||||
enableWorker: false,
|
||||
lazyLoadMaxDuration: 3 * 60,
|
||||
seekType: 'range',
|
||||
});
|
||||
flvPlayer.attachMediaElement(videoElement);
|
||||
newEle2.setAttribute("style", "width: 327px;height:183px;background:url(/img/rotate_line.png) no-repeat;background-size:60px 60px;background-position:center center;");
|
||||
flvPlayer.load();
|
||||
}
|
||||
})
|
||||
};
|
||||
close.onclick = () => {
|
||||
let nodeMark = document.getElementById(item.markers[0].id);
|
||||
nodeMark.remove();
|
||||
}
|
||||
} else {
|
||||
//人员
|
||||
that.screenUserItem = item.properties.get("employee");
|
||||
that.screenUser = true;
|
||||
// debugger;
|
||||
window.map.flyToMarker(that.userMarker[that.screenUserItem.mac], {
|
||||
duration: 1000,
|
||||
range: 200
|
||||
})
|
||||
}
|
||||
}
|
||||
} else if (type === 'Symbol(polygonmarker)') {
|
||||
//危险作业
|
||||
that.screenRisk = false;
|
||||
that.screenWarning = false;
|
||||
that.areaDetailId = item.properties.get("area");
|
||||
let areaWork = that.areaList.filter(area=>{
|
||||
return area.id==that.areaDetailId
|
||||
});
|
||||
|
||||
that.areaRowClick(areaWork[0]);
|
||||
that.areaRowClick(areaWork[0]);
|
||||
}
|
||||
} else {
|
||||
}
|
||||
} else {
|
||||
}
|
||||
});
|
||||
//左侧数据统计
|
||||
this.getManCount();//人员统计$$
|
||||
this.getWarnings();//报警统计$$
|
||||
this.getAreaList();//区域/风险区域$$
|
||||
this.getGroup();//部门$$
|
||||
//右上展示数据
|
||||
this.getWarningTotal();//事件统计
|
||||
this.getWarningType();//事件类型
|
||||
let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
|
||||
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
|
||||
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
|
||||
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
|
||||
// debugger;
|
||||
let domHeight = pageHeight - height1 - 310 - 84;
|
||||
let areaTableHeight = domHeight - height3 - 50;
|
||||
this.areaTableHeight = areaTableHeight;
|
||||
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
|
||||
});
|
||||
|
||||
})
|
||||
//左侧数据统计
|
||||
this.getManCount();//人员统计$$
|
||||
this.getWarnings();//报警统计$$
|
||||
this.getAreaList();//区域/风险区域$$
|
||||
this.getGroup();//部门$$
|
||||
//右上展示数据
|
||||
this.getWarningTotal();//事件统计
|
||||
this.getWarningType();//事件类型
|
||||
let pageHeight = document.getElementsByClassName('screen-cockpit')[0].clientHeight;
|
||||
let height1 = document.getElementsByClassName('cockpit-count')[0].clientHeight;
|
||||
let height2 = document.getElementsByClassName('cockpit-alarm')[0].clientHeight;
|
||||
let height3 = document.getElementsByClassName('area-simple-title')[0].clientHeight;
|
||||
// debugger;
|
||||
let domHeight = pageHeight - height1 - 310 - 84;
|
||||
let areaTableHeight = domHeight - height3 - 50;
|
||||
this.areaTableHeight = areaTableHeight;
|
||||
document.getElementsByClassName('cockpit-info')[0].style.height = domHeight + 'px';
|
||||
// document.getElementsByClassName('area-info-body')[0].style.height = simpleBodyHeight + 'px';
|
||||
},
|
||||
computed:{
|
||||
|
|
@ -1007,6 +1015,29 @@ export default {
|
|||
clearInterval(this.eventAudioTimer)//事件
|
||||
},
|
||||
methods: {
|
||||
loadScript(id, url, callback) {
|
||||
//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
|
||||
if (document.querySelector(`#${id}`)) {
|
||||
callback && callback()
|
||||
return;
|
||||
}
|
||||
//第一次加载，先创建 script 标签
|
||||
const script = document.createElement('script');
|
||||
script.src = url;
|
||||
//创建id属性
|
||||
script.setAttribute('id', id);
|
||||
//获取第一个script标签
|
||||
const firstScript = document.getElementsByTagName('script')[0];
|
||||
//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
|
||||
firstScript.parentNode.insertBefore(script, firstScript);
|
||||
//script 一加载就执行
|
||||
script.onload = script.onreadystatechange = function() {
|
||||
// 加载完成
|
||||
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
|
||||
callback && callback()
|
||||
}
|
||||
};
|
||||
},
|
||||
//查询某个人员
|
||||
searchOne(keyword){
|
||||
let that = this;
|
||||
|
|
|
|||
Loading…
Reference in New Issue