<template>
<div id="supermap3D" style="height: 100%">
<div id="cesiumContainer" style="height: 100%"></div>
<!--漫游工具条-->
<!-- <div class="bottomTools">
<el-row type="flex" justify="center">
<div class="iconDiv">
<i class="el-icon-s-home iconDivs" @click="homeClick()" theme="filled" title="主界面" />
<i class="el-icon-back iconDivs" @click="preStaMY()" theme="filled" title="上一站" />
<i class="el-icon-right iconDivs" @click="nextStaMY()" theme="filled" title="下一站" />
<i class="el-icon-s-promotion iconDivs" @click="beginMY()" theme="filled" title="开始" />
<<i :class="playstopIcon" @click="holdMY()" theme="filled" :title="playstopTitle" />
<i class="el-icon-switch-button iconDivs" @click="endMY()" theme="filled" title="停止" />
<i class="el-icon-full-screen iconDivs" @click="fullClick" title="全屏" />
</div>
</el-row>
</div> -->
<div class="tools-content" v-show="manyouContrl">
<div class="top-content1">
<img
src="./../../../public/static/img/shouye.png"
alt=""
title="首页"
@click="homeClick()"
/>
<img
src="./../../../public/static/img/manyou.png"
alt=""
title="漫游"
@click="beginMY()"
/>
<img
src="./../../../public/static/img/zanting.png"
v-if="AnimateState"
alt=""
title="暂停"
@click="holdMY()"
/>
<img
src="./../../../public/static/img/jixu.png"
v-if="!AnimateState"
alt=""
title="继续"
@click="holdMY()"
/>
<img
src="./../../../public/static/img/jieshu.png"
alt=""
title="结束"
@click="endMY()"
/>
<img
src="./../../../public/static/img/quanping.png"
alt=""
title="全屏"
@click="fullClick()"
/>
</div>
</div>
<!--泵站属性框-->
<template v-if="MonitorStationBZ.length">
<div
class="panelstyleqita"
v-show="bgMarkStationBZ"
v-for="(item, index) in MonitorStationBZ"
:key="'bengzmosnorStskds' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称:</div>
<div class="r">{{ item.id }}</div>
</div>
</div>
</div>
</template>
<!--泵站属性框-->
<template v-if="MonitorStationBZ.length">
<div
class="panelstyleqita"
v-show="bgMarkStationBZ"
v-for="(item, index) in MonitorStationBZ"
:key="'bengmonisrStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
</div>
</div>
</template>
<!--问题二属性框-->
<!-- <template v-if="MonitorStationZZ.length">
<div
class="panelstyleqita"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationZZ"
:key="'zhazhansmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称:</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">描述:</div>
<div class="r">{{ item.ms }}</div>
</div>
</div>
</div>
</template> -->
<template v-if="MonitorStationZZ.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationZZ"
:key="'zhazhansmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">
<span class="RenYuanTitle">人员信息</span> x
</div>
<div class="content">
<div class="TongHuaLeft">
<div class="item">
<div class="l">人员姓名 :</div>
<div class="r">{{ peoplename }}</div>
</div>
<div class="item">
<div class="l">所属河道 :</div>
<div class="r">{{ suoshuhedao }}</div>
</div>
<div class="item">
<div class="l">问题描述 :</div>
<div class="r">{{ wentimiaoshu }}</div>
</div>
<div class="item">
<div class="l">问题分类 :</div>
<div class="r">{{ wentifenlei }}</div>
</div>
<div class="item">
<div class="l">任务进度 :</div>
<div class="r">{{ renwujinzhan }}</div>
</div>
<div class="item">
<div class="l">事件时间 :</div>
<div class="r">2021-12-24</div>
</div>
</div>
<div class="TongHuaRight">
<el-carousel height="220px">
<el-carousel-item v-for="(item, index) in imgData" :key="index">
<img :src="item.img" class="RenYuanImg" alt="" />
</el-carousel-item>
</el-carousel>
</div>
<div class="call" @click="callPerson">点击通话</div>
</div>
</div>
</template>
<!--人员属性框-->
<template v-if="MonitorStationRY.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationRY"
:key="'renyuanmdstoration' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">
<span class="RenYuanTitle">人员信息</span> x
</div>
<div class="content">
<div class="TongHuaLeft">
<div class="item">
<div class="l">人员姓名 :</div>
<div class="r">{{ peoplename }}</div>
</div>
<div class="item">
<div class="l">所属河道 :</div>
<div class="r">{{ suoshuhedao }}</div>
</div>
<div class="item">
<div class="l">问题描述 :</div>
<div class="r">{{ wentimiaoshu }}</div>
</div>
<div class="item">
<div class="l">问题分类 :</div>
<div class="r">{{ wentifenlei }}</div>
</div>
<div class="item">
<div class="l">任务进度 :</div>
<div class="r">{{ renwujinzhan }}</div>
</div>
<div class="item">
<div class="l">事件时间 :</div>
<div class="r">2021-12-24</div>
</div>
</div>
<div class="TongHuaRight">
<el-carousel height="220px">
<el-carousel-item v-for="(item, index) in imgData" :key="index">
<img :src="item.img" class="RenYuanImg" alt="" />
</el-carousel-item>
</el-carousel>
</div>
<div class="call" @click="callPerson">点击通话</div>
</div>
</div>
</template>
<!--站点属性框-->
<template v-if="MonitorStation.length">
<div
class="panelstyleqita"
v-show="bgMarkStation"
v-for="(item, index) in MonitorStation"
:key="'stationmsdtorStaon' + index"
:id="item.stCode"
>
<div class="page-panel mapPanel">
<a-icon type="close" class="close-icon" @click="clearPopup($event)" />
<div class="panel-head">
<div class="title">{{ siteInfo.siteName }}</div>
</div>
<div class="panel-body">
<a-carousel class="mapPanel-carousel" :dots="false">
<div class="panel-list-box" v-if="siteInfo.realTimeData.length">
<div
class="panel-list-item"
v-for="item in siteInfo.realTimeData"
:key="item.field"
>
<div class="label">{{ item.title }}</div>
<div class="value">{{ item.value }}</div>
</div>
</div>
</a-carousel>
</div>
</div>
</div>
</template>
<!--视频属性框-->
<!-- <template v-if="MonitorStationSPD.length">
<div
class="panelstylesp"
v-show="bgMarkStationSPD"
v-for="(item, index) in MonitorStationSPD"
:key="'spdmonitorStation' + index"
:id="item.id"
>
<div
class="close"
style="position: absolute; right: 10px; z-index: 99"
@click="clearPopup($event)"
>
x
</div>
<div class="content" v-if="bgMarkStationSPDXinsheng">
<VideoPlayer
src="https://139.155.49.237:8086/video/hls/xinsheng_road.m3u8"
style="width: 400px"
type="application/x-mpegURL"
/>
</div>
</div>
</template> -->
<!--闸站属性框-->
<!-- <template v-if="MonitorStationZZ.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationZZ"
:key="'zhazhanmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">总过流量 :</div>
<div class="r">{{ item.zgll }}</div>
</div>
<div class="item">
<div class="l">闸上水位:</div>
<div class="r">{{ item.zssw }}</div>
</div>
<div class="item">
<div class="l">闸下水位:</div>
<div class="r">{{ item.zxsw }}</div>
</div>
<div class="item">
<div class="l">闸站状态:</div>
<div class="r">{{ item.zzzt }}</div>
</div>
<div class="item">
<div class="l">开闸孔数:</div>
<div class="r">{{ item.kzks }}</div>
</div>
<div class="cnt-list">
<div
class="item00"
v-for="(_item, _index) in item.list"
:key="_index"
>
<img
v-if="!_item.status"
src="./../../assets/images/img_11.png"
alt=""
/>
<img v-else src="./../../assets/images/img_12.png" alt="" />
<div class="name">{{ _item.name }}闸孔</div>
</div>
</div>
</div>
</div>
</template> -->
<!--存放点属性框-->
<!-- <template v-if="MonitorStationCFD.length">
<div
class="panelstyle"
v-show="bgMarkStationCFD"
v-for="(item, index) in MonitorStationCFD"
:key="'cfdmonitorStation' + index"
:id="item.id"
>
<div class="close" @click="clearPopup($event)">x</div>
<div class="content">
<div class="item">
<div class="l">存放点名称 :</div>
<div class="r">{{ item.id }}</div>
</div>
<div class="item">
<div class="l">存放地址 :</div>
<div class="r">{{ item.address }}</div>
</div>
<div class="item">
<div class="l">描述 :</div>
<div class="r">{{ item.miaoshu }}</div>
</div>
<div class="item">
<div class="l">经度 :</div>
<div class="r">{{ item.lon }}</div>
</div>
<div class="item">
<div class="l">纬度 :</div>
<div class="r">{{ item.lat }}</div>
</div>
<div class="item">
<div class="l">物资清单 :</div>
<div class="r">{{ item.wzqd }}</div>
</div>
</div>
</div>
</template> -->
<!-- 倾斜摄影透明度 -->
<!-- <div id="toolbar" class="param-container tool-bar">
<div id="qxsyopacity" style="width: 227px;right: 30px;margin-top: -272px;margin-left: 1700px;z-index: 999999999999;position: relative;">
<label style="color:#FFFFFF ">图层透明:</label>
<input type="range" style="width: 65%" min="0" max="1" step="0.02" title="调整地上图层透明度"
data-bind="value: overGroundAlpha, valueUpdate: 'input'">
</div>
</div> -->
<!-- 右侧菜单 -->
<!-- <div class="right-menu">
<div
class="item"
v-for="(item, index) in menuList"
:key="index"
:class="{ active: menuActive === index }"
@click="changeTuceng(index)"
>
{{ item }}
</div>
</div>
-->
<!--无人机视频 通顺河沿堤.mp4-->
<!-- src="https://47.97.35.33:6089/video/2021/2021052102.mp4" -->
<!-- src="/static/通顺河沿堤.mp4"-->
<!-- <div class="videoPop" v-show="videoPanelShow">
<div class="video">
<video
controls="controls"
src="https://47.97.35.33:6089/video/2021/2021052102.mp4"
id="videoEvent"
></video>
</div>
<div class="fs"></div>
<div class="close"></div>
<div
class="resizer"
style="
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
z-index: 9999;
right: 0px;
cursor: sw-resize;
"
></div>
<div
class="resizer"
style="
width: 10px;
height: 10px;
position: absolute;
bottom: 0px;
z-index: 9999;
right: 0px;
cursor: se-resize;
"
></div>
</div> -->
</div>
</template>
<script>
let handler = null;
export default {
name: "supermap3D",
data() {
return {
imgData: [
{
img: require("./../../../static/img/1.png"),
},
{
img: require("./../../../static/img/2.png"),
},
],
currentMark: "",
peoplename: "石付军",
suoshuhedao: "浉河",
wentimiaoshu: "浉河虹桥附近",
wentifenlei: "河道垃圾清理",
renwujinzhan: "待审核",
shijianshijian: "2021-10-27",
//原经开三维飞行相关参数
manyouContrl: true,
isFullscreen: false,
videoPanelShow: false, //播放视频面板显隐
isEndRoam: false,
AnimateState: false, //当前漫游状态
video: null, //播放视频标签
videoPanelShow: false, //播放视频面板显隐
dataliststation: [],
ispanelCFBZ: false,
ispanelWT1: false,
ispanelCFZZ: false,
ispanelWZD: false,
ispanelSPD: false,
ispanelLNHBZ: false,
bgMarkStationRY: false, //人员
MonitorStationRY: [],
bgMarkStationCFD: false, //存放点
MonitorStationCFD: [],
MonitorStationBZ: [],
bgMarkStationBZ: false, //泵站
MonitorStationZZ: [],
bgMarkStationZZ: false, //闸站
MonitorStationSPD: [],
bgMarkStationSPD: false, //视频点
bgMarkStationSPDXinsheng: false, //视频点视频流
playerOptions: {
//摄像头
muted: false,
overNative: true,
autoplay: true,
controls: true,
techOrder: ["html5"],
sourceOrder: true,
width: "800px",
language: "zh",
html5: { hls: { withCredentials: false } },
sources: [
{
withCredentials: false,
type: "application/x-mpegURL",
src: "http://47.97.35.33:8301/proxy/hls/xinsheng_road.m3u8",
},
],
poster: "",
},
//自有参数
layerchecklist: [
"雨水管",
"污水管",
"合流管",
"雨水井",
"污水井",
"合流井",
],
menuList: [
"在线监测",
"视频监控",
"沿岸巡检",
"淹水模拟",
"管道开挖",
"清除",
],
menuActive: 0,
previousHeight: null,
smidarrayysg: [],
smidarraywsg: [],
smidarrayysj: [],
smidarraywsj: [],
newid: "",
Layer: "",
Elevation: "",
showArrow: false, //是否显示左右切换箭头
showArrow1: false, //是否显示左右切换箭头
//基础数据
basicData: null,
MonitorStation: [],
bgMarkStation: false,
pipeBjArray: {},
//管线相关
lineInfo: {
refresh: 1,
basicData: null,
siteName: "",
realTimeData: [],
showArrow: false, //是否显示左右切换箭头
},
//站点相关
siteInfo: {
siteName: "",
realTimeData: [],
},
};
},
watch: {
"lineInfo.refresh"() {
if (this.lineInfo.realTimeData.length) {
this.lineInfo.showArrow = true;
} else {
this.lineInfo.showArrow = false;
}
},
},
mounted: function () {
//加载天地图
// let imgTDT = new Cesium.WebMapTileServiceImageryProvider({
// url: "http://t0.tianditu.com/img_w/wmts?service=wmts&tk=5095c97223409ac114493d71ecb9cd87&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
// layer: "img",
// style: "default",
// format: "tiles",
// tileMatrixSetID: "w",
// credit: new Cesium.Credit("天地图全球影像服务"),
// subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// maximumLevel: 18,
// show: false,
// });
//初始化viewer部件
var viewer = new Cesium.Viewer("cesiumContainer", {
// imageryProvider: imgTDT,
navigation: false,
animation: false, // 隐藏动画控件
baseLayerPicker: false, // 隐藏图层选择控件
fullscreenButton: false, // 隐藏全屏按钮
vrButton: false, // 隐藏VR按钮，默认false
geocoder: false, // 隐藏地名查找控件
homeButton: false, // 隐藏Home按钮
navigationHelpButton: false, // 隐藏帮助按钮
infoBox: false, //是否显示信息框
fullscreenButton: false, //是否显示全屏按钮
animation: false, //是否创建动画小器件，左下角仪表
timeline: false, //是否显示时间轴
selectionIndicator: false, //关闭点击绿色框
scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
});
//隐藏logo
viewer.scene._creditContainer.style.display = "none";
var globe = viewer.scene.globe;
globe.globeAlpha = 0.5;
var scene = viewer.scene;
scene.skyAtmosphere.show = false;
scene.skyBox.show = false;
viewer.scene.undergroundMode = true; //设置开启地下场景
viewer.scene.screenSpaceCameraController.minimumZoomDistance = -1000; //设置相机最小缩放距离,距离地表-1000米
viewer.scene.terrainProvider.isCreateSkirt = false;
//监听滑动条变化，改变alpha的值，设置地表透明度
var viewModel = {
globeAlpha: 0.5,
};
Cesium.knockout.track(viewModel);
//关闭深度检测
viewer.scene.globe.depthTestAgainstTerrain = false;
window.earth = viewer;
//加载人员轨迹接口
// type：(1 河道 /2 管网 /"" 所有 )
var params = { data: { type: "" } };
this.$http.post(this.nozzle.recordSelectAllPoints, params).then((res) => {
if (res.data.code == 200) {
this.MonitorStationRY = [];
var celllist = res.data.data;
for (var i = 0; i < celllist.length; i++) {
var cell = celllist[i].point;
var cellthis = {
id: "张武",
type: "人员",
stCode: "037606866240467",
lon: 114.083925956929,
lat: 32.0963300318205,
};
cellthis.id = celllist[i].userName;
cellthis.stCode = celllist[i].userName;
cellthis.lon = cell[cell.length - 1].P;
cellthis.lat = cell[cell.length - 1].O;
//人员
this.MonitorStationRY.push(cellthis);
}
console.log("this.MonitorStationRY", this.MonitorStationRY);
//根据轨迹数据进行刷新路线
this.addPointPeople(this.MonitorStationRY);
}
});
// window.provider_imgLayer = new Cesium.TileMapServiceImageryProvider({
// // url:'/imgUrl/矩形区域(2)/tiles',
// // url:'/imgUrl/tdtTMS/xinyangimg1/tiles',
// url: '/imgUrl/xinyangimg',
// fileExtension: 'png',
// })
// window.imglayer = window.earth.imageryLayers.addImageryProvider(window.provider_imgLayer)
//高德影像
window.provider_imgLayer = new Cesium.TileMapServiceImageryProvider({
url: '/imgUrl/xinyangimg',
//url: "http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
//url:"https://192.168.100.18:10001/webstUrl/appmaptile?style=6&x={x}&y={y}&z={z}",
fileExtension: "png",
});
window.imglayer = window.earth.imageryLayers.addImageryProvider(
window.provider_imgLayer
);
//调节亮度
window.imglayer.brightness = 2.0;
/* window.arcgislayer.contrast = 1.5;
window.arcgislayer.saturation = 1.0; */
// video控件是原生获取的dom
/* this.video = document.getElementById("videoEvent");
this.videoPlayPause(); */
//设置隐形飞机及路线
this.TravelCave(); //设置隐形飞机漫游指定路径
//加载图标
this.addMarks();
//展示属性
var infoboxContainer = document.getElementById("bubble");
viewer.customInfobox = infoboxContainer;
//加载超图SM3格式三维模型的osgb
var scene = viewer.scene;
//加载倾斜摄影
this.addOSGBtileset();
//鼠标点击事件
this.mouseMapClick();
},
beforeDestroy() {
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN); //移除事件
}
handler = undefined;
},
methods: {
//点击tree闪烁并弹出属性
showAndHightPoint(data) {
console.log("点击了人员：", data);
//this.currentMark="系统管理员"
this.peoplename = data.userName;
//var keyid = "系统管理员";
var keyid = data.userName;
var lon = 114.0805319404991;
var lat = 32.10399069614823;
for (var k = 0; k < this.MonitorStationRY.length; k++) {
if (this.MonitorStationRY[k].id == keyid) {
lon = this.MonitorStationRY[k].lon;
lat = this.MonitorStationRY[k].lat;
console.log(111111111111, lon);
console.log(2222222222222, lat);
break;
}
}
document.getElementById(keyid).style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
parseFloat(lon),
parseFloat(lat),
0
);
this.fixDomPosition(keyid, position);
});
// document.getElementById(keyid).style.display = "block";
// window.earth.scene.preRender.addEventListener(() => {
// var position = new Cesium.Cartographic(lon, lat, 0);
// console.log("lon",lon)
// console.log("lat",lat)
// console.log("keyid",keyid)
// this.fixDomPosition(keyid, position);
// });
},
clearPopup(event) {
var clickDom = event.currentTarget;
var willshow = clickDom.parentNode;
willshow.style.display = "none";
this.bgMarkStation = false;
this.siteInfo.realTimeData = [];
},
createTooltip(frameDiv) {
var tooltip = function (frameDiv) {
var div = document.createElement("DIV");
div.className = "twipsy right";
var arrow = document.createElement("DIV");
arrow.className = "twipsy-arrow";
div.appendChild(arrow);
var title = document.createElement("DIV");
title.className = "twipsy-inner";
div.appendChild(title);
this._div = div;
this._title = title;
this.message = "";
// add to frame div and display coordinates
frameDiv.appendChild(div);
var that = this;
div.onmousemove = function (evt) {
that.showAt({ x: evt.clientX, y: evt.clientY }, that.message);
};
};
tooltip.prototype.setVisible = function (visible) {
this._div.style.display = visible ? "block" : "none";
};
tooltip.prototype.showAt = function (position, message) {
if (position && message) {
this.setVisible(true);
this._title.innerHTML = message;
this._div.style.left = position.x + 10 + "px";
this._div.style.top = position.y - this._div.clientHeight / 2 + "px";
this.message = message;
}
};
return new tooltip(frameDiv);
},
//绘制开挖区域
excavation(overGroundLayer) {
var viewer = window.earth;
var handlerPolygon = new Cesium.DrawHandler(
viewer,
Cesium.DrawMode.Polygon
);
handlerPolygon.activeEvt.addEventListener((isActive) => {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = "";
$("body").removeClass("drawCur").addClass("drawCur");
} else {
viewer.enableCursorStyle = true;
$("body").removeClass("drawCur");
}
});
//handlerPolygon.movingEvt.addEventListener(function (windowPosition) { });
var tooltip = this.createTooltip(viewer._element);
handlerPolygon.movingEvt.addEventListener((windowPosition) => {
if (windowPosition.x < 200 && windowPosition.y < 150) {
tooltip.setVisible(false);
return;
}
if (handlerPolygon.isDrawing) {
tooltip.showAt(windowPosition, "<p>右键单击结束绘制,进行开挖</p>");
} else {
tooltip.showAt(windowPosition, "<p>点击绘制开挖区域第一个点</p>");
}
});
handlerPolygon.drawEvt.addEventListener((result) => {
tooltip.setVisible(false);
handlerPolygon.polygon.show = false;
handlerPolygon.polyline.show = false;
var polygon = result.object;
var positions = polygon.positions;
var flatPoints = [];
for (var i = 0, j = positions.length; i < j; i++) {
//获取经纬度和高度
var position = positions[i];
var cartographic = Cesium.Cartographic.fromCartesian(position);
var lon = Cesium.Math.toDegrees(cartographic.longitude);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
flatPoints.push(lon);
flatPoints.push(lat);
flatPoints.push(height);
}
overGroundLayer.addExcavationRegion({
//设置倾斜开挖参数
position: flatPoints,
name: "excavation_" + Math.random(),
});
handlerPolygon.deactivate();
});
handlerPolygon.activate();
},
//点击“开始”按钮，则开始淹没分析
beginFlood(layer) {
this.clearFlood();
console.log("beginFlodd");
/* currentHeight = 0;
int = this.setInterval("flood()", 100);
maxValue = parseInt(document.getElementById("maxHeight").value);
minValue = parseInt(document.getElementById("minHeight").value); */
this.currentHeight = 0;
this.maxValue = 65;
this.floodInterval = setInterval(() => {
this.flood(layer);
}, 100);
},
clearFlood() {
console.log("clearFlood");
if (this.floodInterval) {
clearInterval(this.floodInterval);
this.floodInterval = null;
}
},
clearFloodByBtn(layer) {
if (this.floodInterval) {
clearInterval(this.floodInterval);
}
var hyp = new Cesium.HypsometricSetting();
hyp.MaxVisibleValue = -1000;
layer.hypsometricSetting = {
hypsometricSetting: hyp,
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
};
},
flood(layer) {
console.log("flooding");
if (this.currentHeight > this.maxValue) {
this.clearFlood();
return;
}
/* var layer = window.earth.scene.layers.find("Config"); */
var hyp = new Cesium.HypsometricSetting();
//创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
var colorTable = new Cesium.ColorTable();
hyp.MaxVisibleValue = this.currentHeight;
hyp.MinVisibleValue = 0;
// var value = $("#colorTable").find("option:selected")[0].value;
//setColorTable(colorTable, 1);
colorTable.insert(71, new Cesium.Color(0, 39 / 255, 148 / 255));
colorTable.insert(0, new Cesium.Color(149 / 255, 232 / 255, 249 / 255));
hyp.ColorTable = colorTable;
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
hyp.Opacity = 0.5;
hyp.LineInterval = 10.0;
//设置图层分层设色属性
layer.hypsometricSetting = {
hypsometricSetting: hyp,
analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
};
this.currentHeight += 0.1;
console.log(this.currentHeight);
},
changeTuceng(index) {
//this.removeAllpopup()
this.menuActive = index;
console.log(index);
//在线监测
if (index == 0) {
this.manyouContrl = false;
this.endMY();
this.removeEntityByType("视频点");
this.addEntityByType("泵站");
this.addEntityByType("闸站");
}
//视频监控
else if (index == 1) {
this.manyouContrl = false;
this.endMY();
this.removeEntityByType("泵站");
this.removeEntityByType("闸站");
this.addEntityByType("视频点");
}
//沿岸巡检
else if (index == 2) {
this.addEntityByType("泵站");
this.addEntityByType("闸站");
this.addEntityByType("视频点");
this.manyouContrl = true;
this.homeClick();
}
//淹水模拟
else if (index == 3) {
//开始淹没分析
console.log(this.osgblayer);
this.beginFlood(this.osgblayer);
}
//管道开挖
else if (index == 4) {
this.excavation(this.osgblayer);
}
//清除所有
else if (index == 5) {
this.clearFloodByBtn(this.osgblayer);
//移除开挖的坑
this.osgblayer.removeAllExcavationRegion();
}
},
refreshLayerlist(newlayerlist) {
this.layerchecklist = newlayerlist;
console.log(this.layerchecklist);
},
//装载河流管流向
loadhsarrow() {
var features = hsgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(3);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "heliuarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.YELLOW
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "heliuarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
// color: new Cesium.Color(218,165,32, 1),
color: Cesium.Color.YELLOW,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//装载雨水路线
loadysarrow() {
var features = ysgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(3);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "yushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.BLUE
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "yushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
/* color: new Cesium.Color(25,25,112, 1), */
color: Cesium.Color.BLUE,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//装载污水路线
loadwsarrow() {
var features = wsgxJson.features;
// window.primitivexiaqufenqu = [];
console.log(features);
for (var m = 0; m < features.length; m++) {
var bianjieDataShiHe = features[m].geometry.coordinates;
var cell;
var result = [];
var resultH = [];
for (var i = 0; i < bianjieDataShiHe.length; i++) {
cell = bianjieDataShiHe[i];
result.push(cell[0]);
result.push(cell[1]);
result.push(1.7);
resultH.push(cell[0]);
resultH.push(cell[1]);
resultH.push(4);
}
console.log(result);
window.earth.entities.add({
type: "wushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(result),
width: 7,
followSurface: false,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.RED
),
show: true,
},
});
window.earth.entities.add({
// 尾迹线
type: "wushuiarrow",
show: true,
clampToS3M: true,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(resultH),
width: 4, // 线的宽度，像素为单位
material: new Cesium.PolylineTrailMaterialProperty({
// 尾迹线材质
/* color: new Cesium.Color(139,0,0, 1), */
color: Cesium.Color.RED,
trailLength: 0.1,
outlineWidth: 0.5,
period: 5.0,
}),
},
});
}
},
//获取站点/报警管线数据实时数据
async getSiteSiteManBySerial(stCode, type, info) {
let _data = {
stCode: stCode,
};
let arr = [];
let result = await this.$api.getSiteSiteManBySerial(_data);
if (result && result.st) {
let res = await this.$api.getSiteHead({ siteNo: stCode });
if (res.code == 200) {
arr = res.data;
arr.forEach((item) => {
for (let key in result) {
if (item.field === key) {
this.$set(item, "value", result[key]);
}
}
});
if (type === "line") {
this.lineInfo.refresh = Math.random();
this.lineInfo.realTimeData = arr;
} else {
this.siteInfo.realTimeData = arr;
}
}
} else {
/* this.$emit("realTimeData", [], type, siteName, true); */
}
if (type === "line")
document.getElementById("bubble").style.display = "block";
else if (type === "site") info.style.display = "block";
},
//根据sql查询--全量污水井赋值红色
async doSqlQueryWSJRed(sqlStr) {
console.log(sqlStr);
var sqlParameter = {
datasetNames: ["jkqline3D6:污水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
if (res && res.features) {
var smidarray = [];
for (var i = 0; i < res.features.length; i++) {
smidarray.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer3 = window.earth.scene.layers.find("污水井84@jkqline3D6");
console.log(layer3);
console.log(smidarray);
//根据图层和smid赋值
layer3.selectColorType = 1.0;
layer3.setObjsColor(smidarray, Cesium.Color.RED);
}
},
//根据sql查询--全量污水井赋值蓝色
async doSqlQueryYSJBlue(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:雨水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res.features) {
console.log(res);
var smidarray = [];
for (var i = 0; i < res.features.length; i++) {
smidarray.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer2 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(smidarray, Cesium.Color.BLUE);
}
},
//根据sql查询
async doSqlQueryWSJ(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:污水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res.features) {
console.log(res);
this.smidarraywsj = [];
for (var i = 0; i < res.features.length; i++) {
this.smidarraywsj.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer3 = window.earth.scene.layers.find("污水井84@jkqline3D6");
//根据图层和smid赋值
layer3.selectColorType = 1.0;
layer3.setObjsColor(this.smidarraywsj, Cesium.Color.YELLOW);
}
},
//根据sql查询
async doSqlQueryYSJ(sqlStr) {
var sqlParameter = {
datasetNames: ["jkqline3D6:雨水井84"],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
let res = await this.$api.featureResults(sqlParameter);
if (res && res.features) {
this.smidarrayysj = [];
for (var i = 0; i < res.features.length; i++) {
this.smidarrayysj.push(res.features[i].ID);
}
//根据图层和smid赋值
var layer2 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(this.smidarrayysj, Cesium.Color.YELLOW);
}
},
// 鼠标点击图层事件
mouseMapClick() {
const canvas = window.earth.scene.canvas;
let startMousePosition;
let mousePosition;
const _that = this;
handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction((movement) => {
const earthPosition = window.earth.camera.pickEllipsoid(
movement.position,
window.earth.scene.globe.ellipsoid
);
if (Cesium.defined(earthPosition)) {
// console.log(window.earth.entities.getById('SH1'));
const pickedFeature = window.earth.scene.pick(movement.position);
/* const cartesian = window.earth.camera.pickEllipsoid(movement.position, window.earth.scene.globe.ellipsoid); // Cartesian3对象
var ellipsoid = window.earth.scene.globe.ellipsoid;
*/
var cartographic = Cesium.Cartographic.fromCartesian(
earthPosition,
window.earth.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var height = window.earth.camera.positionCartographic.height;
if (pickedFeature == undefined) return;
if (pickedFeature) {
console.log(pickedFeature);
//预处理站点位
if (
pickedFeature.id &&
pickedFeature.id._id &&
pickedFeature.id.type
) {
let _data = {
id: pickedFeature.id._id,
type: pickedFeature.id.type,
};
//_that.$store.dispatch("siteInfo/set", _data);
if (
pickedFeature.id.type == "水质仪" ||
pickedFeature.id.type == "问题点" ||
pickedFeature.id.type == "人员"
) {
//测试点击对应dom让其展示并跟着地球转动
var cartographic = Cesium.Cartographic.fromCartesian(
earthPosition,
window.earth.scene.globe.ellipsoid,
new Cesium.Cartographic()
);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var height = window.earth.camera.positionCartographic.height;
if (pickedFeature == undefined) return;
if (pickedFeature) {
console.log(pickedFeature);
//预处理站点位
if (
pickedFeature.id &&
pickedFeature.id._id &&
pickedFeature.id.type
) {
let _data = {
id: pickedFeature.id._id,
type: pickedFeature.id.type,
};
//_that.$store.dispatch("siteInfo/set", _data);
if (
pickedFeature.id.type == "水质仪" ||
pickedFeature.id.type == "问题点" ||
pickedFeature.id.type == "人员"
) {
//测试点击对应dom让其展示并跟着地球转动
if (
typeof pickedFeature.primitive._actualPosition !=
"undefined"
) {
// this.removeAllpopup()
let info = document.getElementById(pickedFeature.id.id);
info.style.display = "block";
let c = new Cesium.Cartesian2(
movement.position.x,
movement.position.y
);
var topcut = 300;
var leftcut = 190;
console.log(pickedFeature);
if (pickedFeature.id.type == "问题点") {
document.getElementById(
pickedFeature.id.id
).style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
pickedFeature.id.lon,
pickedFeature.id.lat,
-6
);
this.fixDomPosition(pickedFeature.id.id, position);
});
} else if (pickedFeature.id.type == "人员") {
this.peoplename = pickedFeature.id.id;
document.getElementById(
pickedFeature.id.id
).style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
pickedFeature.id.lon,
pickedFeature.id.lat,
0
);
this.fixDomPosition(pickedFeature.id.id, position);
});
} else if (pickedFeature.id.type == "水质仪") {
var domid = pickedFeature.id.id;
document.getElementById(domid).display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
pickedFeature.id.lon,
pickedFeature.id.lat,
0
);
this.fixDomPosition(pickedFeature.id.id, position);
});
}
}
} else {
//_that.$store.dispatch("siteInfo/set", _data);
}
}
}
} else {
}
} else {
//_that.$store.dispatch("siteInfo/set", _data);
}
} else {
}
}
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
},
//根据sql查询
async doSqlQuery(sqlStr, name, pick) {
console.log(name);
var nameres = name.replace(/\s*/g, "");
var datasetName = nameres.split("@");
var sqlParameter = {
datasetNames: [datasetName[1] + ":" + datasetName[0]],
getFeatureMode: "SQL",
maxFeatures: 10000,
queryParameter: {
attributeFilter: sqlStr,
},
};
//用李喆发的数据源shp请求
//雨水管线1200@xyline3D3
// var postUrl = ""
//postUrl = "http://localhost:8090/iserver/services/data-pipeline2-bimPipe22/rest/data/featureResults.rjson?returnContent=true";
//postUrl = "/supermapapi/iserver/services/data-pipeline2-bimPipe22/rest/data/featureResults.rjson?returnContent=true"
let res = await this.$api.featureResults(sqlParameter);
console.log(res);
if (res && res.features) {
var feature = res.features[0];
var result = [];
for (var i = 0; i < feature.fieldNames.length; i++) {
result[feature.fieldNames[i]] = feature.fieldValues[i];
}
/* console.log(result) */
var dombubble = document.getElementById("bubble");
/* this.$http
.post(postUrl, sqlParameter)
.then((response) => {
console.log(response)
var dombubble = document.getElementById("bubble")
if (response.data.features && response.data.features[0]) {
var feature = response.data.features[0]
var result = []
for (var i = 0; i < feature.fieldNames.length; i++) {
result[feature.fieldNames[i]] = feature.fieldValues[i]
}
console.log(result) */
//管线
var data = {};
data = result;
//筛选data为空的不显示
var lastresult = {};
for (let key in data) {
if (data[key] != "" && key.indexOf("UNIQUEID") < 0) {
lastresult[key] = data[key];
}
}
console.log(lastresult);
// this.lineInfo.showArrow=true
this.lineInfo.basicData = lastresult;
dombubble.style.display = "block";
//设置让点击后的pick对象跟着地球点跑
window.earth.scene.postRender.addEventListener(() => {
var canvasHeight = window.earth.scene.canvas.height;
var windowPosition = new Cesium.Cartesian2();
Cesium.SceneTransforms.wgs84ToWindowCoordinates(
window.earth.scene,
pick,
windowPosition
);
dombubble.style.bottom = canvasHeight - windowPosition.y + "px";
dombubble.style.left = windowPosition.x + "px";
dombubble.style.visibility = "visible";
});
} else {
dombubble.style.display = "none";
}
/* }) */
},
//获取高
getHeight() {
if (window.earth) {
var scene = window.earth.scene;
var ellipsoid = scene.globe.ellipsoid;
var height = ellipsoid.cartesianToCartographic(
window.earth.camera.position
).height;
return height;
}
},
cameraChange() {
window.earth.camera.changed.addEventListener(() => {
//先判断有无勾选雨水，勾选才有高度显示判断
//判断雨水json
let currentHeight = this.getHeight();
if (this.previousHeight) {
if (this.previousHeight > 200 && currentHeight < 200) {
console.log(111111111111111111);
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (
entitys[i].type &&
(entitys[i].type == "wushuiarrow" ||
entitys[i].type == "yushuiarrow" ||
entitys[i].type == "heliuarrow")
) {
entitys[i].show = false;
}
}
} else if (this.previousHeight < 200 && currentHeight > 200) {
console.log(2222222222222222);
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (
entitys[i].type &&
this.layerchecklist.indexOf("污水管") > -1 &&
entitys[i].type == "wushuiarrow"
) {
entitys[i].show = true;
}
if (
entitys[i].type &&
this.layerchecklist.indexOf("雨水管") > -1 &&
entitys[i].type == "yushuiarrow"
) {
entitys[i].show = true;
}
if (
entitys[i].type &&
this.layerchecklist.indexOf("合流管") > -1 &&
entitys[i].type == "heliuarrow"
) {
entitys[i].show = true;
}
}
} else {
}
this.previousHeight = currentHeight;
} else {
this.previousHeight = currentHeight;
}
/* if (currentHeight < 1000) {
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && (entitys[i].type=="wushuiarrow"||entitys[i].type=="yushuiarrow"||entitys[i].type=="heliuarrow")) {
entitys[i].show = false;
}
}
} else {
//循环删除多个实体lable
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && (entitys[i].type=="wushuiarrow"||entitys[i].type=="yushuiarrow"||entitys[i].type=="heliuarrow")) {
entitys[i].show = true;
}
}
} */
});
},
// 添加图标事件
addMarks() {
this.dataliststation = [
{
id: "三里店和与浉河南路相交处",
type: "水质仪",
stCode: "0376000092",
lon: 114.077271,
lat: 32.107239,
},
{
id: "浉河南路（界河污水主管接入后，倒虹吸前）",
type: "水质仪",
stCode: "0376000042",
lon: 114.0815319404991,
lat: 32.10199069614823,
},
{
id: "问题1",
type: "问题点",
ms: "此处有水面垃圾",
stCode: "00111",
lon: 114.085094085325,
lat: 32.0977182205015,
},
{
id: "问题2",
type: "问题点",
ms: "此处有水面垃圾",
stCode: "002",
lon: 114.0864063271,
lat: 32.0967950080981,
},
{
id: "张小明",
type: "人员",
stCode: "03760000467",
lon: 114.0805319404991,
lat: 32.10399069614823,
},
{
id: "李大明",
type: "人员",
stCode: "03760043240467",
lon: 114.088882400043,
lat: 32.0979350015851,
},
{
id: "张飞",
type: "人员",
stCode: "037565467",
lon: 114.089826231813,
lat: 32.0993981365747,
},
{
id: "胜五",
type: "人员",
stCode: "0376232340467",
lon: 114.079546279199,
lat: 32.1017924678198,
},
{
id: "张武",
type: "人员",
stCode: "037606866240467",
lon: 114.083925956929,
lat: 32.0963300318205,
},
{
id: "测试",
type: "人员",
stCode: "032327640467",
lon: 114.08635768121,
lat: 32.1066741381651,
},
];
//加载点位数据
//泵站点位
this.MonitorStationBZ = this.dataliststation.filter(function (item) {
return item.type == "水质仪";
});
this.addPoint(this.MonitorStationBZ);
//闸站
this.MonitorStationZZ = this.dataliststation.filter(function (item) {
return item.type == "问题点";
});
this.addPoint(this.MonitorStationZZ);
console.log("this.MonitorStationBZ", this.MonitorStationBZ);
console.log("this.MonitorStationZZ", this.MonitorStationZZ);
// //人员
// this.MonitorStationRY = this.dataliststation.filter(function (item) {
// return item.type == "人员";
// });
// this.addPoint(this.MonitorStationRY);
},
//添加点
addPoint(data) {
//闪烁
var x = 1;
var flog = true;
// console.log(data);
var scaledata = 1.0;
let imgUrl = require("./../../../public/static/img/hdszy_zc.png");
let placesj = new Cesium.Cartesian2(0, -60);
var positionHeight = 15;
var isshow = true;
for (let i = 0; i < data.length; i++) {
switch (data[i].type) {
case "水质仪":
imgUrl = require("./../../../public/static/img/hdszy_zc.png");
break;
case "问题点":
imgUrl = require("./../../../public/static/img/camera_green.png");
break;
case "人员":
imgUrl = require("./../../../public/static/img/people.png");
positionHeight = 0;
scaledata = 0.4;
break;
}
window.earth.entities.add({
name: data[i].id,
id: data[i].id,
lon: data[i].lon,
lat: data[i].lat,
num: data[i].id,
stCode: data[i].stCode,
type: data[i].type,
show: isshow,
position: Cesium.Cartesian3.fromDegrees(
data[i].lon,
data[i].lat,
positionHeight
),
billboard: {
image: imgUrl,
scale: scaledata,
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -40),
//heightReference:Cesium.CLAMP_TO_GROUND
//闪烁
show: new Cesium.CallbackProperty(function () {
if (this.currentMark == "张小明") {
if (flog) {
x = x - 0.05;
if (x <= 0) {
flog = false;
}
} else {
x = x + 0.05;
if (x >= 1) {
flog = true;
}
}
return x >= 0.5;
}
}, false),
},
label: {
text: data[i].id,
// font: '14pt monospace',
//font: 'Avenir, Helvetica, Arial, sans-serif',
font: "18px sans-serif",
//style: LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.WHITE,
outlineWidth: 2,
HorizontalOrigin: Cesium.HorizontalOrigin.LEFT,
//垂直位置
verticalOrigin: Cesium.VerticalOrigin.BUTTON,
//中心位置
pixelOffset: placesj,
// heightReference:Cesium.CLAMP_TO_GROUND
},
});
}
},
//添加人
addPointPeople(data) {
let imgUrl = require("./../../../public/static/img/people.png");
let positionHeight = 0;
let scaledata = 0.4;
var isshow = true;
let placesj = new Cesium.Cartesian2(0, -60);
for (let i = 0; i < data.length; i++) {
window.earth.entities.add({
name: data[i].id,
id: data[i].id,
lon: parseFloat(data[i].lon),
lat: parseFloat(data[i].lat),
num: data[i].id,
stCode: data[i].stCode,
type: data[i].type,
show: isshow,
position: Cesium.Cartesian3.fromDegrees(
parseFloat(data[i].lon),
parseFloat(data[i].lat),
positionHeight
),
billboard: {
image: imgUrl,
scale: scaledata,
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -40),
//heightReference:Cesium.CLAMP_TO_GROUND
//闪烁
// show: new Cesium.CallbackProperty(function () {
// if(this.currentMark=="张小明")
// {
// if (flog) {
// x = x - 0.05;
// if (x <= 0) {
// flog = false;
// }
// } else {
// x = x + 0.05;
// if (x >= 1) {
// flog = true;
// }
// }
// return x >= 0.5;
// }
// }, false),
},
label: {
text: data[i].id,
// font: '14pt monospace',
//font: 'Avenir, Helvetica, Arial, sans-serif',
font: "18px sans-serif",
//style: LabelStyle.FILL_AND_OUTLINE,
fillColor: Cesium.Color.WHITE,
outlineWidth: 2,
HorizontalOrigin: Cesium.HorizontalOrigin.LEFT,
//垂直位置
verticalOrigin: Cesium.VerticalOrigin.BUTTON,
//中心位置
pixelOffset: placesj,
// heightReference:Cesium.CLAMP_TO_GROUND
},
});
}
},
//根据type去删除对应entities
removeEntityByType(typename) {
//循环删除多个实体lable
if (window.earth) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == typename) {
entitys[i].show = false;
}
}
}
},
//根据type去添加对应entities
addEntityByType(typename) {
//循环删除多个实体lable
if (window.earth) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == typename) {
entitys[i].show = true;
}
}
}
},
addOSGBunderline1() {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/常规模型_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "常规模型_排水管线_20211012@bimPipe2" }
);
promise.then((layer) => {
layer.visible = true;
});
var promise1 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/墙_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "墙_排水管线_20211012@bimPipe2" }
);
promise1.then((layer) => {
layer.visible = true;
});
var promise2 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/楼板_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "楼板_排水管线_20211012@bimPipe2" }
);
promise2.then((layer) => {
layer.visible = true;
});
var promise3 = window.earth.scene.addS3MTilesLayerByScp(
"http://192.168.16.144:8090/iserver/services/3D-pipeline2-bimPipe2/rest/realspace/datas/管道_排水管线_20211012@bimPipe2/config", //地址写到config那一级
{ name: "管道_排水管线_20211012@bimPipe2 " }
);
promise3.then((layer) => {
layer.visible = true;
});
},
addOSGBunderline() {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://localhost:8090/iserver/services/3D-YuShuiJing-jkqosgb/rest/realspace/datas/雨水井@jkqosgb/config", //地址写到config那一级
{ name: "雨水井@jkqosgb" }
);
promise.then((layer) => {
layer.visible = true;
});
var promise1 = window.earth.scene.addS3MTilesLayerByScp(
"http://localhost:8090/iserver/services/3D-YuShuiJing-jkqosgb/rest/realspace/datas/雨水管@jkqosgb/config", //地址写到config那一级
{ name: "雨水管@jkqosgb" }
);
promise1.then((layer) => {
layer.visible = true;
});
},
addOSGBtileset() {
// var promise= window.earth.scene.addS3MTilesLayerByScp(
// 'http://192.168.100.6:8090/iserver/services/3D-local3DCache-Config/rest/realspace/datas/Combine/config', //地址写到config那一级
// { name: 'Combine' }
// )
// var promise = window.earth.scene.addS3MTilesLayerByScp(
// "http://localhost:8090/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config", //地址写到config那一级
// { name: "Combine" }
// );
// var promise = window.earth.scene.addS3MTilesLayerByScp(
// "http://localhost:8090/iserver/services/3D-local3DCache-Config/rest/realspace/datas/Combine/config", //地址写到config那一级
// { name: "Combine" }
// );
// var promise= window.earth.scene.addS3MTilesLayerByScp(
// '/supermap3Dapi/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config', //地址写到config那一级
// //'http://192.168.100.6:8090/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config', //地址写到config那一级
// { name: 'Combine' }
// )
var promise= window.earth.scene.addS3MTilesLayerByScp(
'/supermap3Dapi/iserver/services/3D-local3DCache-Config/rest/realspace/datas/Combine/config', //地址写到config那一级
//'http://192.168.100.6:8090/iserver/services/3D-local3DCache-osgbxy1/rest/realspace/datas/Combine/config', //地址写到config那一级
{ name: 'Combine' }
)
promise.then((layer) => {
layer.visible = true;
this.osgblayer = layer;
window.earth.flyTo(layer);
});
},
addLayerByCheck(layername) {
if (layername.indexOf("水质站") > -1) {
this.addEntityByType("水质站");
}
if (layername.indexOf("流量站") > -1) {
this.addEntityByType("流量站");
}
if (layername.indexOf("雨量站") > -1) {
this.addEntityByType("雨量站");
}
if (layername.indexOf("雨水管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "yushuiarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/雨水管84@jkqline3D6/config", //地址写到config那一级
{ name: "雨水管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "雨水管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
if (this.smidarrayysg.length > 0) {
layer.selectColorType = 1.0;
layer.setObjsColor(this.smidarrayysg, Cesium.Color.YELLOW);
}
});
}
if (layername.indexOf("污水管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "wushuiarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/污水管84@jkqline3D6/config", //地址写到config那一级
{ name: "污水管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "污水管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
});
}
if (layername.indexOf("合流管") > -1) {
//流向
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "heliuarrow") {
entitys[i].show = true;
}
}
//s3m管线
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/合流管84@jkqline3D6/config", //地址写到config那一级
{ name: "合流管84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "合流管84",
keyWord: "SmID",
});
layer.textureUVSpeed = new Cesium.Cartesian2(0, -2);
});
}
if (layername.indexOf("雨水井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/雨水井84@jkqline3D6/config", //地址写到config那一级
{ name: "雨水井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "雨水井84",
keyWord: "SmID",
});
});
}
if (layername.indexOf("污水井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/污水井84@jkqline3D6/config", //地址写到config那一级
{ name: "污水井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "污水井84",
keyWord: "SmID",
});
});
}
if (layername.indexOf("合流井") > -1) {
var promise = window.earth.scene.addS3MTilesLayerByScp(
"http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace/datas/合流井84@jkqline3D6/config", //地址写到config那一级
{ name: "合流井84@jkqline3D6" }
);
promise.then((layer) => {
layer.visible = true;
layer.setQueryParameter({
url: "http://111.231.190.116:8090/iserver/services/data-YuShuiJing84-jkqline3D6/rest/data",
dataSourceName: "jkqline3D6",
dataSetName: "合流井84",
keyWord: "SmID",
});
});
}
},
removeLayerByCheck(layername) {
if (layername.indexOf("水质站") > -1) {
this.removeEntityByType("水质站");
}
if (layername.indexOf("流量站") > -1) {
this.removeEntityByType("流量站");
}
if (layername.indexOf("雨量站") > -1) {
this.removeEntityByType("雨量站");
}
if (layername.indexOf("雨水管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "yushuiarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("雨水管84@jkqline3D6");
}
if (layername.indexOf("污水管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "wushuiarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("污水管84@jkqline3D6");
}
if (layername.indexOf("合流管") > -1) {
var viewer = window.earth;
var entitys = viewer.entities._entities._array;
for (var i = 0; i < entitys.length; i++) {
if (entitys[i].type && entitys[i].type == "heliuarrow") {
entitys[i].show = false;
}
}
window.earth.scene.layers.remove("合流管84@jkqline3D6");
}
if (layername.indexOf("雨水井") > -1) {
window.earth.scene.layers.remove("雨水井84@jkqline3D6");
}
if (layername.indexOf("污水井") > -1) {
window.earth.scene.layers.remove("污水井84@jkqline3D6");
}
if (layername.indexOf("合流井") > -1) {
window.earth.scene.layers.remove("合流井84@jkqline3D6");
}
},
//根据全局报警id数组去重新渲染黄色报警管线
refreshBJlayer() {
//根据图层和smid赋值
if (this.smidarrayysg.length > 0) {
var layer1 = window.earth.scene.layers.find("雨水管84@jkqline3D6");
layer1.selectColorType = 1.0;
layer1.setObjsColor(this.smidarrayysg, Cesium.Color.YELLOW);
}
if (this.smidarraywsg.length > 0) {
var layer2 = window.earth.scene.layers.find("污水管84@jkqline3D6");
layer2.selectColorType = 1.0;
layer2.setObjsColor(this.smidarraywsg, Cesium.Color.YELLOW);
}
if (this.smidarrayysj.length > 0) {
var layer3 = window.earth.scene.layers.find("雨水井84@jkqline3D6");
layer3.selectColorType = 1.0;
layer3.setObjsColor(this.smidarrayysj, Cesium.Color.YELLOW);
}
if (this.smidarraywsj.length > 0) {
var layer4 = window.earth.scene.layers.find("污水井84@jkqline3D6");
layer4.selectColorType = 1.0;
layer4.setObjsColor(this.smidarraywsj, Cesium.Color.YELLOW);
}
},
//OSGB加载
addOSGB() {
// 加载3D
var m1 = Cesium.Matrix4.fromArray([
1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 30.0, 2.0,
0.0, 1.0,
]);
var tileset1 = new Cesium.Cesium3DTileset({
url: "http://192.168.16.144:6089/jingkaiqu/tileset.json",
modelMatrix: m1, //转移矩阵
baseScreenSpaceError: 512,
maximumScreenSpaceError: 128,
});
window.earth.scene.primitives.add(tileset1);
window.earth.flyTo(tileset1);
},
//关闭属性面板
closepopup() {
// this.basicData = null;
this.lineInfo.siteName = "";
this.lineInfo.basicData = null;
this.lineInfo.realTimeData = [];
document.getElementById("bubble").style.display = "none";
},
// 地图初始化
homeClick() {
//this.removeAllpopup()
/* this.flyByLontion({
lon: 114.14065,
lat: 30.4447,
alt: 150,
heading: 50,
pitch: -14.0,
roll: 0,
}); */
if (window.earth) {
window.earth.camera.flyTo({
destination: new Cesium.Cartesian3(
-2205455.99014828,
4932877.268983923,
3388815.671422814
),
orientation: {
heading: 5.803243742536711, // east, default value is 0.0 (north)
pitch: -0.24049635580715845, // default value (looking down)
roll: 6.283185307179586,
},
});
}
},
// // 飞行到某一位置
// flyByLontion(lontion) {
// window.earth.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(
// lontion.lon,
// lontion.lat,
// lontion.alt
// ),
// orientation: {
// heading: Cesium.Math.toRadians(lontion.heading), // east, default value is 0.0 (north)
// pitch: Cesium.Math.toRadians(lontion.pitch), // default value (looking down)
// roll: lontion.roll,
// },
//飞行相关
TravelCave2() {
///依次遍历加载所有隧道管线
const routeCor = [];
// var lonarr=[114.148391,114.148672,114.14892,114.149219,114.149576,114.149862,114.150233,114.150742,114.15137,114.151965,114.152646,114.153179,114.15374,114.154335,114.154864,114.155401,114.156244,114.157195,114.158019,114.158775,114.159689,114.160579,114.161483,114.162502,114.163653,114.164667,114.165357,114.166475,114.167184,114.167941]
// var latarr=[30.444107,30.444402,30.444711,30.445026,30.445325,30.445616,30.445939,30.446253,30.446544,30.446824,30.447029,30.44721,30.447338,30.447491,30.447648,30.447814,30.448076,30.448376,30.448638,30.44888,30.449161,30.449518,30.449818,30.450156,30.450641,30.451079,30.451374,30.451802,30.452026,30.452183]
var lonarr = [
114.0898903854, 14.089841264129, 114.089796947407, 114.089757095699,
114.08970803082, 114.089647304733, 114.089597569585, 114.089535569953,
114.089471080709, 114.089413412573, 114.089362228022, 114.089319783143,
114.089257792534, 114.089214671593, 114.089144784234, 114.089068820635,
114.088954740737, 114.088882400043,
];
var latarr = [
32.0970053281074, 32.0970490955161, 32.0970904753084, 32.0971270664774,
32.0971707894215, 32.097227628287, 32.0972729702291, 32.0973327638936,
32.0973913445578, 32.097442311542, 32.0974908939943, 32.0975295785948,
32.0975888500358, 32.0976275724987, 32.0976941238234, 32.0977634521982,
32.0978698889827, 32.0979350015851,
];
for (let kk = 0; kk < lonarr.length; kk++) {
/* var result = gcoord.transform(
[lonarr[kk], latarr[kk]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
); */
routeCor.push(lonarr[kk]);
routeCor.push(latarr[kk]);
routeCor.push(-5);
}
//求全管线漫游路径routeCor
const Lines = Cesium.Cartesian3.fromDegreesArrayHeights(routeCor);
//加载飞行模型参数
const options = {
time: 18,
// time: this.video.duration,
Lines: Lines,
isPathShow: true,
};
this.options = options;
this.entity = undefined;
//this.url = options.modeluri;
this.time = options.time;
this.start = undefined;
this.stop = undefined;
this.Lines = options.Lines;
this.isPathShow = options.isPathShow;
this.property = this.ComputeRoamingLineProperty(
options.Lines,
options.time,
options.start
);
},
fullClick() {
//全屏事件
if (this.isFullscreen == false) {
this.isFullscreen = true;
Cesium.Fullscreen.requestFullscreen(document.body);
}
//退出全屏事件
else {
this.isFullscreen = false;
this.exitFullScreen();
}
},
// 退出全屏
exitFullScreen(el) {
var el = document,
cfs =
el.cancelFullScreen ||
el.webkitCancelFullScreen ||
el.mozCancelFullScreen ||
el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
},
//飞行相关
TravelCave() {
///依次遍历加载所有隧道管线
const routeCor = [];
// var lonarr=[114.148391,114.148672,114.14892,114.149219,114.149576,114.149862,114.150233,114.150742,114.15137,114.151965,114.152646,114.153179,114.15374,114.154335,114.154864,114.155401,114.156244,114.157195,114.158019,114.158775,114.159689,114.160579,114.161483,114.162502,114.163653,114.164667,114.165357,114.166475,114.167184,114.167941]
// var latarr=[30.444107,30.444402,30.444711,30.445026,30.445325,30.445616,30.445939,30.446253,30.446544,30.446824,30.447029,30.44721,30.447338,30.447491,30.447648,30.447814,30.448076,30.448376,30.448638,30.44888,30.449161,30.449518,30.449818,30.450156,30.450641,30.451079,30.451374,30.451802,30.452026,30.452183]
var lonarr = [
114.087763419737, 114.087689192507, 114.087653093624, 114.08759766285,
114.087516428843, 114.087456655966, 114.087387491646, 114.087314330424,
114.087253741682, 114.087181761485, 114.08710594273, 114.087049911241,
114.086966264683, 114.0869241438, 114.086782521269, 114.086656495749,
114.086552339414, 114.086467292841, 114.086375418559, 114.086325058138,
114.086251488439, 114.086212781833, 114.086114747666, 114.085987192653,
114.08583189863,
];
var latarr = [
32.0955439108, 32.0956102636279, 32.0956420811552, 32.0956972372304,
32.0957732456452, 32.0958313509353, 32.0958961703995, 32.0959646428073,
32.0960193913297, 32.0960848141479, 32.0961527850088, 32.0961988123009,
32.0962695200168, 32.0963064886343, 32.0964261570576, 32.0965305774399,
32.0966130044973, 32.0966857359645, 32.0967631996461, 32.0968071541257,
32.0968684139987, 32.0969048271719, 32.0969862922884, 32.0970946158659,
32.0972330138566,
];
for (let kk = 0; kk < lonarr.length; kk++) {
/* var result = gcoord.transform(
[lonarr[kk], latarr[kk]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
); */
routeCor.push(lonarr[kk]);
routeCor.push(latarr[kk]);
routeCor.push(-4);
}
routeCor.push(114.085719349506);
routeCor.push(32.0971357752289);
routeCor.push(2);
routeCor.push(114.085588643839);
routeCor.push(32.0972612917984);
routeCor.push(2);
routeCor.push(114.085491647299);
routeCor.push(32.097355446692);
routeCor.push(2);
routeCor.push(114.085318017236);
routeCor.push(32.0975266208165);
routeCor.push(2);
routeCor.push(114.085180056944);
routeCor.push(32.0976642995766);
routeCor.push(2);
routeCor.push(114.085119280774);
routeCor.push(32.0977270301215);
routeCor.push(2);
var lonarr1 = [
114.085255976288, 114.085102694904, 114.085014961749, 114.084923781515,
114.084786423886, 114.084692750713, 114.08460844511, 114.084534852399,
114.084479672299, 114.084400450906, 114.084291694824, 114.084214065142,
114.084115479127, 114.084036679425, 114.083948853824, 114.083828529212,
//114.083762618346, 114.083670496717, 114.083564187366, 114.083480203343,
// 114.083397555403, 114.083285951538, 114.083209751656, 114.083146979527,
// 114.083040248719, 114.082968458143, 114.082938537003, 114.08288101482,
// 114.082811049091, 114.082774340772, 114.082727661101, 114.082680332365,
// 114.082648783926, 114.082594160631, 114.082546284847, 114.082503652205,
// 114.082434591266, 114.082384186164, 114.082308046589, 114.082250405793,
// 114.082192903706, 114.08211938981, 114.082049117193, 114.081992119443,
// 114.081940938433, 114.081879304096, 114.081824030884, 114.081748689648,
// 114.081686859164, 114.081597965895, 114.081531735095, 114.081470914758,
// 114.081400118209, 114.081330735072, 114.081271630674, 114.081224359781,
// 114.081150981215, 114.08107153615, 114.081034048701, 114.080977739837,
// 114.080925212461, 114.080852506325, 114.080752521335, 114.080700156844,
// 114.080629328236, 114.080532400489, 114.080459584228, 114.080399009685,
// 114.080335825006, 114.080242918602, 114.080179816621, 114.080181204924,
// 114.080089587943, 114.08004499385, 114.079971133277, 114.079850230649,
// 114.079784782032, 114.079729723803, 114.079660313457, 114.079583992338,
// 114.079527995873, 114.079459435964, 114.079408140909, 114.079333362151,
// 114.079230455162, 114.079146661184,
];
var latarr1 = [
32.0978345684551, 32.0979785122343, 32.0980605423124, 32.0981493367731,
32.0982863273092, 32.0983793459651, 32.0984714366192, 32.0985561170528,
32.0986145838852, 32.0987069863075, 32.0988312425012, 32.0989236314715,
32.0990387312133, 32.0991307915664, 32.0992359345577, 32.0993792349995,
//32.0994578651062, 32.0995630877418, 32.0996859900723, 32.0997828704268,
// 32.0998817346794, 32.1000085537278, 32.100095185876, 32.1001652907905,
// 32.1002875662747, 32.1003736480043, 32.1004113295985, 32.1004861755372,
// 32.1005750063695, 32.1006252253616, 32.1006890091389, 32.1007584586724,
// 32.1008019054174, 32.1008821656155, 32.1009512477213, 32.1010090678594,
// 32.1011080872234, 32.1011858150934, 32.1012975869943, 32.1013840172796,
// 32.1014718984045, 32.1015816187692, 32.1016894782681, 32.1017769762188,
// 32.1018535972501, 32.1019493609947, 32.1020317658604, 32.1021482886804,
// 32.1022408675649, 32.1023756080394, 32.1024777230103, 32.1025734534491,
// 32.10268282509, 32.102787689644, 32.1028755374286, 32.1029506991419,
// 32.1030639197819, 32.1031839026546, 32.1032421167879, 32.10333213833,
// 32.1034137656734, 32.1035220905637, 32.1036792532342, 32.1037542274605,
// 32.103833226122, 32.1039417395034, 32.1040295715129, 32.1041000089462,
// 32.1041721958583, 32.1042804199954, 32.1043520409667, 32.1043507388764,
// 32.1044545582256, 32.104506639531, 32.1045937278367, 32.1047320829662,
// 32.104803349756, 32.1048685928752, 32.1049456548293, 32.1050357306808,
// 32.1050977032556, 32.1051800454596, 32.1052386907462, 32.1053237777052,
// 32.1054423308271, 32.1055366473754,
];
for (let kk = 0; kk < lonarr1.length; kk++) {
routeCor.push(lonarr1[kk]);
routeCor.push(latarr1[kk]);
routeCor.push(-4);
}
//求全管线漫游路径routeCor
const Lines = Cesium.Cartesian3.fromDegreesArrayHeights(routeCor);
//加载飞行模型参数
const options = {
//time: 117,
time: routeCor.length / 3,
// time: this.video.duration,
Lines: Lines,
isPathShow: true,
};
this.options = options;
this.entity = undefined;
//this.url = options.modeluri;
this.time = options.time;
this.start = undefined;
this.stop = undefined;
this.Lines = options.Lines;
this.isPathShow = options.isPathShow;
this.property = this.ComputeRoamingLineProperty(
options.Lines,
options.time,
options.start
);
},
/**
*漫游的暂停和继续
*
* @param {*} state bool类型 false为暂停，ture为继续
* @memberof Roaming
*/
//漫游
ComputeRoamingLineProperty(Lines, time) {
const property = new Cesium.SampledPositionProperty();
const lineLength = Lines.length;
const tempTime = time - (time % lineLength);
const increment = tempTime / lineLength;
//const increment = time / lineLength;
const start = Cesium.JulianDate.now();
this.start = start;
const stop = Cesium.JulianDate.addSeconds(
start,
tempTime,
new Cesium.JulianDate()
);
//const stop = Cesium.JulianDate.addSeconds(start, time, new Cesium.JulianDate());
this.stop = stop;
window.earth.clock.startTime = start.clone();
window.earth.clock.stopTime = stop.clone();
window.earth.clock.currentTime = start.clone();
// window.earth.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // Loop at the end循环
window.earth.clock.clockRange = Cesium.ClockRange.CLAMPED; //到达终止时间后自动停止
window.earth.clock.multiplier = 0.3;
for (let i = 0; i < lineLength; i++) {
const time = Cesium.JulianDate.addSeconds(
start,
i * increment,
new Cesium.JulianDate()
);
const position = Lines[i];
property.addSample(time, position);
}
return property;
},
/**
*
*
* @param {*} position computeRoamingLineProperty计算的属性
* @param {*} start 开始时间节点
* @param {*} stop 结束时间节点
* @param {*} isPathShow path路径是否显示
* @memberof Roaming
*/
InitRoaming(position, start, stop, isPathShow) {
this.finishedArray = [];
//杨工新方法
//定制已走过的橙色线
if (this.redLine) {
//改为空的坐标
this.redLine.polyline.positions = new Cesium.CallbackProperty(
(time, result) => {
//endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
return Cesium.Cartesian3.fromDegreesArrayHeights(
[
114.08776071508423, 32.09554632853193, -4.0000002853217715,
114.08775831828851, 32.09554847106537, -4.000000519596626,
],
Cesium.Ellipsoid.WGS84,
result
);
},
false
);
} else {
this.redLine = window.earth.entities.add({
type: "redline",
polyline: {
// This callback updates positions each frame.
// positions : new Cesium.CallbackProperty(function(time, result) {
// //endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
// return Cesium.Cartesian3.fromDegreesArrayHeights([], Cesium.Ellipsoid.WGS84, result);
// }, false),
width: 10,
material: Cesium.Color.RED,
},
});
}
//this.position = position;
this.entity = window.earth.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
// 位置
position: position,
// 计算朝向
//设置视野距离
viewFrom: new Cesium.Cartesian3(-25.0, -25.0, 25.0),
orientation: new Cesium.VelocityOrientationProperty(position),
model: {
uri: "/gltfUrl/gongren.gltf",
//uri: "/gltfUrl/gltf/gongren.gltf",
// minimumPixelSize:6400,
// maximumSize:128,
// maximumScale:200,
//uri: "/gltfUrl/00256_Daud008.fbx.glb",
scale: 0.001,
},
/* billboard: {
image: "./../../assets/images/manyoumark.png",
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -10),
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND, //地形之上
}, */
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.GREEN.withAlpha(0.5),
}),
width: 10,
show: true,
},
});
//追随视角
window.earth.trackedEntity = this.entity;
window.earth.clock.onTick.addEventListener((clock) => {
this.OneSeeFunc(position);
});
},
//世界坐标系转经纬度
Cartesian3_to_WGS84(point) {
var cartesian33 = new Cesium.Cartesian3(point.x, point.y, point.z);
var cartographic = Cesium.Cartographic.fromCartesian(cartesian33);
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude);
var alt = cartographic.height;
return { lng: lng, lat: lat, alt: alt };
},
//第一视角漫游方法
OneSeeFunc(position) {
// console.log("进来了onsese")
let judgeTime = Cesium.JulianDate.compare(
window.earth.clock.currentTime,
window.earth.clock.stopTime
);
console.log(judgeTime);
if (judgeTime < 0) {
//设置第一视角
let hpRoll = new Cesium.HeadingPitchRoll();
const hpRange = new Cesium.HeadingPitchRange();
this.center = new Cesium.Cartesian3();
this.center = position.getValue(
window.earth.clock.currentTime,
this.center
);
//先转为经纬度
var lonlatcell = this.Cartesian3_to_WGS84(this.center);
if (this.isEndRoam == false) {
this.finishedArray.push(lonlatcell.lng);
this.finishedArray.push(lonlatcell.lat);
this.finishedArray.push(lonlatcell.alt);
}
console.log("this.finishedArray", this.finishedArray);
console.log("this.redLine", this.redLine);
this.redLine.polyline.positions = new Cesium.CallbackProperty(
(time, result) => {
//endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
return Cesium.Cartesian3.fromDegreesArrayHeights(
this.finishedArray,
Cesium.Ellipsoid.WGS84,
result
);
},
false
);
this.redLine.polyline.width = 10;
this.redLine.polyline.material = Cesium.Color.RED;
//根据center去绘制已走过的entities坐标
//console.log("this.center", this.center)
// console.log(center);
// console.log(this.entity);
// if (
// this.center !== undefined &&
// this.entity &&
// this.isEndRoam == false
// ) {
// //console.log('进来了进来了进来了');
// const xx = new Cesium.VelocityOrientationProperty(position);
// const aa = xx.getValue(window.earth.clock.currentTime);
// hpRoll = HeadingPitchRoll.fromQuaternion(aa);
// /*hpRange.heading = hpRoll.heading - Math.PI / 2;
// hpRange.pitch = -Math.PI / 2;
// hpRange.range = 2000; */
// hpRange.heading = 5.486668339977669;
// hpRange.pitch = -0.3000302138834965;
// hpRange.range = 150;
// //window.earth.camera.lookAt(this.center, hpRange);
// }
//中途点击了停止漫游
if (this.isEndRoam == true) {
this.EndRoaming();
}
//漫游完毕停止漫游并归位视角
/* if (judgeTime > -3) {
setTimeout(() => {
// console.log('见来了进来了进来了');
if (this.isEndRoam == false) {
this.homeClick();
}
this.EndRoaming();
}, 3100);
} */
//自动到了指定位置，停止播放，弹出pop框
//长丰泵站
//this.AnimateState
// if (judgeTime > -100 && judgeTime < -96 && this.ispanelCFBZ == false) {
if (judgeTime > -29 && judgeTime < -25 && this.ispanelCFBZ == false) {
this.holdMY();
// console.log("开始展示长丰泵站");
document.getElementById("问题2").style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
114.0864063271,
32.0967950080981,
-5
);
this.fixDomPosition("问题2", position);
});
this.ispanelCFBZ = true;
setTimeout(() => {
this.holdMY();
// console.log("停止展示长丰泵站,继续动画");
document.getElementById("问题2").style.display = "none";
}, 4000);
}
// if (judgeTime > -90 && judgeTime < -86 && this.ispanelWT1 == false) {
if (judgeTime > -17 && judgeTime < -13 && this.ispanelWT1 == false) {
this.holdMY();
// console.log("开始展示长丰泵站");
document.getElementById("问题1").style.display = "block";
window.earth.scene.preRender.addEventListener(() => {
var position = new Cesium.Cartographic(
114.085094085325,
32.0977182205015,
1.5
);
this.fixDomPosition("问题1", position);
});
this.ispanelWT1 = true;
setTimeout(() => {
this.holdMY();
// console.log("停止展示长丰泵站,继续动画");
document.getElementById("问题1").style.display = "none";
}, 4000);
}
//长丰闸站
// if (
// judgeTime > -76 &&
// judgeTime < -73 &&
// this.ispanelCFZZ == false
// ) {
// console.log("开始展示长丰闸站");
// document.getElementById("长丰闸站").style.display = "block";
// this.ispanelCFZZ = true;
// setTimeout(() => {
// console.log("停止展示长丰闸站,继续动画");
// document.getElementById("长丰闸站").style.display =
// "none";
// }, 3000);
// }
}
},
//三维笛卡尔坐标转屏幕坐标
transPosition(position) {
return Cesium.SceneTransforms.wgs84ToWindowCoordinates(
window.earth.scene,
position
);
},
//让dom跟着指定的经纬度位置跑
fixDomPosition(domId, position) {
var dom = document.getElementById(domId);
var cartesian = Cesium.Cartesian3.fromDegrees(
position.longitude,
position.latitude,
position.height
);
var winPosi = this.transPosition(cartesian);
if (winPosi !== undefined && winPosi !== null) {
//dom.style.display=""
dom.style.left = winPosi.x + "px";
dom.style.top = winPosi.y + "px";
}
},
PauseOrContinue(state) {
if (window.earth.clock) window.earth.clock.shouldAnimate = state;
},
/**
*改变飞行的速度
*
* @param {*} value 整数类型
* @memberof Roaming
*/
ChangeRoamingSpeed(value) {
window.earth.clock.multiplier = value;
},
/**
*
*取消漫游
* @memberof Roaming
*/
EndRoaming() {
// console.log(JulianDate.compare(window.earth.clock.currentTime, window.earth.clock.stopTime));
this.finishedArray = [];
if (this.redLine) window.earth.entities.remove(this.redLine);
this.isEndRoam = true;
if (this.entity !== undefined) {
window.earth.entities.remove(this.entity);
}
/* this.$parent.Show(true); */
},
//开始漫游暂停等
beginMY() {
this.ispanelWT1 = false;
this.ispanelCFBZ = false;
this.ispanelCFZZ = false;
this.endMY();
//控制视频播放
// video控件是原生获取的dom
this.videoPanelShow = true;
//控制地图上无人机飞行
this.isEndRoam = false;
// this.PauseOrContinue(true);
/* this.playstopIcon = 'el-icon-video-pause iconDivs';
this.playstopTitle = '暂停'; */
let lontion = {
//lon: 114.33572318755,
lon: 114.087763419737,
//lat: 30.5642200607852 - 0.018,
//lat: 30.5642200607852,
lat: 32.0955439108,
// alt: 150,
alt: 50,
heading: 5.486668339977669,
//pitch: -45.0,
pitch: -0.3000302138834965,
roll: 6.283185307179586,
};
window.earth.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
lontion.lon,
lontion.lat,
lontion.alt
),
orientation: {
heading: Cesium.Math.toRadians(lontion.heading), // east, default value is 0.0 (north)
pitch: Cesium.Math.toRadians(lontion.pitch), // default value (looking down)
roll: lontion.roll,
},
maximumHeight: 20,
duration: 1,
});
setTimeout(() => {
this.property = this.ComputeRoamingLineProperty(
this.options.Lines,
this.options.time,
this.options.start
);
this.PauseOrContinue(true);
//this.flyToScene();
this.AnimateState = true;
this.InitRoaming(this.property, this.start, this.stop, this.isPathShow);
}, 1000);
},
holdMY() {
//控制视频播放
// video控件是原生获取的dom
// let video = document.getElementById('videoEvent');
if (this.AnimateState == false) {
//video播放
// video.play();
//地图事件
/* this.$parent.Show(false);
this.SiteShow = false; */
this.AnimateState = true;
this.playstopIcon = "el-icon-video-pause iconDivs";
this.playstopTitle = "暂停";
} else {
//video暂停
// video.pause();
//地图事件
//控制地图
this.AnimateState = false;
//document.getElementsByClassName("iconDiv")[0].children[2].type =
this.playstopIcon = " el-icon-video-play iconDivs";
this.playstopTitle = "继续";
}
this.PauseOrContinue(this.AnimateState);
},
// continueMY() {
// this.PauseOrContinue(true);
// },
endMY() {
this.isEndRoam = true;
this.finishedArray = [];
if (this.redLine) window.earth.entities.remove(this.redLine);
// this.redLine.polyline.positions=null
// this.redLine.polyline.positions=new Cesium.CallbackProperty((time, result)=> {
// //endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
// return Cesium.Cartesian3.fromDegreesArrayHeights([114.08776071508423, 32.09554632853193, -4.0000002853217715, 114.08775831828851, 32.09554847106537, -4.000000519596626], Cesium.Ellipsoid.WGS84, result);
// }, false)
// this.redLine = window.earth.entities.add({
// polyline : {
// // This callback updates positions each frame.
// // positions : new Cesium.CallbackProperty(function(time, result) {
// // //endLongitude = startLongitude + 0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
// // return Cesium.Cartesian3.fromDegreesArrayHeights([], Cesium.Ellipsoid.WGS84, result);
// // }, false),
// width : 15,
// material : Cesium.Color.RED
// }
// });
//this.removeAllpopup()
//变量隐藏
/* //展示实时泵站面板
this.isStationShow = true; */
// //关闭视频
window.earth.clock.currentTime = 0;
/* this.video.currentTime = 0;
this.video.pause();
this.videoPanelShow = false; */
// console.log(window.earth.scene.camera);
// console.log("endendendendend");
this.EndRoaming();
},
//点击通话
callPerson() {
/* this.$emit("callPerson"); */
console.log("点击了通话请求");
this.$emit("showcall", "15824808463");
},
},
};
</script>
<style lang="less" scoped>
.tools-content {
position: absolute;
left: 267px;
right: 0;
top: 60px;
transform: translateY(-60px);
transition: all 0.2s ease-in-out;
&.show {
transform: translateY(0);
}
.top-content1 {
display: flex;
height: 60px;
justify-content: center;
align-items: center;
/* background-color: rgba(0, 0, 0, 0.5); */
img {
width: 38px;
margin-right: 20px;
cursor: pointer;
}
.divider {
width: 2px;
height: 18px;
background-color: #fff;
margin-right: 20px;
}
.r {
width: 32px;
height: 32px;
background-color: #fff;
margin-right: 20px;
text-align: center;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&.active {
background-color: #0bc3f5;
}
img {
width: 20px;
margin: 0 auto;
}
}
}
.toggle-tools {
text-align: center;
p {
margin: 0;
height: 30px;
display: flex;
align-items: center;
width: 50px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
justify-content: center;
}
}
}
.videoPop {
display: inline-block;
right: 57px;
top: 0px;
width: 500px;
height: 300px;
z-index: 200;
position: absolute;
}
.video {
width: 100%;
height: 100%;
overflow: hidden;
}
#videoEvent {
width: 100%;
height: 100%;
}
.bzstyle {
position: absolute;
z-index: 2;
color: white;
/* height: 96px; */
line-height: 21px;
font-size: 16px;
font-weight: 600;
text-align: center;
/* width: 150px; */
cursor: pointer;
user-select: none;
}
.panelstylesp {
z-index: 1001;
position: absolute;
// margin-left: -200px;
// margin-top: -80px;
background-color: #101333;
top: 0;
left: 0;
border-radius: 2px;
max-width: 500px;
min-width: 480px;
min-height: 60px;
box-shadow: 0 0 6px #101333;
}
.panelstyleqita {
// z-index: 1001;
// position: absolute;
// margin-left: -115px;;
// margin-top: -349px;
// color: white;
// min-height: 60px;
background-color: #101333;
box-shadow: 0 0 6px #101333;
max-width: 250px;
margin-left: -103px;
margin-top: -253px;
z-index: 1001;
position: absolute;
right: 5px;
top: -3px;
cursor: pointer;
color: #aaa;
&:hover {
// color: #777;
}
}
.panelstyle {
// z-index: 1001;
// position: absolute;
// margin-left: -115px;;
// margin-top: -349px;
// color: white;
// min-height: 60px;
margin-top: -209px;
margin-left: 27px;
background-color: #101333;
box-shadow: 0 0 6px #101333;
max-width: 550px;
// margin-left: -103px;
// margin-top: -253px;
z-index: 1001;
position: absolute;
right: 5px;
top: -3px;
cursor: pointer;
color: #aaa;
&:hover {
// color: #777;
}
}
.item {
display: flex;
line-height: 28px;
margin-bottom: 10px;
box-shadow: 0px 1px 3px #0c8585;
.l {
width: 85px;
color: #ccc;
margin-right: 10px;
}
.r {
flex: 1;
text-align: right;
box-sizing: border-box;
padding-right: 20px;
}
}
.call {
width: 80px;
height: 30px;
line-height: 30px;
background-color: #1890ff;
text-align: center;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
margin: 10px auto 10px;
float: left;
color: #fff;
margin-left: 240px;
&:hover {
color: rgb(204, 204, 204);
}
}
.cnt-list {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
.item00 {
width: 50px;
margin-right: 5px;
text-align: center;
.name {
margin-top: 5px;
font-size: 13px;
color: #ccc;
}
}
}
// &::after {
// content: "";
// width: 0;
// height: 0;
// position: absolute;
// display: block;
// border-top: 7px solid #101333;
// border-left: 7px solid transparent;
// border-right: 7px solid transparent;
// bottom: -7px;
// left: 50%;
// transform: translateX(-50%);
// }
#supermap3D {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
.right-menu {
position: absolute;
right: 30px;
color: white;
top: 100px;
z-index: 1001;
.item {
margin-bottom: 20px;
height: 70px;
line-height: 70px;
width: 200px;
text-align: center;
font-size: 24px;
font-family: "HUAKANG";
background-image: linear-gradient(
to right,
rgba(3, 39, 110, 1),
rgba(3, 39, 110, 0.2)
);
cursor: pointer;
transition: all 0.25s ease-in-out;
&.active {
background-image: linear-gradient(
to right,
rgba(0, 162, 255, 1),
rgba(0, 162, 255, 0.2)
);
}
}
}
}
.bubble {
position: absolute;
margin: 0;
margin-left: -500px;
margin-bottom: -25px;
}
.mapPanel {
position: relative;
}
// .panelstyle{
// z-index: 1001;
// position: absolute;
// margin-top: -233px;
// margin-left: -140px;
// top: 168px;
// left: 0px;
// color: white;
// min-height: 60px;
// }
// .panelstyle-bak {
// z-index: 1001;
// position: absolute;
// margin-left: -155px;;
// margin-top: -49px;
// color: white;
// min-height: 60px;
// }
/**** 地图属性面板通用样式 ****/
.page-panel {
position: absolute;
padding: 0 15px;
background: rgba(0, 0, 0, 0.7);
border: 1px solid #3b5082;
border-top: 2px solid #00ffff;
bottom: 30px;
}
.page-panel .panel-head {
display: flex;
color: #00ffff;
font-size: 16px;
font-weight: bold;
padding: 20px 7px 14px 0;
line-height: 16px;
cursor: pointer;
justify-content: space-between;
border-bottom: 1px solid #20343f;
}
.page-panel .panel-body {
padding: 10px 0 18px;
}
.panel-body1 {
display: flex;
width: 975px;
flex-wrap: wrap;
}
.panel-body1-item {
width: 32%;
height: 30px;
color: #fff;
}
.page-panel .panel-list-item {
display: flex;
height: 14px;
color: #b3c5ec;
font-size: 14px;
line-height: 14px;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.page-panel .panel-list-item .label {
padding: 0;
}
.page-panel::before,
.page-panel::after {
position: absolute;
left: 50%;
width: 0;
height: 0;
border: 6px solid transparent;
content: "";
}
.page-panel::after {
bottom: -12px;
border-top-color: #3b5082;
z-index: 10;
margin-left: -2px;
}
.page-panel::before {
bottom: -11px;
border-top-color: rgba(0, 0, 0, 0.7);
z-index: 12;
margin-left: -2px;
}
.page-panel .close-icon {
position: absolute;
right: 7px;
top: 18px;
color: #1dfdf8 !important;
font-weight: bold;
font-size: 10px;
padding: 1px;
z-index: 100;
margin-top: -7px;
border: 1px solid #1dfdf8;
}
.qxsyopacity {
width: 227px;
/* top: 20px; */
right: 30px;
margin-top: -343px;
margin-left: 1700px;
z-index: 999999999999;
position: relative;
}
.TongHuaLeft {
width: 50%;
height: 230px;
float: left;
padding-top: 8px;
}
.TongHuaRight {
width: 50%;
height: 230px;
float: left;
padding-top: 8px;
}
.close {
width: 100%;
box-sizing: border-box;
text-align: right;
padding-right: 10px;
height: 40px;
line-height: 40px;
position: relative;
border-bottom: 1px solid #ccc;
background: #0b2447;
}
.RenYuanTitle {
position: absolute;
display: inline-block;
width: 100px;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 18px;
color: white;
left: 50%;
margin-left: -50px;
top: 0px;
}
.content {
width: 100%;
height: auto;
}
.RenYuanImg {
height: 100%;
}
</style>
