bigScreen
This commit is contained in:
parent
20546f91cb
commit
fd86f4d520
|
|
@ -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 |
Binary file not shown.
|
After Width: | Height: | Size: 173 B |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -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,//盒子图层
|
||||
pointMarkerLayer:null,//点位图层
|
||||
flyManager:null,
|
||||
dropIndex:'1',
|
||||
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],//比例尺级别范围， 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, //默认倾斜角设置，动态效果请参看地图演示平台
|
||||
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;//天气DEFAULT、RAIN、SNOW、FOG、RAIN_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,31 +315,90 @@
|
|||
}
|
||||
});
|
||||
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();
|
||||
}
|
||||
})
|
||||
|
||||
});
|
||||
// 地图缩放级别变化事件，返回当前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,
|
||||
maxmumLevel:22,
|
||||
show:false
|
||||
minimumLevel: 3,
|
||||
maxmumLevel: 22,
|
||||
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,12 +408,12 @@
|
|||
{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,
|
||||
depthTest: Boolean,
|
||||
allowPicking: false, //是否允许点击
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||
callback: (marker) => {
|
||||
|
|
@ -398,7 +435,7 @@
|
|||
stretchHeight: 20,//拉伸高度
|
||||
strokeColor: '#87FF4F',//边线颜色
|
||||
show: true, //是否显示
|
||||
depthTest:Boolean,
|
||||
depthTest: Boolean,
|
||||
allowPicking: false, //是否允许点击
|
||||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),//可见范围
|
||||
callback: (marker) => {
|
||||
|
|
@ -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);*/
|
||||
showPointMarkers() {
|
||||
let pointMarker = new jsmap.JSPointMarker({
|
||||
id:'point1',
|
||||
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,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(){
|
||||
if(this.flyManager!==null){
|
||||
mapRun() {
|
||||
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);
|
||||
if(list.indexOf(true)>-1&&list.indexOf(false)<0){
|
||||
this.markList[0]=true;
|
||||
}else {
|
||||
this.markList[0]=false;
|
||||
let list = this.markList.slice(1, 8);
|
||||
if (list.indexOf(true) > -1 && list.indexOf(false) < 0) {
|
||||
this.markList[0] = true;
|
||||
} else {
|
||||
this.markList[0] = false;
|
||||
}
|
||||
}
|
||||
debugger;
|
||||
if(this.markList[5]){
|
||||
this.boxMarkerLayer.show=true;
|
||||
}else{
|
||||
this.boxMarkerLayer.show=false;
|
||||
|
||||
if (this.markList[1]) {
|
||||
window.map.showBuildingMarker = true;
|
||||
} else {
|
||||
window.map.showBuildingMarker = false;
|
||||
}
|
||||
if(this.markList[2]){
|
||||
this.pointMarkerLayer.show=true;
|
||||
}else{
|
||||
this.pointMarkerLayer.show=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;
|
||||
}
|
||||
},
|
||||
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;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in New Issue