bigScreen

public/img/camera.svg

@@ -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>

src/views/bigScreen/index.vue

@@ -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('1')" class="drop-content-item"
-						<div @click="changeDropIndex('2')" class="drop-content-item" :class="{'active':dropIndex==='2'}">内部人员</div>
+							 :class="{'active':dropIndex==='1'}">全部
-						<div @click="changeDropIndex('3')" class="drop-content-item" :class="{'active':dropIndex==='3'}">承包商</div>
+						</div>
-						<div @click="changeDropIndex('4')" class="drop-content-item" :class="{'active':dropIndex==='4'}">访客</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,//点位图层
+				pointMarkerLayer: null,//点位图层
-				flyManager:null,
+				polygonMaskerLayer: null,//危险作业
-				dropIndex:'1',
+				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, //纹理亮度
+				showBuildingMarker: false,
-				scatteringIntensity: 1.0, //镜面强度
-				specularIntensity: 0, //散射强度
 				mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[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, //默认倾斜角设置，动态效果请参看地图演示平台
+				/*defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
-				defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
+				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({
+				/*//window.map.setSkyBox(jsmap.JSSkyBox.STARRY_SKY);//加载时的图
-					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.weather = jsmap.JSWeather.SNOW;//天气DEFAULT、RAIN、SNOW、FOG、RAIN_SNOW
-				//window.map.mapStyle = jsmap.JSMapStyle.DEFAULT;//地图风格
+				//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);*/
 				var drawTool2 = new jsmap.JSDrawToolControl({
 					position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
 					offset: {
@@ -337,31 +315,90 @@
 					}
 				});
 				window.map.addControl(drawTool2);
-				this.boxMaskerLayer();
+				this.boxMaskerLayers();
-				this.pointMaskerLayer();
+				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();
+					}
+				})
+
 			});
 			// 地图缩放级别变化事件，返回当前level和上一个level值，level范围为1-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,
+					minimumLevel: 3,
-					maxmumLevel:22,
+					maxmumLevel: 22,
-					show:false
+					show: false
 				});
 				window.map.addLayer(this.boxMarkerLayer);
 				this.showBoxMarkers();
 			},
-			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',
 					position: [
@@ -371,14 +408,14 @@
 						{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,//拉伸高度
+					stretchHeight: 6,//拉伸高度
-					strokeColor: '#081210',//边线颜色
+					strokeColor: '#ff0000',//边线颜色
 					show: true, //是否显示
-					depthTest:Boolean,
+					depthTest: Boolean,
 					allowPicking: false, //是否允许点击
-					displayCondition:  new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
 					callback: (marker) => {
 						console.log(marker);
 					}
@@ -398,37 +435,25 @@
 					stretchHeight: 20,//拉伸高度
 					strokeColor: '#87FF4F',//边线颜色
 					show: true, //是否显示
-					depthTest:Boolean,
+					depthTest: Boolean,
 					allowPicking: false, //是否允许点击
-					displayCondition:  new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
+					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
 					callback: (marker) => {
 						console.log(marker);
 					}
 				});
 				this.boxMarkerLayer.addMarker(boxMarker1);
 			},
-			pointMaskerLayer(){
+			showPointMarkers() {
-				 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',
+					id: 'point1',
 					color: '#00FF00',  //填充颜色
 					size: 10,  //尺寸
-					position: new jsmap.JSPoint(114.63070237278036, 114.63070237278036, 0),  //坐标
+					position: new jsmap.JSPoint(114.6318495165543, 38.81301151091491, 3),  //坐标
-					floorId: 2,  //楼层id,默认为1（地面）
+					floorId: 1,  //楼层id,默认为1（地面）
 					outlineColor: '#CD5C5C',  //边线颜色
 					outlineWidth: 2,  //边线宽
-					depthTest: true,  //是否开启深度检测
+					// depthTest: true,  //是否开启深度检测
 					show: true,  //是否显示
 					allowPicking: true,  //是否允许点击
 					displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
@@ -439,21 +464,101 @@
 				});
 				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
 			},
 			autoRunChange() {
 				this.autoRun = !this.autoRun;
-				if(this.autoRun){
+				if (this.autoRun) {
 					this.mapRun();
-				}else{
+				} else {
 					this.mapPause();
 				}
 			},
-			mapRun(){
+			mapRun() {
-				if(this.flyManager!==null){
+				if (this.flyManager !== null) {
 					this.flyManager.restartFly();
-				}else{
+				} else {
 					//地图旋转展示
 					this.flyManager = new jsmap.JSFlyManager(window.map);
 					this.flyManager.flyByCircle({
@@ -465,7 +570,7 @@
 				}
 
 			},
-			mapPause(){
+			mapPause() {
 				// this.flyManager.destroy();
 				this.flyManager.pauseFly();
 			},
@@ -477,37 +582,64 @@
 				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 {
-					let list = this.markList.slice(1,8);
+					let list = this.markList.slice(1, 8);
-					if(list.indexOf(true)>-1&&list.indexOf(false)<0){
+					if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
-						this.markList[0]=true;
+						this.markList[0] = true;
-					}else {
+					} else {
-						this.markList[0]=false;
+						this.markList[0] = false;
 					}
 				}
 				debugger;
-				if(this.markList[5]){
+
-					this.boxMarkerLayer.show=true;
+				if (this.markList[1]) {
-				}else{
+					window.map.showBuildingMarker = true;
-					this.boxMarkerLayer.show=false;
+				} else {
+					window.map.showBuildingMarker = false;
 				}
-				if(this.markList[2]){
+				if (this.markList[2]) {
-					this.pointMarkerLayer.show=true;
+					this.cameraMaskerLayer.show = true;
-				}else{
+				} else {
-					this.pointMarkerLayer.show=false;
+					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;
 				}
 			},
-			changeDropIndex(index){
+			changeDropIndex(index) {
 				let that = this;
 				that.dropIndex = index;
 				setTimeout(function () {
 					that.showUserSelect = false;
-				},300)
+				}, 300)
+			},
+			//点击摄像头
+			cameraClose(){
+
+			},
+			cameraOpen(){
+
 			},
 		},
 		unmounted() {
@@ -864,10 +996,12 @@
 						transition: all .5s linear;
 						transform: rotate(180deg);
 					}
-					.action-shrink.shrink-hidden{
+
+					.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;