bigScreen

This commit is contained in:
shijing 2022-06-29 14:25:56 +08:00
parent 20546f91cb
commit fd86f4d520
7 changed files with 290 additions and 152 deletions

2
public/img/camera.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656410743724" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4666" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M950.784 442.88c0-243.2-197.12-440.32-440.32-440.32S70.144 199.68 70.144 442.88c0 153.6 78.336 288.256 197.632 367.104L510.464 1016.32l242.688-206.336c118.784-78.848 197.632-214.016 197.632-367.104z" fill="#1C97FB" p-id="4667"></path><path d="M321.568 223.888a16 16 0 0 0-20.768 8.672l-70.352 168.8a16 16 0 0 0 9.28 21.2l319.376 116.368a16 16 0 0 0 18.272-5.424l106.272-141.36a16 16 0 0 0-6.8-24.448l-355.28-143.808z m421.488 218.56a6.4 6.4 0 0 0-5.536 4.032l-35.968 90.496a6.4 6.4 0 0 0 1.312 6.784l54.32 56.992a6.4 6.4 0 0 0 10.56-2.048l60.528-152.64a6.4 6.4 0 0 0-6.368-8.752l-78.848 5.152z m-46.192-28.224a6.4 6.4 0 0 0-7.52 2.208l-71.872 99.456a6.4 6.4 0 0 0 2.88 9.712l54.272 21.136a6.4 6.4 0 0 0 8.272-3.6l43.728-110.4a6.4 6.4 0 0 0-3.616-8.32l-26.144-10.192z m-415.84 67.104a6.4 6.4 0 0 0 3.6 8.384l35.856 14.016a3.2 3.2 0 0 1 1.728 4.336l-14.64 31.248a6.4 6.4 0 0 1-5.792 3.68H230.4a6.4 6.4 0 0 0-6.4 6.4v21.92c0 3.52 2.88 6.4 6.4 6.4h93.52a6.4 6.4 0 0 0 5.808-3.712l24.96-53.632a3.2 3.2 0 0 1 4.064-1.632l40.832 15.888a6.4 6.4 0 0 0 8.272-3.616l10.32-26.128a6.4 6.4 0 0 0-3.616-8.32l-114.544-44.928a6.4 6.4 0 0 0-8.256 3.52l-10.72 26.176z" fill="#FFFFFF" p-id="4668"></path></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/img/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 B

BIN
public/img/v_mask.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/img/video.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

View File

@ -58,10 +58,18 @@
</div>
</div>
<div class="drop-content" v-if="showUserSelect">
<div @click="changeDropIndex('1')" class="drop-content-item" :class="{'active':dropIndex==='1'}">全部</div>
<div @click="changeDropIndex('2')" class="drop-content-item" :class="{'active':dropIndex==='2'}">内部人员</div>
<div @click="changeDropIndex('3')" class="drop-content-item" :class="{'active':dropIndex==='3'}">承包商</div>
<div @click="changeDropIndex('4')" class="drop-content-item" :class="{'active':dropIndex==='4'}">访客</div>
<div @click="changeDropIndex('1')" class="drop-content-item"
:class="{'active':dropIndex==='1'}">全部
</div>
<div @click="changeDropIndex('2')" class="drop-content-item"
:class="{'active':dropIndex==='2'}">内部人员
</div>
<div @click="changeDropIndex('3')" class="drop-content-item"
:class="{'active':dropIndex==='3'}">承包商
</div>
<div @click="changeDropIndex('4')" class="drop-content-item"
:class="{'active':dropIndex==='4'}">访客
</div>
</div>
<div class="filter-action showroam">
<div v-if="filterCtrlFocus" class="action-shrink" @click="filterCtrlFocusChange"></div>
@ -187,35 +195,66 @@
</div>
<!--地图-->
<div id='mapContainer'></div>
<div style="display: block;">
<div id="2f51-1656480511896-48924"
style="position: absolute; display:block; top:0; left:0; transform-origin:left top; transform:translate(0%, 0%) translate(1010.03px, 548.439px) scale(1, 1);">
<div class="camera-pop left-arrow">
<div class="camera-pop-title">
<span>实时视频</span>
<span class="pop-close" onclick="cameraClose()"></span>
</div>
<div class="camera-pop-flv" id="popvideo-310" onclick="cameraOpen()">
<div class="camera-pop-pause"></div>
<div id="videoElement"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
boxMarkerLayer:null,//
boxMarkerLayer: null,//
pointMarkerLayer: null,//
polygonMaskerLayer: null,//
cameraMaskerLayer: null,//
materialsMaskerLayer: null,//
carsMaskerLayer: null,//
manMaskerLayer: null,//
flyManager: null,
dropIndex: '1',
markList: [false, false, false, false, false, false, false, false],
autoRun: false,
showUserSelect: false,
filterCtrlFocus: true,
params:{
json:{
data: {
channelId: "",
streamType: "2",
type: "flv"
}
},
code:'video_realtime'
},
}
},
created(){
const scriptInfo = document.createElement("script");
scriptInfo.setAttribute("data-callType","callScript");
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
document.head.appendChild(scriptInfo)
},
mounted() {
debugger;
console.log(jsmap);
console.log(jsmap.JSMapType);
window.map = new jsmap.JSMap({
mapType: jsmap.JSMapType.MAP_3D,
container: 'mapContainer',
mapServerURL: 'data/map',
enableShadows: false, // false
enableLighting: false, // false
luminanceAtZenith: 0.54, //
scatteringIntensity: 1.0, //
specularIntensity: 0, //
showBuildingMarker: false,
mapScaleLevelRange: [16, 23],// 1623,[1,24]
floorControlOptions: {
floorHeight: 20,//
@ -225,89 +264,28 @@
y: 10,
}//
},
imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
backgroundColor: '#3798ff', //
defaultTiltAngle: 30, //
defaultRotateAngle: 60, //
/*defaultTiltAngle: 30, //默认倾斜角设置动态效果请参看地图演示平台
defaultRotateAngle: 60, //*/
viewOptions: {
//
center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
// center: {x:120,y:30,z:10},
//m
distance: 400,
// °
rotate: 0,
//°
tilt: 45,
}
});
window.map.openMapById('0000');
window.map.on('loadComplete', e => {
console.log('Map loadComplete!');
var pointMarker = new jsmap.JSPointMarker({
color: '#00FF00', //
size: 10, //
position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0), //
floorId: 2, //id,1
outlineColor: '#CD5C5C', //线
outlineWidth: 2, //线
depthTest: true, //
show: true, //
allowPicking: true, //
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //
callback: (node) => {
console.log(node);
}//
});
window.map.addMarker(pointMarker);
//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//
/*//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//
//window.map.weather = jsmap.JSWeather.SNOW;//DEFAULTRAINSNOWFOGRAIN_SNOW
//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//
/*var drawTool = new jsmap.JSDrawToolControl({
position: jsmap.JSControlPosition.RIGHT_TOP, //
offset: {
x: 20,
y: 180
}, //
drawMode: jsmap.JSDrawMode.POINT, //POINT: POLYLINE:线 POLYGON:
//
callback: (feature) => {
debugger;
console.log('add', feature);
console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
},
//
removeCallback: (feature) => {
console.log('remove', feature);
},
//
editCallback: (feature) => {
console.log('editCallback', feature);
},
//
locateCallback: (feature) => {
console.log('locate..', feature);
}
});
window.map.addControl(drawTool);*/
/*var drawTool1 = new jsmap.JSDrawToolControl({
position: jsmap.JSControlPosition.RIGHT_TOP, //
offset: {
x: 20,
y: 10
}, //
drawMode:jsmap.JSDrawMode.POLYLINE, //POINT: POLYLINE:线 POLYGON:
//线
callback: (feature) => {
console.log('add', feature);
},
//线线
removeCallback: (feature) => {
console.log('remove', feature);
},
//线线
editCallback: (feature) => {
console.log('editCallback', feature);
},
//线线
locateCallback: (feature) => {
console.log('locate..', feature);
}
});
window.map.addControl(drawTool1);*/
//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//*/
var drawTool2 = new jsmap.JSDrawToolControl({
position: jsmap.JSControlPosition.RIGHT_TOP, //
offset: {
@ -337,22 +315,44 @@
}
});
window.map.addControl(drawTool2);
this.boxMaskerLayer();
this.pointMaskerLayer();
this.boxMaskerLayers();
this.pointMaskerLayers();
this.cameraMaskerLayers();
this.polygonMarkerLayers();
this.materialsMaskerLayers();
/*let tool = new jsmap.JSMapCoordTool(window.map);
let coordinate = {x:114.6318495165543,y: 38.81301151091491};
let pixel = tool.mapToScreenCoordinate(coordinate);*/
});
window.map.on('mapClickNode', event => {
debugger;
// window.map.drawTool.activate(jsmap.JSDrawMode.POINT);
console.log(event);
this.params.json.data.channelId = this.channelId;
this.$API.am.video.item.req(this.params).then(res=>{
debugger;
console.log(res);
this.url = res.url;
if (flvjs.isSupported()) {
let videoElement = document.getElementById('videoElement');
let flvPlayer = flvjs.createPlayer({
type: 'flv',
url: res.url
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
})
});
// levellevellevel1-24
window.map.on('mapScaleLevelChanged', (last, current) => {
/*window.map.on('mapScaleLevelChanged', (last, current) => {
console.log(last + ',' + current);
});
});*/
},
methods: {
boxMaskerLayer(){
boxMaskerLayers() {//
this.boxMarkerLayer = new jsmap.JSBoxMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
@ -361,6 +361,43 @@
window.map.addLayer(this.boxMarkerLayer);
this.showBoxMarkers();
},
pointMaskerLayers() {//
this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: false
});
window.map.addLayer(this.pointMarkerLayer);
this.showPointMarkers();
},
cameraMaskerLayers() {//
this.cameraMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: false
});
window.map.addLayer(this.cameraMaskerLayer);
this.showCameraMarkers();
},
materialsMaskerLayers() {//
this.materialsMaskerLayer = new jsmap.JSIconTextMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: false
});
window.map.addLayer(this.materialsMaskerLayer);
this.showMaterialsMarkers();
},
polygonMarkerLayers() {//
this.polygonMaskerLayer = new jsmap.JSPolygonMarkerLayer({
minimumLevel: 3,
maxmumLevel: 22,
show: false
});
window.map.addLayer(this.polygonMaskerLayer);
this.showPolygonMarkers();
},
//
showBoxMarkers() {
var boxMarker = new jsmap.JSBoxMarker({
id: 'box',
@ -371,10 +408,10 @@
{x: 114.63073035356713, y: 38.81395745716681, z: 0},
],
floorId: 1,//id
color: 'rgba(31,15,221,0.44)',//
color: 'rgba(255,0,0,0.44)',//
height: 0,//
stretchHeight: 10,//
strokeColor: '#081210',//线
stretchHeight: 6,//
strokeColor: '#ff0000',//线
show: true, //
depthTest: Boolean,
allowPicking: false, //
@ -407,28 +444,16 @@
});
this.boxMarkerLayer.addMarker(boxMarker1);
},
pointMaskerLayer(){
this.pointMarkerLayer = new jsmap.JSPointMarkerLayer({
minimumLevel:3,
maxmumLevel:22,
show:false
});
window.map.addLayer(this.pointMarkerLayer);
this.showPointMarkers();
},
showPointMarkers() {
/*let tool = new jsmap.JSMapCoordTool(window.map);
let coordinate = {x:114.63128751408715,y:38.81306617819082};
let pixel = tool.mapToScreenCoordinate(coordinate);*/
let pointMarker = new jsmap.JSPointMarker({
id: 'point1',
color: '#00FF00', //
size: 10, //
position: new jsmap.JSPoint(114.63070237278036, 114.63070237278036, 0), //
floorId: 2, //id,1
position: new jsmap.JSPoint(114.6318495165543, 38.81301151091491, 3), //
floorId: 1, //id,1
outlineColor: '#CD5C5C', //线
outlineWidth: 2, //线
depthTest: true, //
// depthTest: true, //
show: true, //
allowPicking: true, //
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //
@ -439,6 +464,86 @@
});
this.pointMarkerLayer.addMarker(pointMarker);
},
//
showCameraMarkers() {
let iconTextMarker = new jsmap.JSIconTextMarker({
id: 'iconTextMarker',
position: {x: 114.63184951655, y: 38.81301151091491}, //
floorId: 1, //id,1
image: "/img/camera.svg",
text: '摄像头',
font: '10px sans-serif',
fontColor: '#fff645',
imageHeight: 16,
imageWidth: 16,
backgroundColor: 'rgba(0,0,0,0.3)',
backgroundRadius: 1,
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
backgroundStrokeWidth: 1,
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
allowPicking: true,
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
show: true,
callback: (marker) => {
debugger;
console.log(marker);
}
});
this.cameraMaskerLayer.addMarker(iconTextMarker);
},
//
showPolygonMarkers() {
let polygonMarker = new jsmap.JSPolygonMarker({
id: 'polygon',//id
position: [new jsmap.JSPoint(114.63168864138028, 38.81254802029822, 0),
new jsmap.JSPoint(114.63185023632963, 38.81241816295427, 0),
new jsmap.JSPoint(114.63160294240738, 38.812229296478634, 0),
new jsmap.JSPoint(114.63143965827588, 38.81235778393449, 0),
],//
floorId: 1,//id
color: 'rgba(0,0,255,.44)',//
strokeColor: '#2bff1d',//线
depthTest: false,//
// material: new jsmap.JSWaterMaterial(), //color
allowPicking: true, //
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //
properties: {
test: 'polygonTest'
},//
callback: (marker) => {
console.log(marker);
}//
});
this.polygonMaskerLayer.addMarker(polygonMarker);
},
//
showMaterialsMarkers() {
let materialMarker = new jsmap.JSIconTextMarker({
id: 'iconTextMarker',
position: {x: 114.6302317964304, y: 38.81315596674133}, //
floorId: 1, //id,1
image: "/img/camera.svg",
text: '消防物资',
font: '10px sans-serif',
fontColor: '#fff645',
imageHeight: 16,
imageWidth: 16,
// fontStrokeColor: '#1f0fdd',
fontStrokeWidth: 1,
backgroundColor: 'rgba(0,0,0,0.3)',
backgroundRadius: 1,
backgroundStrokeColor: 'rgba(0,0,0,0.3)',
backgroundStrokeWidth: 1,
iconTextType: jsmap.JSIconTextType.TOPTEXT_BOTTOMICON,
allowPicking: true,
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),
nearFarScale: new jsmap.JSNearFarScale(0.0, 1, 500, 2),
show: true
});
this.materialsMaskerLayer.addMarker(materialMarker);
},
userSelect() {
this.showUserSelect = !this.showUserSelect
},
@ -477,9 +582,13 @@
this.markList[index] = !this.markList[index];
if (index === 0) {
if (this.markList[0]) {
arr = this.markList.map(value => {return true})
arr = this.markList.map(value => {
return true
})
} else {
arr = this.markList.map(value => {return false})
arr = this.markList.map(value => {
return false
})
}
this.markList = arr;
} else {
@ -491,16 +600,32 @@
}
}
debugger;
if (this.markList[1]) {
window.map.showBuildingMarker = true;
} else {
window.map.showBuildingMarker = false;
}
if (this.markList[2]) {
this.cameraMaskerLayer.show = true;
} else {
this.cameraMaskerLayer.show = false;
}
if (this.markList[3]) {
this.materialsMaskerLayer.show = true;
} else {
this.materialsMaskerLayer.show = false;
}
if (this.markList[4]) {
this.polygonMaskerLayer.show = true;
} else {
this.polygonMaskerLayer.show = false;
}
if (this.markList[5]) {
this.boxMarkerLayer.show = true;
} else {
this.boxMarkerLayer.show = false;
}
if(this.markList[2]){
this.pointMarkerLayer.show=true;
}else{
this.pointMarkerLayer.show=false;
}
},
changeDropIndex(index) {
let that = this;
@ -509,6 +634,13 @@
that.showUserSelect = false;
}, 300)
},
//
cameraClose(){
},
cameraOpen(){
},
},
unmounted() {
window.map.destroy();
@ -864,10 +996,12 @@
transition: all .5s linear;
transform: rotate(180deg);
}
.action-shrink.shrink-hidden {
transform: rotate(0deg);
background: url(/public/img/shrink.png) no-repeat;
}
.roam-play {
background: url(/public/img/play.png) no-repeat;
background-size: 100% 100%;
@ -1072,11 +1206,13 @@
height: 16px;
margin-right: 6px;
cursor: pointer;
border: 1px solid #5bde0b;
border-radius: 3px;
}
.box-uncheck {
/*.box-uncheck {
background: url(/public/img/uncheck.png) no-repeat 100% 100%;
}
}*/
.box-text {
font-size: 14px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB