<template>
<div id="supermap3D" style="height:100%">
<div id="cesiumContainer" style="height:100%"></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/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="panelstyle"
v-show="bgMarkStationBZ"
v-for="(item, index) in MonitorStationBZ"
:key="'bengzmonitorStation' + 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="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.ms }}</div>
</div>
</div>
</div>
</template>
<!--人员属性框-->
<template v-if="MonitorStationRY.length">
<div
class="panelstyle"
v-show="bgMarkStationZZ"
v-for="(item, index) in MonitorStationRY"
:key="'renyuanmonitorStation' + 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.telephone }}</div>
</div>
<div class="item">
<div class="l">人员单位 :</div>
<div class="r">{{ item.company }}</div>
</div>
<div class="call" @click="callPerson">点击通话</div>
</div>
</div>
</template>
<!--站点属性框-->
<template v-if="MonitorStation.length">
<div
class="panelstyle"
v-show="bgMarkStation"
v-for="(item, index) in MonitorStation"
:key="'stationmonitorStation' + 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 {
//原经开三维飞行相关参数
manyouContrl:true,
isFullscreen: false,
videoPanelShow: false, //播放视频面板显隐
isEndRoam: false,
AnimateState: false, //当前漫游状态
video: null, //播放视频标签
videoPanelShow: false, //播放视频面板显隐
dataliststation: [],
ispanelCFBZ: 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);
window.earth=viewer
// 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)
// 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;
//var promise = scene.open("http://10.5.37.60:8090/iserver/services/3D-modelcache/rest/realspace"); //url为在SuperMap iServer上发布的服务地址 */
//var promise = scene.open("http://localhost:8090/iserver/services/3D-YSLINE84_1-pipeline/rest/realspace"); //url为在SuperMap iServer上发布的服务地址 (信阳)
//var promise = scene.open("http://111.231.190.116:8090/iserver/services/3D-YuShuiJing84-jkqline3D6/rest/realspace"); //url为在SuperMap iServer上发布的服务地址 （海口）
//加载倾斜摄影
this.addOSGBtileset()
//鼠标点击事件
this.mouseMapClick();
//entities实体点击事件
viewer.selectedEntityChanged.addEventListener((entity)=> {
//document.getElementById("bubble").style.display="none"
// this.removeAllpopup()
//井盖
if(entity&&entity._feature&&typeof(entity._type)=="undefined"){
console.log(entity)
console.log("点击站点的编号是：",entity.id._stCode)
/* var feature= entity._feature
this.lineInfo.basicData = feature;
document.getElementById("bubble").style.display="block" */
}
})
//加载b3dm
// this.addOSGB()
},
beforeDestroy() {
if(handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN)//移除事件
}
handler=undefined;
},
methods: {
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);
}
},
//根据sql查询
async doSqlQueryWSG(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.smidarraywsg=[]
for(var i=0;i<res.features.length;i++)
{
this.smidarraywsg.push(res.features[i].ID)
}
//根据图层和smid赋值
var layer = window.earth.scene.layers.find('污水管84@jkqline3D6');
layer.selectColorType=1.0
layer.setObjsColor(this.smidarraywsg,Cesium.Color.YELLOW);
}
},
//根据sql查询
async doSqlQueryYSG(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.smidarrayysg=[]
for(var i=0;i<res.features.length;i++)
{
this.smidarrayysg.push(res.features[i].ID)
}
//根据图层和smid赋值
var layer1 = window.earth.scene.layers.find('雨水管84@jkqline3D6');
layer1.selectColorType=1.0
layer1.setObjsColor(this.smidarrayysg,Cesium.Color.YELLOW);
}
},
clearPopup(event) {
var clickDom = event.currentTarget;
var willshow = clickDom.parentNode;
willshow.style.display = "none";
this.bgMarkStation=false;
this.siteInfo.realTimeData = [];
},
//消除所有属性面板
removeAllpopup() {
/* document.getElementById("bubble").style.display="none" */
for(var j=0;j<this.MonitorStation.length;j++) {
if(document.getElementById(this.MonitorStation[j].stCode))
{
document.getElementById(this.MonitorStation[j].stCode).style.display="none"
}
}
this.bgMarkStation=false
},
// 鼠标点击图层事件
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让其展示并跟着地球转动
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("问题2").style.display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(114.0864063271,32.0967950080981,-6);
this.fixDomPosition(pickedFeature.id.id,position);
})
}
else if(pickedFeature.id.type == "人员")
{
document.getElementById("张小明").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 {
}
}, 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&¤tHeight<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&¤tHeight>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: "张小明",
type: "人员",
stCode:"03760000467",
lon: 114.0805319404991,
lat: 32.10399069614823,
},
{
id: "问题2",
type: "问题点",
ms:"此处有水面垃圾",
stCode:"002",
lon: 114.0864063271,
lat: 32.0967950080981,
},
// {
// id: "张小明",
// type: "人员",
// stCode:"23232323",
// lon: 114.148984,
// lat: 32.444625,
// telephone: "1222332332",
// company: "A公司",
// },
/* {
id: "李大明",
type: "人员",
lon: 114.149276,
lat: 32.444964,
telephone: "132333332",
company: "B公司",
}, */
// {
// id: "鄂A888888",
// type: "车辆",
// lon: 114.15077,
// lat: 30.446176,
// },
];
//加载点位数据
//泵站点位
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) {
// console.log(data);
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/tools_icon_53.png");
positionHeight = 0;
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,
// HorizontalOrigin: HorizontalOrigin.LEFT,
// //垂直位置
// verticalOrigin: VerticalOrigin.UP,
pixelOffset: new Cesium.Cartesian2(0, -40),
//heightReference:Cesium.CLAMP_TO_GROUND
},
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;
}
}
}
},
// //请求所有站点
// async stationbaselist() {
// var params={"current":1,"size":999}
// let result = await this.$api.stationbaselist(params);
// if(result?.code === 200) {
// this.MonitorStation=result.data.records
// console.log(this.MonitorStation)
// //水质站
// this.MonitorStationBZ = this.MonitorStation.filter(function (
// item
// ) {
// return item.stationType == "水质站";
// });
// this.addPoint(this.MonitorStationBZ);
// //流量站
// this.MonitorStationZZ = this.MonitorStation.filter(function (
// item
// ) {
// return item.stationType == "流量站";
// });
// this.addPoint(this.MonitorStationZZ);
// //雨量站
// this.MonitorStationSPD = this.MonitorStation.filter(function (
// item
// ) {
// return item.stationType == "雨量站";
// });
// this.addPoint(this.MonitorStationSPD);
// //加载后台接口和json计算出来的高亮报警管线
// this.getPipeJsonData()
// }
// },
getPipeJsonData() {
this.featurespipe=pipeJson.features
//计算关联的高亮管线 this.MonitorStation
for(var i=0;i< this.MonitorStation.length;i++)
{
if(this.MonitorStation[i].warnType&&(this.MonitorStation[i].warnType==1||this.MonitorStation[i].warnType==2)&&this.MonitorStation[i].pids.length>0)
{
var cutid = this.MonitorStation[i].pids.split(',');
for(var k=0;k<cutid.length;k++)
{
for(var j=0;j<this.featurespipe.length;j++)
{
if(cutid[k]==this.featurespipe[j].properties.newid)
{
//this.MonitorStation[i].jsonpipe=this.featurespipe[j].properties;
this.featurespipe[j].properties.stCode=this.MonitorStation[i].stCode
this.pipeBjArray[cutid[k]]=this.featurespipe[j].properties
//添加到高亮图层
//this.featurespipe[j].properties.stCode=this.MonitorStation[i].stCode
break
}
}
}
}
}
var ysgnewids=""
var wsgnewids=""
var ysjnewids=""
var wsjnewids=""
for(var key in this.pipeBjArray)
{
if(key.indexOf("W")>-1&&key.indexOf("WJ")<0)
{
wsgnewids+="NEWID="+"'"+key+"'"+" or "
}
else if(key.indexOf("WJ")>-1)
{
wsjnewids+="NEWID="+"'"+key+"'"+" or "
}
else if(key.indexOf("Y")>-1&&key.indexOf("YJ")<0)
{
ysgnewids+="NEWID="+"'"+key+"'"+" or "
}
else if(key.indexOf("YJ")>-1)
{
ysjnewids+="NEWID="+"'"+key+"'"+" or "
}
}
/* console.log(this.featurespipe)
console.log(this.MonitorStation)
console.log(this.pipeBjArray)
console.log(wsjnewids.substring(0,wsjnewids.length-4))
console.log(ysjnewids.substring(0,ysjnewids.length-4))
console.log(wsgnewids.substring(0,wsgnewids.length-4))
console.log(ysgnewids.substring(0,ysgnewids.length-4)) */
/* this.doSqlQueryWSJ("NEWID='WJ488'") */
if(wsjnewids.substring(0,wsjnewids.length-4))
this.doSqlQueryWSJ(wsjnewids.substring(0,wsjnewids.length-4))
if(ysjnewids.substring(0,ysjnewids.length-4))
this.doSqlQueryYSJ(ysjnewids.substring(0,ysjnewids.length-4))
if(wsgnewids.substring(0,wsgnewids.length-4))
this.doSqlQueryWSG(wsgnewids.substring(0,wsgnewids.length-4))
if(ysgnewids.substring(0,ysgnewids.length-4))
this.doSqlQueryYSG(ysgnewids.substring(0,ysgnewids.length-4))
},
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;
});
},
addBaimo() {
var promise= window.earth.scene.addS3MTilesLayerByScp(
'http://localhost:8090/iserver/services/3D-WuHan-jkqbaimo/rest/realspace/datas/武汉@jkqbaimo/config', //地址写到config那一级
{ name: '武汉' }
)
promise.then((layer)=> {
layer.visible = true;
//this.osgblayer=layer
});
},
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-Config/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' }
// )
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";
},
//原经开项目三维飞行方法
//消除所有属性面板
removeAllpopup(){
if(document.getElementById("长丰泵站"))
document.getElementById("长丰泵站").style.display="none"
if(document.getElementById("烂泥湖泵站"))
document.getElementById("烂泥湖泵站").style.display="none"
if(document.getElementById("长丰闸站"))
document.getElementById("长丰闸站").style.display="none"
if(document.getElementById("DFAQ-07"))
document.getElementById("DFAQ-07").style.display="none"
if(document.getElementById("DFAQ-06"))
document.getElementById("DFAQ-06").style.display="none"
if(document.getElementById("堤防存放点"))
document.getElementById("堤防存放点").style.display="none"
if(document.getElementById("张小明"))
document.getElementById("张小明").style.display="none"
if(document.getElementById("李大明"))
document.getElementById("李大明").style.display="none"
this.bgMarkStationSPDXinsheng=false
},
//飞行到视频点视角
cameraAngleFly() {
this.flyByLontion({
lon: 114.1445306085,
lat: 30.4462301539,
alt: 10,
heading: -50, //东南西北
pitch: 0.0, //上下抬
roll: 0, //正前方旋转
});
},
// 地图初始化
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,
},
});
},
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(-5);
}
routeCor.push(114.085719349506);
routeCor.push(32.0971357752289);
routeCor.push(1.5);
routeCor.push(114.085588643839);
routeCor.push(32.0972612917984);
routeCor.push(1.5);
routeCor.push(114.085491647299);
routeCor.push(32.097355446692);
routeCor.push(1.5);
routeCor.push(114.085318017236);
routeCor.push(32.0975266208165);
routeCor.push(1.5);
routeCor.push(114.085180056944);
routeCor.push(32.0976642995766);
routeCor.push(1.5);
routeCor.push(114.085119280774);
routeCor.push(32.0977270301215);
routeCor.push(1.5);
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(-5);
}
//求全管线漫游路径routeCor
const Lines = Cesium.Cartesian3.fromDegreesArrayHeights(routeCor);
//加载飞行模型参数
const options = {
// modeluri: "/gltfUrl/gltf/00256_Daud008.fbx.glb",
//modeluri: "/gltfUrl/00256_Daud008.fbx.glb",
time: 117,
// 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 = ClockRange.CLAMPED; //到达终止时间后自动停止
window.earth.clock.multiplier = 1;
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.position = position;
this.entity = window.earth.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
// 位置
position: position,
// 计算朝向
orientation: new Cesium.VelocityOrientationProperty(position),
model: {
//uri: "/gltfUrl/car01.gltf",
uri: "/gltfUrl/gltf/car01.gltf",
//uri: "/gltfUrl/00256_Daud008.fbx.glb",
scale: 0.05
},
/* 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.RED.withAlpha(0.5),
}),
width: 10,
show: true,
},
});
//追随视角
window.earth.trackedEntity = this.entity;
window.earth.clock.onTick.addEventListener((clock) => {
this.OneSeeFunc(position);
});
},
//第一视角漫游方法
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
);
// 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
) {
this.holdMY()
console.log("开始展示长丰泵站");
document.getElementById("问题2").style.display="block"
window.earth.scene.preRender.addEventListener(()=> {
var position=new Cesium.Cartographic(114.0864063271,32.0967950080981,-6);
this.fixDomPosition("问题2",position);
})
this.ispanelCFBZ = true;
setTimeout(() => {
this.holdMY()
console.log("停止展示长丰泵站,继续动画");
document.getElementById("问题2").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) {
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.isEndRoam = true;
if (this.entity !== undefined) {
window.earth.entities.remove(this.entity);
}
/* this.$parent.Show(true); */
},
//开始漫游暂停等
beginMY() {
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.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();
},
videoPlayPause() {
this.video.addEventListener("play", () => {
//播放开始执行的函数
if (this.video.currentTime > 1) this.holdMY();
});
this.video.addEventListener("pause", () => {
//暂停开始执行的函数
if (this.video.currentTime > 1) this.holdMY();
});
//回放
this.video.addEventListener("playing", () => {
//暂停开始执行的函数
/* console.log(window.earth.clock.startTime.secondsOfDay);
console.log(this.video.currentTime); */
if (
window.earth.clock.startTime.secondsOfDay &&
this.video.currentTime
)
window.earth.clock.currentTime.secondsOfDay =
window.earth.clock.startTime.secondsOfDay +
this.video.currentTime;
// if (this.video.currentTime > 1) this.holdMY();
});
},
//点击通话
callPerson() {
/* this.$emit("callPerson"); */
console.log("点击了通话请求")
this.$emit("showcall","15629078847")
},
}
}
</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: 320px;
min-height: 60px;
box-shadow: 0 0 6px #101333;
}
.panelstyle {
z-index: 1001;
position: absolute;
// margin-left: -158px;
margin-top: -80px;
background-color: #101333;
padding: 15px 20px 15px;
top: 0;
left: 0;
border-radius: 2px;
max-width: 500px;
min-width: 320px;
min-height: 60px;
box-shadow: 0 0 6px #101333;
.close {
position: absolute;
right: 5px;
top: -3px;
cursor: pointer;
color: #aaa;
&:hover {
color: #777;
}
}
.item {
display: flex;
line-height: 28px;
margin-bottom: 5px;
.l {
width: 85px;
color: #ccc;
margin-right: 10px;
}
.r {
flex: 1;
text-align: right;
}
}
.call {
width: 80px;
height: 30px;
line-height: 30px;
background-color: #1890ff;
text-align: center;
font-size: 14px;
border-radius: 2px;
cursor: pointer;
margin: 15px auto 0;
}
.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;
}
/**** 地图属性面板通用样式 ****/
.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;
}
</style>
